Reprinted from: http://blog.csdn.net/wqmain/article/details/8905287 One: Problem introduction
Plugin Introduction: It is well known that the use of Ajax directly to initiate requests for cross-domain access without permission, this time, need to use the JSONP Protocol (unofficial Protocol) processing, jquery in the $.ajax method also directly supports the use of the Protocol for cross-domain access. The following first describes cross-domain access using the $.ajax method of jquery, and then introduces the functionality of using other jquery plug-ins (JQUERY-JSONP) to implement the sample.
1, create a new JSP page, add a section of JS code content as follows:
[JavaScript] view plaincopyprint? <script type= "Text/javascript" > function ajaxtest () { $.ajax ({ url: ' Http://192.168.10.111/demo/testjson ', data:{rel:13}, datatype: "Jsonp", jsonp: "Callback", Jsonpcallback: "Success_jsonp", timeout:3000, datafilter:function (JSON) { Console.log ("Jsonp.filter:" +json); return json; }, success: function (json,textstatus) { console.Log ("jsonp.success:" +json.name); }, error:function (xmlhttprequest,textstatus,errorthrown) { console.log ("Jsonp.error:" +textstatus); } ); } </script>
Then add a button to test the JS method, as follows:
[HTML] view Plaincopyprint? <input type= "button" value= "Ajaxtest" onclick= "ajaxtest ()"/> Description: When the Ajaxtest button is clicked, a request is initiated by the URL, DataType, Jsonp and other parameters, Ajax use JSONP protocol to http://192.168.10.111/demo/testjson this address to initiate the request, and automatically append callback parameters after the URL, the actual requested URL address should be:/HTTP 192.168.10.111/DEMO/TESTJSON?REL=13&CALLBACK=SUCCESS_JSONP, the request time-out is 3 seconds, and the received data is a JSON-formatted string. If the JSON data returned by the remote method is successfully received and is well-formed, the first step is to enter the Datafilter method (you can preprocess the returned JSON data in this method, such as filtering, changing JSON data, etc.), and then enter the Success method If the request fails, or if the JSON data returned is malformed, it goes directly to the error method.
So what kind of data should be returned by the Testjson method on the server? It is not right to return a JSON object or JSON string directly. You also need to add the callback parameter values that were passed in before the request, and the background (in the case of servlets) should be treated like this:
[Java] view Plaincopyprint? public void Testjson (HttpServletRequest request, HttpServletResponse response) {String callback = (string) request.g Etparameter ("callback"); String jsondata = "{\" id\ ": \" 3\ ", \" name\ ":" Zhangsan ", \" telephone\ ":" 13612345678 "}";//To demonstrate the effect, the JSON data is a dead String RetS TR = callback + "(" + Jsondata + ")"; Problem Solving Method Response.getwriter (). print (RETSTR); }
The data for this background response is actually: Success_jsonp ({"id": "3", "Name": "Zhangsan", "Telephone": "13612345678"}) where Success_ Jsonp depends on the setting of the Ajax parameter value, and if not set, jquery will automatically generate a name as the parameter value of the callback. In short, the background only need to receive parameter after the request, dynamic stitching callback variable value on it.
If the returned data format does not follow the above, the request will fail and go directly to the Ajax error method. Like uncaught syntaxerror:unexpected token: A similar error is that the JSON data returned does not have the "(" and ")" parentheses wrapped up or preceded by a callback value.
Second: Use other plugins
Cross-domain Call function in addition to the $.ajax method of query can be implemented, there are many other jquery plug-ins on the network can be done, the following is the use of jquery Jsonp plug-in to make cross-domain calls:
First introduce the JQUERY-JSONP plugin in the previously created JSP page and add the Jsonptest test method, download address: Https://github.com/jaubourg/jquery-jsonp
[JavaScript] view Plaincopyprint? <script type= "Text/javascript" sr