使用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 *///以下为通用函数或对象//是否是IEvar 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; } });} -------------------------------------------------------------------------------------- - 版权声明： - 如在本页面内无特别说明，本文内容均为[李大仁博客]原创，本文版权归[李大仁博客]所有。 - 欢迎转载，转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。 - 文章标题： 使用Jquery原理实现一个简单的Ajax的支持JS包装类 - 独立博客： 李大仁博客 - 永久链接：http://www.lidaren.com/archives/695 -------------------------------------------------------------------------------------- 以上内容由博客自动发布工具自动发布，最终显示内容和效果会与原文内容有所偏差，敬请谅解。