AJAX操作JS代码

AJAX操作JS代码

/** * 一个用于ajax的请求类 * @version 1.0 */ function RequestAjax(serverurl){ var loader = this; var xmlHttpRequest = null; //XMLHttpRequest对象 var eventMap = new Array(); //绑定回调函数 this.serverUrl = serverurl; //服务的连接 this.isAsyn = true; //是否使用异步的方式(默认是异步) this.responseText = null; //返回的参数 /** *创建XMLHttpRequest实例 */ this.createXMLHttpRequest = function(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHttp"); }else{ return null; } }; xmlHttpRequest = loader.createXMLHttpRequest(); //当createXMLHttpRequest函数编译后才能调用，所以该句放在下面 /** *返回要查询的URL字符串 * queryArray是一个一个列表，列表内存放的是一个二维数组的键/值对。 * 即：queryArray[k][0]=queryArray[k][1] */ this.createQueryString = function(queryArray){ var queryString = null; for(var i=-1;queryArray!=null&&i<queryArray.length;i++){ if(i == -1){ queryString = "timeStamp=" + new Date().getTime(); //避免由于queryString的相同导致取缓存 }else if(queryArray[i] != null){ queryString = queryString + "&" + encodeURIComponent(queryArray[i][0]) + "=" + encodeURIComponent(queryArray[i][1]); } } return queryString.replace(/%20/g, "+"); }; /** *用get查询 */ this.doRequestUsingGet = function(queryArray){ if(this.xmlHttpRequest == null){ return; } var queryString = loader.createQueryString(queryArray); xmlHttpRequest.onreadystatechange = function(){ handleStateChange.call(loader); }; xmlHttpRequest.open("GET",loader.serverUrl+"?"+queryString,loader.isAsyn); xmlHttpRequest.send(null); }; /** *用post查询 */ this.doRequestUsingPost = function(queryArray){ if(xmlHttpRequest == null){ return; } var queryString = loader.createQueryString(queryArray); xmlHttpRequest.open("POST",loader.serverUrl,loader.isAsyn); xmlHttpRequest.setRequestHeader("Content-Length",queryString.length); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.onreadystatechange = function(){ handleStateChange.call(loader); }; xmlHttpRequest.send(queryString); }; /** * 绑定回调函数 */ this.attachEvent = function(eventName,customFunc){ eventMap[eventName] = customFunc; }; /** *检查XMLHttpRequest的readyState属性的状态值， *根据flag的值来选择相应的函数操作 * 1 创建树时生成根节点 */ var handleStateChange = function(){ if(xmlHttpRequest!=null){ if(xmlHttpRequest.readyState == 4){ //有5个可取值：0 未初始化 1 正在加载 2 已加载 3 交互中 4 完成 if(xmlHttpRequest.status == 200){ //http状态，如404表示页面不存在,200表示请求成功 loader.responseText = xmlHttpRequest.responseText; var customFunc = eventMap["onRequestComplete"]; if(customFunc != null){ customFunc(loader.responseText); //将服务器返回的响应字符串传给自定义的回调函数 } } } } }; };  

其实这个代码不是本人原创，只是在前人的基础上做了一些比较细微的修改。加之最近在做一个关于AJAX应用的学习交流，所以在这里附上这个封装的源代码。

 

对于这个JS的ajax封装，本人认为值得学习是arrachEvent的应用，以及对XMLHttpRequest的声明。

 

window.XMLHttpRequest 主要用于验证浏览器是否IE7/8/9及其他非IE浏览器，而window.ActiveXObject则主要用于验证IE6/5及以下版本。如果把window.ActiveXObjec写在第一个if判断，那么碰到IE7/8/9的时候，则会应用后一种方式创建XMLHttpRequest对象。我们可以理解，IE7/8/9是包含window.ActiveXObjec/XMLHttpRequest属性的浏览器，用哪种方式都能创建到对应的对象。

 

attachEvent("eventType",function) 是window下的一个……其实我不知道它是属性还是方法，主要是它的调用方式是当eventType事件发生的时候，调用function方法。比如说：

document.getElementById("submitButton").attachEvent("onclick",function) 标示在id为submitButton的对象（这个对象不一定要是按钮）发生鼠标点击事件的时候，执行function函数。

 

其他一些成熟的地方：

xmlHttpRequest.send(queryString);用于传递AJAX请求的参数。很多时候我们都喜欢直接在URL后面加一个？然后把参数用一个字符串增加在URL的后面。这种方式省时省事，并且send(null)就可以了。可是我们知道，请求URL有一个长度的限制问题，假如URL请求超过了一定的限制，那么后面的字符串会默认被清除掉的。把参数通过send的方式传递，这是一个良好的AJAX应用习惯。