Detailed explanation of the principles of cross-origin between ajax and jsonp, and detailed explanation of cross-origin between ajaxjsonp

Detailed explanation of the principles of cross-origin between ajax and jsonp, and detailed explanation of cross-origin between ajaxjsonp

Why is there a cross-origin issue? -The same-origin policy exists.

The same-origin policy is a security policy of the browser. The so-called same-origin refers to the Protocol in the request URL address. The domain name and port are the same, as long as one of them are different, it is the cross-Origin

The same-origin policy is mainly used to ensure browser security.

In the same-origin policy, the browser does not allow Ajax to retrieve server data across domains.

Http://www.example.com/detail.html

Cross-origin request:

• Different http://api.example.com/detail.html domain names
• Http://www.example.com: 8080/detail.html port different
• Http://api.example.com: 8080/detail.html domain name, port different
• Different https://api.example.com/detail.html protocols and domain names
• Https://www.example.com: 8080/detail.html port, protocol is different

Basic ajax concepts

To understand this concept, you must first understand synchronous interaction and Asynchronous interaction.

• Synchronous Interaction: the client browser sends a request to the server, and the server returns a page. The returned page overwrites the previous page. We call this interaction method synchronous interaction.
• Asynchronous interaction: the browser can be disconnected to send a request to the server. The server returns data and the returned data will not overwrite the previous page. We call this interaction method Asynchronous interaction.

Main ajax application scenarios: Dynamic Data Interaction with servers without page refreshing

Interaction Principle

• Synchronous interaction principle: in the browser, how do we send requests to the server? You can click the hyperlink to submit the form. The address entered in the address bar of the browser sends requests to the server. In fact, the browser helps us send requests to the server.
• Asynchronous interaction principle: JavaScript provides us with a new API interface to help us send http requests. The XMLHttpRequest object helps us send requests.

All our interactive operations can be completed through this object, send requests, and accept server data.

Specific ajax application scenarios

• The front-end can send a request to the server through XMLHttpRequest, then accept the data returned by the server through the XMLHttpRequest object, and write the data to the page through the dom operation.
• Ajax: it can be used for form input validation.
• Ajax: it can also be used for performance optimization. For example, a huge page cannot be loaded at a time to implement a rolling load.

Four steps for XMLHttpRequest Interaction

1. instantiate the XMLHttpRequest object

2. If you want to interact with the server, you must open a connection with the server.

3. send data to the server and send parameter data to the server

4. Accept the data returned by the server. When the server returns the data to the client, it returns some status. You can monitor the status change of the server to better control the entire interaction process.

Ajax cross-Origin

Cross-origin: If I access site a, the background returns a page to me, and then I want to access site B's resources on this page of Site a, this is a cross-origin effect, cross-origin browsers have security restrictions.

Solution: Cross-origin: jsonp

JSONP is short for JSON with Padding. It is a solution based on JSON format to solve cross-origin request resources. The basic principle is to use the <script> </script> element tag in HTML to remotely call a JSON file for data transmission. To obtain JSON data (getUsers. JSON) with B .com IN THE a.com domain ):

Jsonp solves the fundamental principle of cross-origin: because browsers have same-origin restrictions, different sites cannot access each other, but sometimes we want to obtain data from other sites, for example, if we want to obtain the weather forecast data of rapid data, this must be cross-origin, what should we do?

Principle: dynamically create the <script> tag and use the <script> src to obtain data across domains without being subject to the same-origin policy.

In this way, you can obtain the callback function passed by the foreground in the background, and return the call of this function in the background. The parameter is the data requested by the foreground.

Js Code

<script type="text/javascript"> function handleResponse(response){   console.log(response); }</script><script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() {   var script = document.createElement("script");  script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";  document.body.insertBefore(script, document.body.firstChild);  };};</script>

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.