Ajax Small Demo---JSONP cross-domain principle and simple application

I. JSONP

JSONP (JSON with Padding) is a "usage pattern" of JSON that allows Web pages to fetch data from other domain names (sites), that is, across domains.

Because of the same-origin policy, which is a well-known security policy presented by Netscape, this strategy is now used by all JavaScript-enabled browsers. We cannot Access data from different domains (websites), and Jsonp is used to implement this kind of data that cannot be requested across domains.

Two. Jsonp principle:

under the same-origin policy, a page under a server cannot get data outside of that server, except that tags such as IMG, IFRAME, script, and so on, can be used to request data on other servers through the SRC attribute. However , JSONP is a request for cross-domain invocation through the script node src attribute. By dynamically creating a script tag, When we request cross-domain resources through the JSONP mode, the server returns a piece of JavaScript code to the client, which automatically invokes the client callback function.

Three. Example

When using AJAX local call url= ' http://127.0.0.1/ajax/json/test.php? Data= ' +jsonobj+ "&r=" +math.random (); The following error occurs: Cannot cross-domain request

650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/7F/A3/wKioL1cnKOPhEyL2AACekYRLi0M855.jpg "title=" 1.jpg " alt= "Wkiol1cnkopheyl2aacekyrli0m855.jpg"/> However,

Use JSONP to solve this problem: The code is as follows:

<script> var result=false;function check () {if (Resultform ()) {return true;} Else{return false;}}      function checkform () {             var usernameobj=document.getelementbyid (' username ') .value;             var usernumobj=document.getelementbyid (' Usernum '). Value;             var data={username:usernameobj, Usernum:usernumobj};    var jsonobj=json.stringify (data);                 url= ' http://127.0.0.1/ajax/json/ Test.php?data= ' +jsonobj+ "&r=" +math.random () + "&AMP;CALLBACKNAME=JP";                      /dynamic Add script tag     var&nbSp;scripttag=document.createelement ("script");             scripttag.setattribute ("src", url);             document.body.appendchild (Scripttag);            }    //Client callback function        var jp=function (data) {               var tips= document.getElementById (' tips ');               if (data[' username ']== "one") { tips.innerhtml= "
：
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/7F/A3/wKioL1cnK1ywa1muAACt0YidnvM032.jpg "title=" 2.jpg " alt= "Wkiol1cnk1ywa1muaact0yidnvm032.jpg"/>
This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1769516
Ajax Small Demo---JSONP cross-domain principle and simple application