两年之后现在终于看得懂这本《Ajax企业级开发》。不敢苟同, 此书翻译十分糟糕。如果不是js精通的人,我想是很难理解到里面某些指代名词是指的什么。我也是十分牵强的才看了大部分。发现它所有的代码都是在围绕一个核心在写。js基础可以的话这种循序渐进的探讨,还是很容易理解的。
下面是我对原书代码略做修改而得。构造XHR时做的判断,基本没做任何带动。并省去了管理事件部分。包括简陋的回调。
if (typeof entAjax == "undefined"){ //检查命名空间是否被定义 entAjax = {}; //设置entAjax为一空的js对象 } entAjax.XHRFactory = { //创建XHRFactory单件对象 createXHR: function(){ //定义creatXHR()函数,创建XHR try { if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else{ xhr= new ActiveXObject("Microsoft.XMLHTTP"); } } catch(e){alert("您的浏览器不支持XHR");} return xhr; } }; entAjax.HttpRequest = function(){ //创建HttpRquest类 this.handler = ""; //请求地址 this.async = true; //是否异步 this.responseType = "xml"; //请求头类型(可以自己设置更多的) this.httpObj = entAjax.XHRFactory.createXHR(); this.completeCallback = null; //保存回调函数 this.params = {}; //保存要发送的数据、参数 } entAjax.HttpRequest.prototype.requestComplete = function(){ //requestComplete方法检查是否调用回调函数 if (this.httpObj.readyState == 4){ if (this.httpObj.status == 200){ this.completeCallback.call(this, this); } } } entAjax.HttpRequest.prototype.get = function(){ //get方法,执行GET请求 this.httpObj.open("get", this.handler, this.async); var _this = this; this.httpObj.onreadystatechange = function() {_this.requestComplete}; if (this.responseType == ’xml’) this.httpObj.setRequestHeader("Content-type","text/xml"); this.httpObj.send(null); } entAjax.HttpRequest.prototype.post = function(sData){ //post方法,执行POST请求 if (sData == null){ sData = ""; for (var name in this.params){ sData += escape(name) + "=" + escape(this.params[name]) + "&"; } sData = sData.substring(0, sData.length-1); } this.httpObj.open("POST", this.handler, this.async); var _this = this; this.httpObj.onreadystatechange = function() {_this.requestComplete()}; if (this.responseType == "xml") this.httpObj.setRequestHeader("Content-Type", "text/xml"); this.httpObj.send(sData); } entAjax.HttpRequest.prototype.setParam = function(name, value){ //setParam方法,设置参数、数据 if (value == null) delete this.params[name]; else this.params[name] = value; } entAjax.HttpRequest.prototype.abort = function(){ //请求超时方法 this.httpObj.onreadystatechange = function(){ this.httpObj.abort(); } } //var xhr = new entAjax.HttpRequest(); //执行get请求实例 //xhr.handler = "ajax/"; //xhr.completeCallback = showResult; //xhr.get(); //var xhr = new entAjax.HttpRequest(); //执行post请求实例 //xhr.setParam("firstname", "Junior"); //xhr.completeCallback = showResult; //xhr.handler = "ajax/"; //xhr.post(); function showResult(xhr){ //回调函数,把返回的值添加到id="abcd"的元素里。 document.getElementById("abcd").innerHTML = xhr.httpObj.responseText; }
发表回复