AJAX cross-domain request-JSONP get JSON data

1. What is JSONP?

JSONP (JSON with Padding) is an unofficial protocol that allows the server-side integration of script tags back to the client to achieve cross-domain access in the form of JavaScript callback (this is simply a JSONP implementation form).

2. What is the use of JSONP?

Due to the limitations of the same-origin policy, XMLHttpRequest only allows resources to request the current source (domain name, protocol, port), in order to implement cross-domain requests, cross-domain requests can be implemented through the script tag, and then output JSON data on the server and execute callback functions to resolve cross-domain data requests.

3, how to use JSONP?

The demo below is actually a simple representation of JSONP, after the client declares the callback function, the client requests data across the domain through the script tag, then the server returns the corresponding data and executes the callback function dynamically.

HTML code (either):

HTML code

2. <Meta content="text/html; Charset=utf-8 " http-equiv="content-type " />
4. <script type="Text/javascript">
6. function Jsonpcallback (Result) {
8. alert (result);
10. for (var i in result) {
12. Alert (i+ ":" +result[i]);//loop output a:1,b:2,etc.
14. }
16. }
18. var jsonp=document.createelement ("script");
20. jsonp.type="Text/javascript";
22. jsonp.src="Http://crossdomain.com/services.php?callback=jsonpCallback";
24. document.getElementsByTagName ("Head") [0].appendchild (JSONP);
26. </Script>

HTML code

2. <Meta content="text/html; Charset=utf-8 " http-equiv="content-type " />
4. <script type="Text/javascript">
6. function Jsonpcallback (Result) {
8. alert (RESULT.A);
10. alert (result.b);
12. alert (RESULT.C);
14. for (var i in result) {
16. Alert (i+ ":" +result[i]);//loop output a:1,b:2,etc.
18. }
20. }
22. </Script>
24. <script type="Text/javascript" src= "http://crossdomain.com/services.php?callback= Jsonpcallback "></script>

JavaScript links must be under function.

Server PHP Code (services.php):

PHP code

2. <?php
6. The service side returns JSON data
8. $arr =Array (' A ' =>1,' B ' =>2,' C ' =>3,' d ' =>4,' e ' =>5);
10. $result =json_encode ($arr);
12. Echo $_get[' callback ']. ' ("hello,world!") ';
14. Echo $_get[' callback ']. " ($result) ";
16. Dynamic Execution callback function
18. $callback =$_get[' callback ');
20. echo $callback."  ($result) ";

If the above JS client code is implemented in the JQuery method,

$.getjson
$.ajax
$.get

How to implement the client JS code in jquery 1:

JS Code

2. <script type="Text/javascript" src="jquery.js" ></script>
4. <script type="Text/javascript" >
6. $.getjson ("http://crossdomain.com/services.php?callback=?",
8. function (Result) {
10. For (var i in result) {
12. Alert (i+":" +result[i]);   Loop output a:1,b:2,etc.
14. }
16. });
18. </script>

20. Jsonp principle:
    First register a callback with the client and then pass the callback name to the server.
    
    At this point, the server becomes JSON data.
    Then, in JavaScript syntax, a function is generated, and the function name is the parameter Jsonp passed up.
    
    Finally, the JSON data is placed directly into the function in the form of a parameter, so that a document of JS syntax is generated and returned to the client.
    
    The client browser parses the script tag and executes the returned JavaScript document, where the data is passed in as a parameter to the client's pre-defined callback function. (Dynamic execution callback function)

AJAX cross-domain request-JSONP get JSON data