jQuery的ajax 简单解析与实现

以下的内容只是个人的理解,技术有限,如有问题请指正(看得jq版本是1.3.2)

jQuery的ajax, 就是我看的和理解,可以用在3个方面,一个是取一个script地址并执行一些操作 $jQuery.getScript; 一个是jsonp $jQuery.getJSON;还有一个就是一般的ajax应用了我主要记录的是jsonp 和 ajax 这方面的个人理解..

jsonp

我的理解是: 创建一个全局的回调函数(假如是handler) 在创建一个 上面的handler是 gg函数 请求的地址是 http://active.zol.com.cn/guofeng/profile2.php?callback=gg

---

截图为证

---

返回的是

---

页面上多了一段可以执行的script
jQuery里面 有个默认配置
ajaxSettings: { //url: location.href, global : true, type : "GET", contentType : "application/x-www-form-urlencoded", processData : true, async : true, /* timeout: 0, data: null, username: null, password: null, */ // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest in IE7, so we use the ActiveXObject when it is available // This function can be overriden by calling jQuery.ajaxSetup xhr:function(){ return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); }, accepts: { xml: "application/xml, text/xml", html: "text/html", script: "text/javascript, application/javascript", json: "application/json, text/javascript", text: "text/plain", _default: "*/*" } }
accepts 是设置请求头 accepts里面的配置项
type 是提交类型
async 是 是否异步 true 表示异步
processData 是否修改data的结构 如果是true 表示修改
ifModified 如果设置了这一项 就要设置http请求头里面的 If-Modified-Since
contentType 设置请求头contentType的类型
application/xml;
application/x-www-form-urlencoded
application/json
application/xml;
参数传递用

---

截图为证
application/x-www-form-urlencoded 参数传递用就是一般的字符串
截图为证

---

application/json 参数传递是json形式的(cnblogs就是这样的形式)
截图为证

---

jquery.ajax的前部分主要是对jsonp 和 创建script 的处理
jq的jsonp的用法是 callback=? 要以这种形式
所以前面部分就是判断url 是不是这中形式 不是这中形式就转成这种形式
同时创建一个全局的变量当函数 回掉的时候执行该函数
View Code //extend 的第一个参数为true 表示深度复制 //创建一个新的对象 jq.ajaxSettings全部copy过去 把s复制过去 s = jq.extend(true, s, jq.extend(true, {}, jq.ajaxSettings, s)); var jsonp, // jsonp 的回调函数名字要以这种方式才行 jsre = /=\?(&|$)/g, status, data, type = s.type.toUpperCase(); //如果data不是字符串 转成字符串 if ( s.data && typeof s.data !== "string" ) s.data = jq.param(s.data); if ( s.dataType == "jsonp" ) { if ( type == "GET" ) { if ( !s.url.match(jsre) ){ //get 方式 参数都在url的后面 //如果没有=?这种形式 就转成这种形式 这是jq的jsonp形式 后面要把?变成函数名 //转成这种形式 http://www.xxx.com?callback=? s.url += (s.url.match(/\?/) ? "&" : "?") + (s.jsonp || "callback") + "=?"; }//http://www.baidu.com?callback=? } else if ( !s.data || !s.data.match(jsre) ){ //post方式 有专为存放参数的地方 这里是把参数和回调都转一下 //形式 xx=xx&oo=oo.......&callback=? s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?"; } s.dataType = "json"; } // url 符合 定义的jsonp形式 或者 s.data符合jsonp形式 if ( s.dataType == "json" && (s.data && s.data.match(jsre) || s.url.match(jsre)) ) { // 这里的jsonp 就是后面的可执行函数的 函数名了 jsonp = "jsonp" + jsc++; // Replace the =? sequence both in the query string and the data // /=\?(&|$)/g //将 ? 转 成函数名字 if ( s.data ) s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1"); s.url = s.url.replace(jsre, "=" + jsonp + "$1"); s.dataType = "script"; // 定义全局的函数名了 后面请求完毕后就会执行这个函数 window[ jsonp ] = function(tmp){ data = tmp; success(); //complete(); // Garbage collect window[ jsonp ] = undefined; try{ delete window[ jsonp ]; } catch(e){} if ( head ) head.removeChild( script ); }; } if ( s.dataType == "script" && s.cache == null ) s.cache = false; /*if ( s.cache === false && type == "GET" ) { var ts = now(); // try replacing _= if it is there //alert(s.url) http://www.baidu.com?callback=jsonp1315980993828 var ret = s.url.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); // if nothing was replaced, add timestamp to the end s.url = ret + ((ret == s.url) ? (s.url.match(/\?/) ? "&" : "?") + "_=" + ts : ""); }*/ // If data is available, append data to url for get requests if ( s.data && type == "GET" ) { //加上其他的参数 s.url += (s.url.match(/\?/) ? "&" : "?") + s.data; // IE likes to send both get and post data, prevent this //ie的 get post 都会传送s.data 好像就是这个意思 所以节省开支 s.data = null; } // Watch for a new set of requests //if ( s.global && ! jQuery.active++ ) // jQuery.event.trigger( "ajaxStart" ); // Matches an absolute URL, and saves the domain //取url的 前面的信息 和 域名 var parts = /^(\w+:)?\/\/([^\/?#]+)/.exec( s.url ); if ( s.dataType == "script" && type == "GET" && parts && ( parts[1] && parts[1] != location.protocol || parts[2] != location.host )){ var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src = s.url; if (s.scriptCharset) script.charset = s.scriptCharset; //如果不是jsonp方式 就是创建一个script标签 if ( !jsonp ) { //保证回调函数只执行一次 var done = false; // Attach handlers for all browsers 兼容所有的浏览器的写法 script.onload = script.onreadystatechange = function(){ if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) { done = true; //success(); //complete(); // Handle memory leak in IE jq里面可以说反复的强调了 删除元素时 该dom元素引用的对象要断开引用 不然会内存泄露 script.onload = script.onreadystatechange = null; head.removeChild( script ); } }; } head.appendChild(script); // We handle everything using the script element injection return undefined; }

jQuery.ajax 的后面的部分就是处理ajax的了
jq有专门的设置请求头的部分
其中的 If-Modified-Since 比较重要了
可以看看这篇文章
还有这个
jq里面用 jquery.lastModified 来保存最后的修改时间的
形式是 jquery.lastModified[url] = 时间
按我的理解是
我发送一次请求后 服务器看在 If-Modified-Since 里面的时间后有没有做修改,没有做修改返回304 读缓存的文件 有做修改返回200
这么做的好处是可以节约网络资源咯
jq1.3.2里面是设置的定时器 去判断请求是否已经完成
onreadystatechange是定时器去执行的函数
如果设置了s.timeout
会在这个时间后去查看是否已经xhr的状态 是否已经完成了回调 如果没有 abort 终止掉请求
jq还有一些方法配合 ajajx
jquery.httpSuccess
jquery.httpNotModified
jquery.httpData
jquery.httpSuccess
判断请求是否已经成功了
jquery.httpNotModified
判断 服务器那边是否已经做过了修改
jquery.httpData
因为返回的数据是根据请求头的content-type来的,所以要对不同的数据做处理
因为返回的数据是根据请求头的content-type来的,所以要对不同的数据做处理 在这里 又对 xml script json 的处理 其中script 用到了jquery.globalEval
一个完整的例子
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> </body> <input value="jsonp" type="button" _disibledevent=><br/> <input value="一般的请求" type="button" _disibledevent=><br/> 本想弄个If-Modified-Sinc的例子 但是发现cnblogs的xhr的请求的响应头 全部都没有Last-Modifie </html>

Tags: 

延伸阅读