js/ajax spanning access-jsonp principles and examples (javascript and jquery implementation code)

js/ajax spanning access-jsonp principles and examples (javascript and jquery implementation code)_javascript skills

WBOY

Release： 2016-05-16 17:45:07

Original

1344 people have browsed it

Fortunately, I saw the rising sun again after the apocalypse, so I can still write articles here. Let’s get back to the topic. I recently worked on a project and needed to use a subdomain name to call an existing function under the main domain name, so I thought of it. Use jsonp to solve it. There are many friends who have this need in our usual projects, so we recorded it for future reference and hope it can help everyone.

What is the JSONP protocol?
JSONP is JSON with Padding. Due to the restrictions of the same-origin policy, XmlHttpRequest is only allowed to request resources from the current source (domain name, protocol, port). If we want to make a cross-domain request, we can make a cross-domain request by using the script tag of html and return the script code to be executed in the response, where the javascript object can be passed directly using JSON. This cross-domain communication method is called JSONP.
Obviously, JSONP is a Script Injection behavior and requires special attention to its security.

jsonp instance in Jquery
We need two pages to assume the client and server roles of the protocol respectively.

Client code:

Copy code The code is as follows:

jsonp test example

< /head> 

The remote data is as follows:

Server code (this example uses PHP) :

Copy code The code is as follows:

 
$jsonp = $_REQUEST["callback"]; 
$str = '[{"id" :"1","name":"Test 1"},{"id":"2","name":"Test 2"}]'; 
$str = $jsonp . "(" .$ str.")"; 
echo $str; 
?> 

Principles and simple examples of Jsonp
jquery It is encapsulated, and you may not see the real implementation method. We use the following example to illustrate:
Client code:

Copy code The code is as follows:

jsonp test example

< /div>

Server code:

Copy code The code is as follows:

 
$str = '[{"id":"1","name" :"Test 1"},{"id":"2","name":"Test 2"}]'; 
$str = "OnJSONPServerResponse(" .$str.")"; 
echo $str; 
?> 

Not much else to say, I believe everyone should understand how it is implemented by looking at the code.
Notes:
1. Since jquery uses utf-8 encoding to transfer parameters in ajax processing, it is best to use utf-8 encoding on the jsonp processing end, which saves coding. Converted, remember to convert if it is not utf-8, otherwise the Chinese will be garbled.
2. It is best not to write the requested server URL as http://www.xxxxxxxxxxxx.cn/?act=add. It should be written as: http://www.xxxxxxxxxxxx.cn/index.php ?act=add, there is incompatibility during the application process.
That’s it. If any friends encounter any problems, please post them and let’s discuss them together.
Everyone is welcome to reprint, please indicate the originality and the link must be added when reprinting, otherwise...n words are omitted here
Signature: communicate together, learn together, help those in need, and achieve success together road.