淘先锋技术网

首页 1 2 3 4 5 6 7

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

最后,我们将生成的