普通的ajax请求只能进行同域的数据交互，但是一旦有跨域的情况就不行了。但是jsonp不同，他可以利用浏览器标签达到跨域的目的。
其实 jsonp 是个很简单的一个东西。主要是利用了 <script/> 标签对 javascript 文档的动态解析。
Script 标签本身的功能就是异步加载js并且会以js的方式解析执行。一旦在script的标签里加入src的属性，浏览器执行到这个标签时就回去请求指定的地址，如果服务器返回的是js格式的代码，甚至可以是js的函数，只要是能被js解析的，都可以被执行，这也就是jsonp的原理。
简单使用jsonp的demo：
1、 最简单的形式
demo:http://xiziyin.appspot.com/demo/jsonp.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk"/>
<title></title>
</head>
<body>
<div id="content">
</div>
</body>
<script type="text/javascript">
var load = function(message){
document.getElementById("content").innerHTML=message;
}
</script>
<script type="text/javascript" src="jsonpContent.html?callback=load"></script>
</html>
这是最基本的jsonp的原理
2、使用框架
demo:http://xiziyin.appspot.com/demo/getscript.html
以http://xiziyin.appspot.com/demo/jsonpContent.jsp
这个链接为例，在url后面带上参数callback=AjaxListLoader.reload
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk"/>
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
</head>
<body>
<div id="console"></div>
<script>
var url = "http://xiziyin.appspot.com/demo/jsonpContent.jsp";
var AjaxLoader = function() {
var loader = function() {
YAHOO.util.Get.script(url + '?callback=AjaxLoader.reload', {
onSuccess: function() {
},
onFailure: function() {
YAHOO.util.Dom.get("console").innerHTML = '请求失败';
},
timeout: 10000,
autopurge: true,
charset: 'GBK'
});
};
return{
init: function () {
loader();
YAHOO.util.Dom.get("console").innerHTML = '开始请求';
},
reload:function() {
YAHOO.util.Dom.get("console").innerHTML = '请求成功，调用成功';
}
};
}();
AjaxLoader.init();
</script>
</body>
</html>
通过yui的get.script()去触发url，代替了原本的script标签。将返回的数据填充到页面来展示。
结果：
请求成功，调用成功