Shulou(Shulou.com)06/03 Report--

This article mainly explains the "summary of solutions to Ajax cross-domain problems". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and study the "summary of solutions to Ajax cross-domain problems".

First, let's take a look at a simple version of how to use jQuery's ajax to solve cross-domain problems on the page:

$(document) .ready (function () {var url=' http://localhost:8080/WorkGroupManagment/open/getGroupById"+"?id=1&callback=?';$.ajax({url:url,dataType:'jsonp',processData: false, type:'get',success:function (data) {alert (data.name);}, error:function (XMLHttpRequest, textStatus, errorThrown) {alert (XMLHttpRequest.status); alert (XMLHttpRequest.readyState); alert (textStatus);});})

There is no problem with writing this way. At first, error's handler is only alert ("error"). In order to further figure out what caused the error, the handler is changed to the above implementation. The last line alert is used as; parsererror. Puzzled, continue to google, and finally found the answer in the omnipotent stackoverflow, the link here. The reason is that the format of jsonp is slightly different from that of json, so the code on the server side is slightly different.

Compare the differences between json and jsonp formats:

Json format:

{"message": "get success", "state": "1", "result": {"name": "working Group 1", "id": 1, "description": "11"}}

Jsonp format:

Callback ({"message": "get success", "state": "1", "result": {"name": "working Group 1", "id": 1, "description": "11"}})

You can see the difference. In url, the parameter that callback passes to the background is that callback is god horse. Jsonp has one more layer than json, callback (). So I know what to do with it. So modify the background code.

The backend java code is as follows:

@ RequestMapping (value = "/ getGroupById") public String getGroupById (@ RequestParam ("id") Long id,HttpServletRequest request, HttpServletResponse response) throws IOException {String callback = request.getParameter ("callback"); ReturnObject result = null;Group group = null;try {group = groupService.getGroupById (id); result = new ReturnObject (group, "get success", Constants.RESULT_SUCCESS);} catch (BusinessException e) {e.printStackTrace (); result = new ReturnObject (group, "acquisition failure", Constants.RESULT_FAILED) } String json = JsonConverter.bean2Json (result); response.setContentType ("text/html"); response.setCharacterEncoding ("utf-8"); PrintWriter out = response.getWriter (); out.print (callback + "(" + json + ")"); return null;}

Note that you need to convert the query results into my json format first, and then put another layer around the json with the parameter callback, which becomes jsonp. An ajax with a specified data type of jsonp can be further processed.

Although this solves the cross-domain problem, review the causes of parsererror. The reason is that the data in json format is blindly processed by ajax as data in jsonp format, resulting in this error. At this time, the server code looks like this:

@ RequestMapping (value = "/ getGroupById") @ ResponseBodypublic ReturnObject getGroupById (@ RequestParam ("id") Long id,HttpServletRequest request, HttpServletResponse response) {String callback = request.getParameter ("callback"); ReturnObject result = null;Group group = null;try {group = groupService.getGroupById (id); result = new ReturnObject (group, "get success", Constants.RESULT_SUCCESS);} catch (BusinessException e) {e.printStackTrace (); result = new ReturnObject (group, "acquisition failure", Constants.RESULT_FAILED);} return result;}

At this point, the first way to solve the cross-domain problem of ajax is over.

Add a solution.

The pursuit of endless, in the process of google, stumbled upon a jQuery plug-in specifically used to solve cross-domain problems-jquery-jsonp.

With the foundation of the first approach, it is relatively easy to use the jsonp plug-in, and there is no need to change the code on the server side.

Take a look at how to use the jquery-jsonp plug-in to solve cross-domain problems.

Var url= "http://localhost:8080/WorkGroupManagment/open/getGroupById"+"?id=1&callback=?";$.jsonp({"url": url,"success": function (data) {$("# current-group") .text ("current working group:" + data.result.name);}, "error": function (djimmsg) {alert ("Could not find user" + msg);}})

At this point, the two ways to solve cross-domain problems are all introduced.

Add: there are three solutions to Ajax cross-domain problems:

1. Solve cross-domain problems through intermediate transition layer

(1) through the Web proxy server to isolate applications in different domains through the proxy server, all applications are under one domain name. (such as apache,nginx, etc.)

(2) Cross-domain security restrictions refer to the browser side. There are no cross-domain security restrictions on the server side, so the work of "cross-domain access" is completed through the native server side in a way similar to httpclient.

two。 Solve cross-domain problems through tags

Note: all tags that have the attribute "src" have cross-domain capabilities, such as,

、

Example:

Foreground script:

Var flightHandler = function (data) {alert ('the flight result you inquired about is: fare' + data.price + 'yuan,' + 'remaining tickets' + data.tickets + 'tickets.') ;}; var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler"; var script = document.createElement ('script'); script.setAttribute (' src', url); document.getElementsByTagName ('head') [0] .appendChild (script)

Background data.jsp content:

Use jquery's jsonp to achieve cross-domain access. Examples are as follows:

(function () {$.ajax ({type: "get", async: false, url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp", dataType:" jsonp ", jsonp:" callback ", jsonpCallback:" flightHandler ", success: function (json) {alert ('you found flight information: fare:' + json.price + 'yuan, remaining tickets:' + json.tickets +'.') ;}, error: function () {alert ('fail');}});}) Thank you for reading. The above is the content of "Summary of Solutions to Ajax Cross-domain problems". After the study of this article, I believe you have a deeper understanding of the summary of solutions to Ajax cross-domain problems, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.