How to implement Jquery ajax asynchronous cross-domain

This time I will bring you Jquery How to implement ajax asynchronous cross-domain, what are the precautions for Jquery ajax asynchronous cross-domain implementation, the following is a practical case, let’s take a look .

How to quickly solve the asynchronous cross-domain problem of JS or Jquery ajax? The editor below will share with you a method to quickly solve the Jquery ajax asynchronous cross-domain problem. I hope it will be helpful to everyone. Let’s follow the editor and take a look.

In a simple summary, there are two solutions.

One is the jsonp method: That is, when the front end sends an asynchronous request, add relevant jsonp settings or configuration; the back end Returns a string in a format that can be parsed by jsonp.

But the jsonp method only supports the get request method, and is not supported by new browser versions (new browser versions mostly make OPITION requests-asynchronous securitychecked test requests, Therefore, the jsonp method cannot be passed),

I don’t know much here.

One is the cros method, The advantage is that it is more secure, can specify a connection whitelist, and can limit request methods (that is, it supports multiple request method), supported by all major browsers. Mainly talk about the implementation method,

Front end: the same format as ordinary asynchronous requests, such as:

$.ajax({ 
   url :'http://localhost:8080/myProject/test' 
    type : "GET",//不局限于get 
   data:{"key1":value1,"key2":value2}, 
   async : true, 
   success : function(data) { 
    var dataObj=eval("("+data+")"); 
     console.log(dataObj); 
     
   }, 
   error : function(data) { 
    alert( "服务器连接失败 ajaxJsonp" ); 
   } 
  });

After End: Mainly setting the response header parameters

response.setHeader("Access-Control-Allow-Origin", "*");//设置可跨域资源共享的域名，只能设置一个具体的域名，但*可以代表所有 
response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");//设置可跨域资源共享的请求方式 
  response.setHeader("Access-Control-Allow-Credentials","true"); 
  response.setHeader("Access-Control-Allow-Headers" ,"Origin, X-Requested-With, Content-Type, Accept");

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How does the jquery plug-in print the page content

How does the jQuery running page trigger the click event by default

How to use on and click in jquery

##Detailed explanation of the tree shape in layui about value passing

The above is the detailed content of How to implement Jquery ajax asynchronous cross-domain. For more information, please follow other related articles on the PHP Chinese website!