關於JSONP以及跨域問題,請自行搜索。javascript
本文重點給出AJAX JSONP的模擬實現代碼,代碼中JSONP的基本原理也一目瞭然。html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模擬實現AJAX JSONP源碼</title> <script type="text/javascript"> // 生成隨機字符串 function randomString(len) { len = len || 32; var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnoprstuvwxyz1234567890"; var maxPos = chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } function ajax_jsonp(data) { // 生成隨機函數名並指向傳入的回調函數 var callbackfun = "jquery_" + randomString(32); eval( callbackfun+ " = data.success; "); // 提供jsonp服務的url地址(不論是什麼類型的地址,最終生成的返回值都是一段javascript代碼) var url = data.url + "&callback="+callbackfun; // 建立script標籤,設置其屬性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script標籤加入head,此時調用開始 document.getElementsByTagName('head')[0].appendChild(script); } // 模擬調用 ajax_jsonp({ url: "http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36", success: function(data){ alert('ID ' + data.ad[0].id ); } }); </script> </head> <body> </body> </html>
基本工做思路:java
1. 建立一個隨機字符串做爲回調函數名jquery
2. 把傳入的回調函數賦值給隨機函數。ajax
3. 把該隨機函數名做爲callback參數補充到傳入的URL(真正要訪問的跨域的URL)中json
4. 動態建立出script元素並觸發URL的訪問。瀏覽器獲取返回的JS代碼並執行,也就是執行了傳入的回調函數。跨域
(第三方URL返回的必須是一個合法的JS函數調用字符串,其中函數名是參數callback,參數是真正要返回的數據。)瀏覽器
參考文章(文中代碼基於該參考文章修改)app