Ajax cross-origin access

HTTP requests can be divided into two types: HTTP requests in the same domain and HTTP requests in different domains.

The initiation of an HTTP request can be a background program or a browser. Java programs are all completed through urlconnection. The launch of browser requests relies on the internal implementation of the browser.

Elements that can initiate HTTP requests in HTML documents include:

 

1. <Link> request a CSS style File
2. <SCRIPT> request a Javascript script file
3. <IFRAME> and <frame> request HTML document files
4. request image files
5. <A>
6. <Form> request (get/post)
7. <Object> request other resource files, audio and video files, and plug-ins
8. <Source> used for audio and video

 

These elements in HTML can request resources across domains. These requests are traditional HTTP requests. There is also an Ajax request. It is different from traditional requests. Nothing else, but there are more Ajax requests in the Request Header:X-requested-:XMLHttpRequest. Traditional requests do not have this.

 

There is no problem in implementing cross-origin for HTTP requests. What about Ajax cross-origin?

 

 

The following is a scenario: Ajax requests the servlet in another domain to obtain JSON data and then process it.

Create Project test1,

 

 

 

Create Project Test2 and use the IFRAME and Ajax methods under index. jsp to obtain the request in test1.

 

 

Test:

Enter http: // localhost: 8081/Test2 in the address bar

 

 

This is the interface we see. Visit in IFRAME on the page:

The result of http: // localhost: 8080/test1/domainservlet.

 

Next, use ajax to retrieve data and click the button:

 

 

Obviously, access is not successful.

 

What should I do if I want to obtain data through Ajax requests?

 

1) Use the cross-origin resource access feature of <SCRIPT> to solve the problem

 

Change getdomainresp in the code above:

function aa(data){      console.log(data);   }  function getDomainResp(){      var script=document.createElement("script");      script.type="text/javascript";     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";      document.getElementsByTagName("head")[0].appendChild(script);  }

Add a <SCRIPT> dynamically to obtain the data. The passed parameter is AA, that is, the name of the callback function after obtaining data.

Slightly adjust the servlet:

 

 

In this way, you can.

Console information:

 

In the console, you can also know that the browser originally requests the script resource, but it is blocked and the text/html method should be used to request resources.

Using the debugging tool, you can see that the request content of <SCRIPT> is:

 

In this way, cross-origin access is completed.

 

2) jquery also provides support for cross-origin access.

 

The preceding JS Code is slightly adjusted. You can use jquery's Ajax request to use the data type returned by jsonp:

function aa(data){      console.log(data);   }   /*   function getDomainResp(){      var script=document.createElement("script");      script.type="text/javascript";     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";      document.getElementsByTagName("head")[0].appendChild(script);  }  */  function getDomainResp(){      $.ajax({         url:‘http://localhost:8080/test1/DomainServlet‘,         crossDomain:true,         dataType:‘jsonp‘,         type:‘post‘,         data:{            jsonp:‘callback‘         },         jsonpCallback:‘aa‘      });  } 

The background code remains unchanged. That is, it is still:

 

The correct results will also be obtained.

 

View request information:

 

As you can see, jquery also sends <SCRIPT src = ""> requests. Set the functions of Ajax parameters:

 

1) Whether cross-origin crossdomain or return value type jsonp tells jquery that this is a cross-origin request, that is, to tell jquery that the request should be sent using the <SCRIPT src = ""> method.

2) jsonp: 'callback', that is, one of the request parameters sent is called callback.

3) jsonpcallback: Set the callback value of the request parameter to AA.

 

That is to say, jquery's cross-origin access is actually accessed using the <SCRIPT> method above.

Let's take a deeper look at it and use the cross-origin request Resource feature of <SCRIPT> to complete cross-origin access. In fact, it is a traditional HTTP request initiated by a browser.

So <IFRAME> also has the cross-origin access feature. Can I use <IFRAME> for cross-origin access? After all, it is a traditional HTTP request initiated by a browser?

At the same time, you can also think about whether cross-origin access can be completed by initiating an HTTP request on the browser. Can background programs, such as urlconnection in Java, be used to initiate cross-origin access requests?

 

Ajax cross-origin access