Using JSONP to solve the problem of cross-domain request of Ajax

Ajax may not be a strange thing for us, but if you are a Cross-domain request, then Ajax has nothing to do, in fact this can be made up, is the use of JSONP. In fact, is not what technology, but the use of JS tags in the cross-domain characteristics of Cross-domain data access, the server returned the JS code in the client browser to perform again to get the effect we want, using JSONP can do to prevent AJAX implementation Cross-domain request, But we don't need to create XMLHttpRequest, and of course we don't get readystate, because it's not Ajax.
Here is an example to illustrate:
Assuming that you need to request www.111cn.net/ajax.php under the domain name www.a.com, the key is client-side code, such as writing code in ajax.php, as opposed to the AJAX server code:
<?php
$arr =array (
' X ' => array (' ID ' =>10, ' user ' => ' Zhangsan '),
' 3 ' =>array (' id ' =>11, ' user ' => ' Lisi '),
' 8 ' =>array (' id ' =>14, ' user ' => ' Wangwu ')
);
$jsondata = Json_encode ($arr);
Echo $_get[' callback ']. "($jsondata);";
?>
Then the client code under Www.a.com can be:


<script>
function ck (data) {
var str = ';
For (i in data) {
STR + + data[i].id + ' ___ ' + data[i].user + ' <br/> ';
}
document.getElementById (' content '). Innerhtml=str;
}
function Test () {
var s = document.createelement (' script ');
S.SRC = "Http://www.111cn.net/ajax.php?callback=ck";
Head=document.getelementsbytagname (' head '). Item (0);
Head.appendchild (s);
}
</script>

<body>
<div id= "Content" style= "border:1px solid red;width:300px;height:200px;" ></div>
<input type= "button" value= "Test" onclick= "Test ()"/>
</body>

where the test () function is to create a script tag, dynamically request www.111cn.net/ajax.php and pass in the callback function name CK, the server returns the JS code, just as we see the output executing the function's code, and the JSON data is passed as a parameter to the callback function, The same as the callback function used in Ajax, to achieve the desired effect.
If you use jquery, the code is concise and more like Ajax usage, code example:

<script src= "Jquery.js" ></script>
<script>
function Test () {
$.ajax ({
URL: ' http://www.111cn.net/ajax.php ',
Type: ' Get ',
Data:{name: ' xxx '},
DataType: ' Jsonp ',
JSONP: ' Callback ',
Success:function (data) {
var str = ';
For (i in data) {
STR + + data[i].id + ' ___ ' + data[i].user + ' <br/> ';
}
$ (' #content '). html (str);
}
});
}
</script>
<div id= "Content" style= "border:1px solid red;width:300px;height:200px;" ></div>
<input type= "button" value= "Test" onclick= "Test ()"/>

Another way to do this in jquery is to use it a little simpler, just change the code within the function to:

$.getjson ("http://www.111cn.net/ajax.php?callback=?"),
function (data) {
var str = ';
For (i in data) {
STR + + data[i].id + ' ___ ' + data[i].user + ' <br/> ';
}
$ (' #content '). html (str);
});

        The last thing to say is that JSONP and Ajax are different, using a cross domain request for the script label, which should be the reason the test post submission was unsuccessful. If you have that friend test post method success and the code is not cumbersome, please leave me a message