The principle of jquery cross-origin request.
What is the implementation of jquery cross-origin requests? JQuery $. ajax () supports cross-origin in get mode, which is completed in jsonp mode ., $. getJSON is $. for more information about ajax () encapsulation, see $. getJSON.
2. What is JSONP? JSONP (JSON with Padding-filling json data is also a common json cross-origin method): execute a client js function by calling a specific src address using the script tag, generate relative data (in json format) on the server and pass it to the js function of the client in the form of parameters to execute this function, provided that the server data output is supported.
3. Why is JSONP used? JSON is a plain text that contains simple brackets, so many channels can exchange JSON messages. Because of the same-origin policy restrictions, we cannot use XMLHttpRequest when communicating with external servers. JSONP is a method that can bypass the same-origin policy. By using the combination of JSON and <script> tags, JSONP directly returns executable JavaScript function calls or JavaScript objects from the server.4. JSONP principle in jQuery 1.2, you can use a callback function in the form of JSONP to load JSON data of other domains. The URL transmitted by the client must contain the callback variable, such as "myurl? Callback =? ". Will jQuery be replaced automatically? For the correct function name to execute the callback function. (Note: The Code after this row will be executed before the callback function is executed.) The server obtains the callback value passed by the client, and the json string to be passed to form callback + "(" json ")" and return it to the client.
More details
(1) first register a callback on the client, and then pass the callback name to the server. At this time, the server is converted into json data. Then, a function is generated in javascript syntax. The function name is the passed parameter callback.
(2) Finally, place the json data directly in the function as an input parameter. In this way, a js syntax document is generated and returned to the client. The client browser parses the script tag and executes the returned javascript document. As a parameter, the data is passed into the pre-defined callback function of the client. (The callback function is dynamically executed)
5. Let's take a look at the jQuery. ajax () method, which is easier to understand.$. Ajax ({async: false, url: 'http: // www. xxxxxxx. action ', // cross-origin URL type: 'get', ype: 'jsonp', jsonp: 'callback', // The default callback, that is, the URL next to the url? Callback =? Data: mydata, timeout: 5000, beforeSend: function () {// jsonp mode this method is not triggered. The reason may be that if dataType is specified as jsonp, it is no longer an ajax event}, success: function (json) {// The client-side jquery pre-defined callback function, after obtaining the json data on the Cross-origin server, the callback function if (json. actionErrors. length! = 0) {alert (json. actionErrors) ;}}, complete: function (XMLHttpRequest, textStatus) {$. unblockUI ({fadeOut: 10}) ;}, error: function (xhr) {// jsonp method this method is not triggered // request error processing alert ("request error (please check related network conditions .) ");}});
6. $. getJSON
$.getJSON("xxxxxx/user.html?callback=?", {},function(json){if(json.errorFlag=="OK"){}else{} )};
Java background codeString callback = request.getParameter("callback");JSONObject ret =new JSONObject();ret.put("errorFlag", "OK");out.print(callback+ "(" + ret.toString() + ")");
