使用Jquery原理实现一个简单的Ajax的支持JS类
详细Ajax技术对于一个Web开发者来说应该是很熟悉的东西了，Ajax的出现让web页面交互有了革命化的变化。对于Ajax来说，JQuery是一个不可多得的好JS库，但是很多朋友并不了解Jquery对Ajax的实现过程，或者说不太了解，这点CG在此是不提倡的，CG写下面代码一方面是为了解决一位网友的疑问，同时也希望那些如果想在Jquery技术上有深入提高的朋友能够多看看Jquery源代码。
下面是简单实现的一个Ajax支持类，有不明白的话可以发起提问和留言。
/** * 名称：Ajax支持javascript类 * 功能：用于对页面实现Ajax支持，简单封装Ajax请求 * 创建时间：2010-01-14 * 作者：CG */ //以下为通用函数或对象 //是否是IE var isIE = (document.all) ? true : false; //$ id选择器 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; //Class 类对象 var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }; //事件函数绑定 var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } }; //全局Ajax对象 //用于AjaxSupport对象调用 var $ajax = function(obj){ //错误信息 if(undefined == obj.error){ obj.error = ajaxError; } //创建新的对象，此处可以使用单例来实现，减少资源消耗 new AjaxSupport(obj); }; //通用Ajax错误显示 function ajaxError(msg){ alert(msg); } var AjaxSupport = Class.create(); AjaxSupport.prototype ={ /**初始化方法 * 参数: obj 调用对象 */ initialize: function(obj){ this._xmlHttp = null; //URL对象 this._url = obj.url; //请求方法对象 this._method = obj.method; //请求方式 this._asyn= obj.asyn; //请求数据 this._data= obj.data; //请求成功 this._success = obj.success; //错误 this._error = obj.error; //初始化HttpRequest this._initHttpRequest(); //开始请求 this._ajaxRequest(); }, //请求状态变化 _readyStateChange: function() { //只判断是4的情况，其他情需要另行设置 if(4 == this._xmlHttp.readyState){ //请求成功 if(200 == this._xmlHttp.status){ if(undefined != this._success){ //将请求发送给调用者 this._success(this._xmlHttp.responseXML); } } // 错误，或返回结果非200 else{ if(undefined != this._error){ this._error("Error:Server Internal Error!"); } } } }, //开始Ajax请求 _ajaxRequest: function() { //打开请求 try{ //打开请求 this._xmlHttp.open(this._method , this._url ,this._asyn); }catch(e){ //打开请求错误 if(undefined != this._error){ this._error("Error:Openning Ajax Request Error!"); } } try{ //发送请求 this._xmlHttp.send(this._data); } catch(e){ //发送数据错误 if(undefined != this._error){ this._error("Error:Sending Ajax Request Error!"); } } }, //初始化HttpRequest对象 _initHttpRequest: function(){ //初始化HTTPReqest if(!isIE){//FF opera safari this._xmlHttp = new XMLHttpRequest(); }else{//IE try{//IE6+ this._xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{//IE5.5+ this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ //浏览器不支持 if(undefined != this._error){ this._error("Sorry! Your Browser dose not Support Ajax!"); } } } } //事件绑定 if(null != this._xmlHttp) { //绑定状态改变事件 this._xmlHttp.onreadystatechange = Bind(this, this._readyStateChange); }else{ //绑定事件调用错误信息 if(undefined != this._error){ this._error("Error: init Ajax Object Error!"); } } } } |
以下是简单的调用代码,相信用过Jquery的朋友觉得很类似吧？
function testAjax() { var req = "text=" + $("txtName").value; //对象调用Ajax测试 $ajax({ url:"AjaxTest", method:"post", asyn:true, data:req, success: function(obj){ //这里测试输出数据，不作XML解析 $("msg").innerHTML = obj; }, error: function(msg){ //错误信息显示 $("msg").innerHTML = msg; } }); } |
Recent Comments