使用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;

}

});

}

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