How to use Ajax cross-domain requests

This time I will show you how to use Ajax cross-domain requests. What are the precautions for using Ajax cross-domain requests? . Here are practical cases, let’s take a look.

This article will tell the story of a novice who encountered a cross-domain problem but didn’t know it was a cross-domain problem, then knew it was a cross-domain problem but didn’t know how to solve it, then solved the cross-domain problem, and finally found two ways to solve ajax. The whole process of cross-domain issues.

I don’t know if it is a cross-domain problem

The reason is this. In order to reuse and reduce repeated development, a separate user Permission management system was developed , and other systems obtain authentication and authorization information, let's call it system A for the time being; take system B as an example to call system A. In system B, I used ajax to call the interface of system A (the data format is json). I was very confused at the time. Accessing the corresponding url in system A can return json data normally, but using ajax to request the same url in system B is a bit confusing. There was no reaction at all, as if nothing happened. After repeated changes like this for a long time, I still couldn't solve it, so I asked my colleagues for help and reminded me that it might be an ajax cross-domain problem, so I solved the problem as a cross-domain problem.

Knowing cross-domain but not knowing how to solve it

Knowing the exact cause of the problem, the only thing left is to find a solution to the problem. I googled for a long time, and again under the guidance of a colleague, I learned that jQuery's ajax has attributes such as jsonp, which can be used to solve cross-domain problems.

Find a solution

Now that we know how to solve the cross-domain problem, the rest is the implementation details. Errors are inevitable during the implementation process. Because I didn't understand the difference between the two formats of json and jsonp, I also made a mistake. It took me a long time to google to solve it.

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 at all writing this way. At first, the error processing function is just alert. ("error"), in order to further clarify what caused the error, the processing function was changed to the above implementation. The last line of alert is used as; parsererror. I was puzzled, so I continued to google, and finally found the answer on the almighty stackoverflow, the link is here. The reason is that the format of jsonp is slightly different from the json format, so the code on the server side is slightly different.

Compare the difference between json and jsonp formats:

json format:

{
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp format:

callback({
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
})

You can see the difference. The parameter of callback in the URL passed to the background is Shenma. Callback is Shenma. jsonp has one more layer than json, callback(). So you know how to deal with it. So modify the background code.

The final background 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, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", 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 to my json format first, and then use the parameter callback to add another layer outside the json, just Became jsonp. Specify data type as jsonp ajax for further processing.

Although this solves the cross-domain problem, let’s review the causes of parsererror. The reason is that blindly treating json format data as jsonp format data for ajax to process, resulting in this error. At this time, the server-side code is like this:

@RequestMapping(value = "/getGroupById")
@ResponseBody
public 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, "获取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
}
return result;
}

The first way to solve the ajax cross-domain problem It's over.

Add a solution

The pursuit never ends. In the process of searching on Google, I accidentally discovered a jQuery plug-in specially designed to solve cross-domain problems-jquery-jsonp.

With the foundation of the first method, it is relatively simple to use the jsonp plug-in, and the server-side code does not require any changes.

Let’s 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("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});

So far, the two ways to solve cross-domain problems have been introduced.

Supplement: There are three solutions to Ajax cross-domain problems:

1. Solve cross-domain problems through the intermediate transition layer

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

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

2.通过<script>标签解决跨域问题</script>

注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img alt="How to use Ajax cross-domain requests" >、<iframe></script>

示例：

前台脚本：

<script> 
var flightHandler = function(data){ 
alert(&#39;你查询的航班结果是：票价 &#39; + data.price + &#39; 元，&#39; + &#39;余票 &#39; + data.tickets + &#39; 张。&#39;); 
}; 
var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler"; 
var script = document.createElement(&#39;script&#39;); 
script.setAttribute(&#39;src&#39;, url); 
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script); 
</script>

后台data.jsp内容：

使用jquery的jsonp来实现跨域访问，例子如下：

<script> 
$(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(&#39;您查询到航班信息：票价： &#39; + json.price + &#39; 元，余票： &#39; + json.tickets + &#39; 张。&#39;); 
}, 
error: function(){ 
alert(&#39;fail&#39;); 
} 
}); 
}); 
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

HTML5+ajax怎么做出预览图片效果

怎么实现不刷新的Ajax分页

The above is the detailed content of How to use Ajax cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!