JQuery AJAX How to get and parse JSONP instead of JSON?

Question

Summary
I have an application that performs a search. Before allowing the submission, it sends an AJAX request to the request to check for a valid zip code, and then returns a JSON result that I can parse. I need to do the same in the cross domain, and I know that I should use the full URL and JSONP format instead, but I'm not sure how to set it.

AJAX call
I am sending a zip code that is launched through a request.

if (zipLength == 5) {
    $.ajax({
        type:"GET", 
        //location of the cfc
        url: "cfc/test.cfc",
        //function name and url variables to send
        data: {method:'zip_lookup', zip:zip},
        //function run on success takes the returned json object and reads values.
        success: function(obj) {
            var response = $.parseJSON(obj);

            if (response.formError == true) {
                alert(response.message);
            }
        }
    });
}

CFC in Coldfusion that launches a request

<!---Makes sure entered zip exists--->   
<cffunction name="zip_lookup" access="remote">
    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>

    <cfoutput>
        <cfset obj = 
            {
                "formError" = formError,
                "message" = message
            } 
        />
    </cfoutput>

    <cfprocessingdirective suppresswhitespace="Yes"> 
        <cfoutput>
            #serializeJSON(obj)#
        </cfoutput>
    </cfprocessingdirective>

    <cfsetting enablecfoutputonly="No" showdebugoutput="No">
</cffunction>

JSON response
This is the result of a request.

{"message":"Invalid Zip","formError":true} 

AJAX, formError message JSON. JSONP?

success: function(obj) {
    var response = $.parseJSON(obj);

    if (response.formError == true) {
        alert(response.message);
    }
}

Answer 1

.

, JSON.
JSONP.


AJAX

$.ajax({
    type:"GET", 
    //Location of the cfc
    url: "http://yourFullUrl/test.cfc",
    //Function name and url variables to send
    data: {method:'zip_lookup', zip:zip},
    //Set to JSONP here
    dataType:"jsonp",
    //The name of the function that sent back
    //Optional because JQuery will create random name if you leave this out
    jsonpCallback:"callback",                   
    //This defaults to true if you are truly working cross-domain
    //But you can change this for force JSONP if testing on same server
    crossDomain:true,               
    //Function run on success takes the returned jsonp object and reads values.
    success: function(responseData) {
        //Pulls the variables out of the response
        alert(responseData.formError);
        alert(responseData.message);
    }
});

CFC Coldfusion,

<cffunction name="zip_lookup" access="remote" returntype="string" returnformat="plain" output="false">

    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>


    <cfoutput>
        <cfscript>
           <!---Important to have double quotes around the name and value. --->
           <!---I missed this before --->
           return '#arguments.callback#({"formError": "#formError#", "message": "#message#"});';
       </cfscript>
    </cfoutput>

</cffunction>

JSONP

//Using the name from the jsonpCallback setting in the AJAX call
callback({"formError": "true", "message": "Invalid Zip"});

Answer 2

jsonp ,

: JSONP

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});