jquery.ajax源码
框架的作用就是简化我们做的事情,却又不失灵活性。jquery是js框架中的中流砥柱,灵活并且强大。
jquery中对ajax的封装很完美,且不说底层的ajax函数的强大,但是其上层的get ,post ,getscript ,getJson 基本对各种应用游刃有余。为什么要看源码,一是闲着蛋疼,二是为了在出问题时,能找出问题所在。三是……。
jquery中有一个对象ajaxSeetings ,ajax请求最基本的配置就在这里,结构如下
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, traditional: false, */ // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest in IE7 (can't request local files), // so we use the ActiveXObject when it is available // This function can be overriden by calling jQuery.ajaxSetup xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ? function() { return new window.XMLHttpRequest(); } : function() { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} }, accepts: { xml: "application/xml, text/xml", html: "text/html", script: "text/javascript, application/javascript", json: "application/json, text/javascript", text: "text/plain", _default: "*/*" } }
基本上名字就能代表它的配置项目,processData可能比较陌生。我们在使用get以及其他上层函数请求资源时,传递一个key/value的对象。例如$.get(“xxxx”,{name:’pr’,password:’pr’} , ……); 如果process设置为true,{name:’pr’,password:’pr’}就会转换为name=pr&password=pr;这样在后面如果ajax方式为get则会将装换的字符串附加到url后面,如果设置为false则不进行此转换,默认是true,也最好不要改。值得一看内容当然是属性xhr,这个属性是个函数,当然函数最后都会返回浏览器兼容的XmlHttpRequest对象。整个ajax的核心操作对象就是它,这就免去了我们自己构造XmlHttpRequest对象时考虑兼容问题的纠结。
ajax: function( origSettings ),ajax接受一个配置对象,就跟上面的ajaxSettings那样的结构,
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings); var jsonp, status, data, callbackContext = origSettings && origSettings.context || s, type = s.type.toUpperCase(); // convert data if not already a string if ( s.data && s.processData && typeof s.data !== "string" ) { s.data = jQuery.param( s.data, s.traditional ); }
首先函数将默认配置和传进来的配置进行合并,在函数中注意有个{},这样合并就不会影响ajaxSettings 和originSettings的本来的值。CallbackContext是执行ajax回调函数是函数的上下文。其他不多说。然后根据data,ProcessData 和data是否是string来决定是不是要将data对象转换为参数形式字符串。jquery.param是个工具函数,traditional用来决定是不是要进行深层次遍历以生成参数字符串。具体事例见jquery文档。
// Handle JSONP Parameter Callbacks if ( s.dataType === "jsonp" ) { if ( type === "GET" ) { if ( !jsre.test( s.url ) ) { s.url += (rquery.test( s.url ) ? "&" : "?") + (s.jsonp || "callback") + "=?"; } } else if ( !s.data || !jsre.test(s.data) ) { s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?"; } s.dataType = "json"; } // Build temporary JSONP function if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) { jsonp = s.jsonpCallback || ("jsonp" + jsc++); // Replace the =? sequence both in the query string and the data if ( s.data ) { s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1"); } s.url = s.url.replace(jsre, "=" + jsonp + "$1"); // We need to make sure // that a JSONP style response is executed properly s.dataType = "script"; // Handle JSONP-style loading window[ jsonp ] = window[ jsonp ] || function( tmp ) { data = tmp; success(); complete(); // Ga
相关新闻>>
- 发表评论
-
- 最新评论 更多>>