Use jsonp to obtain json data and implement cross-origin AJAX requests.

Use jsonp to obtain json data and implement cross-origin AJAX requests.

AJAX (Asynchronous JavaScript and XML) Is a technology used to create a fast dynamic web page. It exchanges data with the server and updates some webpages without reloading the entire page. ajax usesXMLHttpRequestThe object exchanges data with the server in the background. XMLHttpRequest is the basis of AJAX, which allows the client JavaScriptHTTPRequest to connect to the remote server.

However, due to browser restrictions, this method cannot be used for cross-origin access. If you use this method for cross-origin access, security issues may occur. However, we can find that JavaScript files are not restricted by browsers when cross-origin calling is performed on web pages. Therefore, we can use the remote server data to load files in js format, then it is used for the client to call.

JSON (JavaScript Object NotationIs a lightweight text data exchange format, which is self-descriptive and easy to understand. JSONJavaScript For parsing, JSON data can be used AJAX For transmission.

JSON instance:

{ "employees": [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName":"Carter" } ] }

JSON syntax is a subset of JavaScript Object Notation Syntax:

Data is stored inName/valueCenter, data fromCommaSeparated,Curly bracketsSave object,Square bracketsSaveArray.

JSON features

• Plain text, easy to pass across platforms
• Javascript native support, almost all background languages supported
• The lightweight text data exchange format is suitable for transmission over the Internet.
• It is smaller, faster, and easier to parse than XML.

Based onJSONThese features can be dynamically generated by the serverJSONFile, then load the data required by the client into the file, and then call the file back to the client for use by the client. In order to facilitate the client to use data, an informal transmission protocol is gradually formed.JSONPThe main point of this Protocol is to allow users to transmitcallbackThe parameter is sent to the server. When the server returns datacallbackParameters are loaded as function names.JSONData, so that the client can customize its own functions to automatically process the returned data.

How to Use JSONP

A simple method is to use jQuery:

<! DOCTYPE html> 

 
 
 
  
type: Request type, GET or POST. The default value is GET;
 
 
  
async: True (asynchronous) or false (synchronous). The default value is true. synchronous requests lock the browser. Other operations can be performed only after the request is complete;
 
 
  
url: The address where the request is sent (the absolute address should be used for cross-origin requests );
 
 
  
dataType: Specifies the data type returned by the server;
 
 
  
jsonpCallback: Custom JSONP callback function name;
 
 
  
success: Callback function after successful request;
 
 
  
error: This method is called when the request fails.

 
Running result:

Type of data returned by the server:

Returns a specified function namedmessageCallback function. The data contained in the function isJSONFormat.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.