# JQuery 相关知识 ## jsonp ### jquery 中的 jsonp `jsonp` 是JQuery 中解决 `跨域请求数据` 的一个解决办法。 ```javascript $.ajax({ url: "http://localhost:9090/student", type: "GET", //只支持GET方法 dataType: "jsonp", //指定服务器返回的数据类型 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback: "showData", //指定回调函数名称 success: function (data) { console.info("调用success"); }, error: function () { console.log('error'); } }); ``` > jsonp 只支持 GET 方法，因为 jsonp 的原理其实访问一个js文件然后调用回调函数的方式，所以并不能实现客户端向服务器传送文件。 ### JavaScript 实现 jsonp 方式的数据访问 - 客户端HTML文件 ```javascript <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> ``` - remote.js 文件 ```javascript localHandler({"result":"我是远程js带来的数据"}); ``` ### JavaScript 实现动态 jsonp ```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); ```