jquery Cross-Domain 3

These two days with Jquery cross-domain fetch data, often encountered invalid label This error, very depressed, always get the server side sent back json value,

The two methods commonly used across domains are:$.ajax and $.getjson

Finally, carefully quiet down, read the official JSON document after the discovery of such a paragraph:

JsonData is a very convenient way to passjavascript structured data parsed. If the obtained data file resides on the remote server (the domain name is different, that is, the data is obtained across domains), you need to use jsonp type. With this type, a query string parameter is created  callback=?  url > behind. The server side should be in json data preceded by a callback function name to complete a valid jsonp request. If you want to specify the parameter name of the callback function to replace the default callback can be set by $.ajax () jsonp parameters.

in fact, the principle of jquery cross-domain is implemented through the outer chain <script> , and then in the callback function plus the callback function parameters to achieve True cross-domain

Jquery will have callback this parameter every time a cross-domain sends a request, in fact, the value of this parameter is the callback function name, so the server side in the sending of JSON data, should put this parameter in front, The value of this parameter is often generated randomly, such as:jsonp1294734708682, and you can also set the name of the callback method by using the $.ajax method. Once the principle is understood, the server should send data like this:

"jsonp1294734708682 ({\" userid\ ": 0,\" username\ ": \" Null\ "})"; 

In this way, theJSON data {\ "userid\": 0,\ "username\": \ "Null\"} is used as a parameter of the jsonp1294734708682 callback function

Let's start with an example.

If the data returned normally:

{"Success": [{"id": 1, "title": "Title 1"}, {"id": 2, "title": "Title 2"}, {"id": 3, "title": "Title 3"}]}

Let's introduce our own parameters for jquery.

/* * * * @dataType (String) * "XML": Returns an XML document that can be processed with jQuery. * "HTML": Returns plain text HTML information; The included script tag is executed when the DOM is inserted. * "Script": Returns plain text JavaScript code. "JSON": Returns the JSON data. * "JSONP": Jsonp format. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? is the correct function name to execute the callback function. * "Text": Returns a plain text string * /** * @jsonp (String) overrides the name of the callback function in a JSONP request. * This value is used instead of "callback=?" The "callback" part of the URL parameter in this get or POST request, * such as {jsonp: ' onjsonpload '} will cause the "onjsonpload=?" passed to the server. */* * * @jsonpCallback (String) * Specify a callback function name for the JSONP request. This value will be used instead of the random function name generated by jquery automatically. * This is primarily used to create a unique function name for jquery, which makes it easier to manage requests and provides a convenient way to provide callback functions and error handling. * You can also specify this callback function name when you want the browser to cache a GET request. */

1 do not specify the name of the JSONP,

$.ajax ({    URL: ' http://lifeloopdev.info/get_events ',    dataType: "Jsonp",    data: "offset=0& Num_items=10 ",    Username: ' username ',    password: ' Password 'functionfunction (i, item {$ ("body"). Append (' );}); }});

The server needs to return data samples like this:

Response.contenttype="text/html; Charset=utf-8"; String callback = request.querystring["callback""{\" success\ ": [{\" id\ ": 1, \" title\ ": \" title 1\ " }, {\ "id\": 2, \ "title\": \ "title 2\"}, {\ "id\": 3, \ "title\": \ "title 3\"}]}");      

2 Specifies the JSONP name, and functions that return the function name,

 // Here we ourselves specified JSONP callback's name $.ajax ({url: ' http://lifeloopdev.info/get_events ' , data: "offset=0&num_items=10"  username: ' username ' , Jsonpcallback: ' Successcallback ' }); function Successcallback (data) {$.each (data.success, function (I, item) {$ ("body"). Append (' ); });}

The server needs to return data samples like this:

Response.contenttype="text/html; Charset=utf-8"; String callback = request.querystring["successcallback""{\" success\ ": [{\" id\ ": 1, \" title\ ": \" Title 1\ "}, {\" id\ ": 2, \" title\ ": \" title 2\ "}, {\" id\ ": 3, \" title\ ": \" title 3\ "}]}");    

3 Specifies the JSONP name, does not specify functions that return function names,

$.ajax ({    URL: ' http://lifeloopdev.info/get_events ',    dataType: "Jsonp",    data: "offset=0& Num_items=10 ",    Username: ' username ',    password: ' Password ', Jsonp:" Successcallback "  functionfunction (i, Item) {$ ("body"). Append (' ); 

The server needs to return data samples like this:

Response.contenttype="text/html; Charset=utf-8"; String callback = request.querystring["successcallback""{\" success\ ": [{\" id\ ": 1, \" title\ ": \" Title 1\ "}, {\" id\ ": 2, \" title\ ": \" title 2\ "}, {\" id\ ": 3, \" title\ ": \" title 3\ "}]}");    

4 using Getjson () to obtain data,

/* * * NOTE: * Here is the address called jsoncallback=? is the key! Which of our concerns is jsoncallback=? What role did it play? The original jsoncallback=? After being replaced, the method name is passed to the server. * What do we do on the server side? The server accepts the parameter Jsoncallback and returns the value of Jsoncallback as the JSON data method name. */functionfunction (i, Item) {$ ("body"). Append (' );}); 

The server needs to return data samples like this:

Response.contenttype="text/html; Charset=utf-8"; String callback = request.querystring["jsoncallback""{\" success\ ": [{\" id\ ": 1, \" title\ ": \" Title 1\ "}, {\" id\ ": 2, \" title\ ": \" title 2\ "}, {\" id\ ": 3, \" title\ ": \" title 3\ "}]}");    

jquery Cross-Domain 3