Ajax call is not hitting the rest service returning 404 error

Question

I am new to the rest api, and trying to hit the service method using jquery ajax. The main problem is ,the service class is not getting called and I am getting the error 404 from the server. This is my web.xml file

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>AudienceManagement</display-name>
  <servlet>
    <servlet-name>Jersey REST Service</servlet-name>
    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
    <init-param>
      <param-name>jersey.config.server.provider.packages</param-name>
      <param-value>com.inf.dashboardapp.api</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Jersey REST Service</servlet-name>
    <url-pattern>/api/*</url-pattern>
  </servlet-mapping>
</web-app>

This is my js file :

var myData=[];
 $('#ajax').click(function(){ 
        alert('ajax');
         $.ajax({ 
             type: "GET",
             dataType: "json",
             url: "http://localhost:8080/AudienceManagement/api/ref/check",
             success: function(data){        
                alert(data);
                myData=data;
             },
             error: function(data){
                 alert('error');
               },
               complete: function(data) {
                 alert('complete')
               }
         });
    });

This is my service class.

@Path("ref")
public class DataAPI {
    @Path("check")
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Response fetchBoatingTypeList() {
        System.out.println("Entered");
        String returnValue = null;
        Response response = null;
        try {
            JSONObject obj = new JSONObject();
             obj.put("name", "Bhavana");
              obj.put("num", new Integer(100));
              obj.put("balance", new Double(1000.21));
              obj.put("is_vip", new Boolean(true));
            response = Response.status(Status.OK).entity(obj).build();
        } catch (Exception e) {
            //String returnString = "{\"message\":\""
                    //+ AppConfig.PROPERTIES.getProperty(e.getMessage()) + "\"}";
            String returnString="ERRRRRRROR ";
            response = Response.status(Status.SERVICE_UNAVAILABLE)
                    .entity(returnString).build();
        }
        return response;
    }
}

This is the error that I am getting when I made an ajax call.

GET http://localhost:8080/AudienceManagement/api/ref/check 404 (Not Found)