jQuery的实现原理的模拟代码 -5 Ajax

复制代码代码如下: // 创建 XHR 对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser"); } function ready() { alert("Start......"); // 通过事件来处理异步请求 xhr.onreadystatechange = function() { if( xhr.readyState == 4 ) { alert( "Ready."); if( xhr.status == 200 ) { alert("成功获得服务器返回的结果."); // 请求结束之后，可以获取服务器返回的内容 alert( xhr.responseText ); // 获取服务器返回的 json 对象 var alice = eval( "(" + xhr.responseText + ")" ); alert( alice.name ); } } }; // 设置请求参数 xhr.open("get", "data.json" ); xhr.send( null ); } jQuery 简单地包装了对 xhr 对象的使用，通过对 jQuery 对象增加常用的访问方法，然后，提供给 jQuery 对象来使用。复制代码代码如下: // 主要的扩展在 jQuery.ajax 中。 jQuery.extend({ // #6299 // 请求的默认参数 ajaxSettings: { url: location.href, type: "GET", contentType: "application/x-www-form-urlencoded", data: null, xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ? function () { return new window.XMLHttpRequest(); } : function () { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } }, // 用来设置 jQuery.ajaxSettings ，设置请求的参数 ajaxSetup: function (settings) { jQuery.extend(jQuery.ajaxSettings, settings); }, ajax: function (origSettings) { // 实际的 ajax 函数 var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings); // 创建 xhr 对象 xhr = s.xhr(); // 回调函数 var onreadystatechange = xhr.onreadystatechange = function (isTimeout) { if (xhr.readyState === 4) { if (xhr.status == 200) { s.success.call(origSettings, xhr.responseText); } } }; // 设置请求参数 xhr.open(s.type, s.url); // Send the data 发出请求 xhr.send(s.data); // return XMLHttpRequest to allow aborting the request etc. return xhr; }, // 使用 get 方式发出 ajax 请求的方法 get: function (url, data, callback, type) { // shift arguments if data argument was omited if (jQuery.isFunction(data)) { type = type || callback; callback = data; data = null; } return jQuery.ajax({ type: "GET", url: url, data: data, success: callback, dataType: type }); } }); // #6922 // 扩展 jQuery 对象，增加 load 方法 jQuery.fn.extend( { load: function (url) { var self = this; jQuery.get(url, function (data) { self.each(function () { this.innerHTML = data; } ) } ) } } ) 在页面中，可以如下使用。复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <input type="button" id="btn" value="Click me" /> <div id="msg"> </div> <script src="jQuery-core.js" type="text/javascript"></script> <script src="jQuery-event-2.js" type="text/javascript"></script> <script src="jQuery-data.js" type="text/javascript"></script> <script src="jQuery-extend.js" type="text/javascript"></script> <script src="jQuery-ajax.js" type="text/javascript"></script> <script type="text/javascript"> $("#btn").click(function () { $("#msg").load("hello.txt"); }) </script> </body> </html>

　　推荐阅读

　　JavaScript 通过模式匹配实现重载

正好infinte同学提出“更优雅的兼容”其实也和这个问题有一定的关联（我们后面会看到）在youa的脚本库中Function的Helper中，添加支持重载的模式匹配复制代码代码如下: /** * 函数参数重载方法 overload，对函数>>>详细阅读

本文标题：jQuery的实现原理的模拟代码 -5 Ajax

地址：http://www.17bianji.com/kaifa2/JS/25893.html

1/2 1