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的运行。接下来,我们定义了成功和失败回调函数,用以处理服务器返回的数据。
最后,我们将生成的