jQuery是一個非常流行的JavaScript框架,它簡化了JavaScript開發過程。其中,jQuery的AJAX模塊為網頁開發帶來了便利,可以通過Ajax發送異步請求獲得數據,不必重新加載整個網頁。而JSONP則是一種跨域通信的技術,允許從一個域名頁面上向另一個域名的頁面請求數據。下面我們來看jQuery AJAX JSONP的源碼。
//實現JSONP jQuery.ajaxSetup({ jsonp: "callback", // 回調函數名的key值 jsonpCallback: function () { // 回調函數名的處理函數 return jQuery.expando + "_" + (jQuery.expandoIndex++).toString(36); } }); //發送JSONP請求 jQuery.ajax = function (options) { var callbackName = options.jsonpCallback || jQuery.ajaxSettings.jsonpCallback(); var script = document.createElement("script"); var url = options.url; if (typeof url === "string" && /\?/.test(url)) { url += "&" + options.jsonp + "=" + callbackName; } else { url += "?" + options.jsonp + "=" + callbackName; } script.src = url; script.async = true; var errorHandler = options.error; var successHandler = options.success; window[callbackName] = function (data) { options.success && options.success(data); delete window[callbackName]; document.head.removeChild(script); }; script.onerror = function () { options.error && options.error(); delete window[callbackName]; document.head.removeChild(script); }; document.head.appendChild(script); };
上述代碼實現了jQuery中AJAX JSONP的主要功能。在ajaxSetup函數中,我們設置了jsonp回調函數的默認值為callback,同時jsonpCallback函數由我們自己定義,用于生成隨機的回調函數名,保證每一次請求都有唯一的回調函數名。
在ajax函數中,我們首先獲取jsonp回調函數名,然后動態創建一個script標簽,設置其src為請求的URL,同時將async屬性設置為true,可以讓我們不必阻塞JavaScript的運行。接下來,我們定義了成功和失敗回調函數,用以處理服務器返回的數據。
最后,我們將生成的