Ajax cross-origin request solution: Use JSONP to obtain JSON data

Due to browser restrictions, ajax does not allow cross-origin communication. If you try to request data from different domains, a security error occurs. If you can control the remote server where data resides and each request is sent to the same domain, you can avoid these security errors. However, what is the use of Web applications if they only stay on their own servers? If you need to collect data from multiple third-party servers due to browser restrictions, ajax does not allow cross-origin communication. If you try to request data from different domains, a security error occurs. If you can control the remote server where data resides and each request is sent to the same domain, you can avoid these security errors. However, what is the use of Web applications if they only stay on their own servers? What should I do if I need to collect data from multiple third-party servers?

Understanding same-origin policy restrictions

The same-origin policy prevents scripts loaded from one domain from obtaining or operating on document properties in another domain. That is to say, the domain of the requested URL must be the same as that of the current Web page. This means that the browser isolates content from different sources to prevent operations between them. This browser policy is old and has existed since Netscape Navigator 2.0.

A relatively simple way to overcome this limitation is to request data from a Web page to the Web server it originated from, and let the Web server forward the request to a real third-party server like a proxy. Although this technology is widely used, it cannot be scaled. Another method is to use the framework element to create a region in the current Web page and use the GET request to obtain any third-party resources. However, after obtaining resources, the content in the framework will be restricted by the same-source policy.

An ideal way to overcome this restriction is to insert a dynamic script element into the Web page. The page source points to the service URL in another domain and obtains data in its own script. When the script is loaded, it starts to execute. This method is feasible because the same-origin policy does not prevent dynamic script insertion and regards the script as being loaded from the domain that provides the Web page. However, if the script tries to load the document from another domain, it will not succeed. Fortunately, this technology can be improved by adding JavaScript Object Notation (JSON.

What is JSONP?

To understand JSONP, I have to mention JSON. What is JSON?

JSONP (JSON with Padding) is an unofficial protocol that allows the server to integrate Script tags to return to the client, cross-origin access is implemented through javascript callback (this is only a simple implementation form of JSONP ).

What is JSONP used?

Due to the restrictions of the same-origin policy, XmlHttpRequest only allows requests to resources of the Current Source (domain name, protocol, Port). To implement cross-origin requests, you can use the script tag to implement cross-origin requests, then, the server outputs JSON data and executes the callback function to resolve cross-Origin data requests.

How to Use JSONP?

The DEMO below is actually a simple form of JSONP. After the client declares the callback function, the client uses the script tag to request data from the server across domains, then the server returns the corresponding data and dynamically executes the callback function.

1. HTML code (any ):