# 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); ```