什么是jsonp？——使用jsonp解决跨域请求问题
我们在使用ajax请求的时候经常会产生跨域问题，这是由于浏览器的同源策略导致的。所谓同源，即域名、协议、端口均相同，否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求。有时候，我们可以通过jsonp来解决。
jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 这一特性（其实是js语言设计的一大漏洞哈哈），通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据，从而达到接收数据跨域访问的目的。
下面使用jsonp，本地代码中script中的src标签指向另一域名下的remote.js文件，
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var localHandler = function(data){ alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result); }; </script> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
然后本地函数可以输出远程js带来的数据，以达到跨域访问的目的，远程js代码：
localHandler({"result":"我是远程js带来的数据"});
但是怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，我们可以传一个参数过去给服务端，
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签，设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html>
服务端动态生成这样一段js代码：
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
jquery也把jsonp作为ajax的一种形式进行了封装，这里调用也更加方便，本地不用再写调用函数 flightHandler 了，jquery会自动生成回调函数再把数据取出来供success函数调用，
<!DOCTYPE html> <html> <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> </body> </html>
嗯，就是这样了。
