基本的封装---Ajax之一

Ajax，或许已经是老掉牙的话题。我学习总结一下。大概会有6篇，从基本的ajax直至高级的ajax应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码，大概三个步骤。

 

1，创建Ajax的核心对象XMLHttpRequest

因为浏览器之间的不兼容，IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式，有的复杂很多行代码，有的则简洁很少代码。当然复杂的考虑的情形更多一些。
如下几乎将IE中所有的情况都考虑到了

 

function cretaeXHR(){
	try{ return new XMLHttpRequest();}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}
	return null;
}

 

代码较少的采用对象特性判断，

 

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

这里采用精简方式，暂不考虑创建异常的情况。

 

2，发送请求

xhr.open
xhr.send

 

3，处理响应

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
			//callback
		}
	}
}

 

嗯，写到这里没什么特别的，所有的书籍上都是这么几个步骤来着。对于初学者来说，要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码，偶刚学的时候就是这样的。现在想想是对一门语言没有足够的掌握，尤其是闭包。

这里采用 单例模式 封装成一个对象，即只有一个全局的变量将其赋值给Ajax，该对象有一个request方法。
request有两个参数，第一个为请求的url(必要的)，字符串类型，第二个opt为配置参数(可选的)，对象类型。
结果处理使用内部私有的_onStateChange函数。

完整代码如下

 

/**
 * 执行基本ajax请求,返回XMLHttpRequest
 * Ajax.request(url,{
 * 		async 	是否异步 true(默认)
 * 		method 	请求方式 POST or GET(默认)
 * 		data 	请求参数 (键值对字符串)
 * 		success 请求成功后响应函数，参数为xhr
 * 		failure 请求失败后响应函数，参数为xhr
 * });
 *
 */
var Ajax = 
function(){
	function request(url,opt){
		function fn(){}
		var async   = opt.async !== false,
			method  = opt.method 	|| 'GET',
			data    = opt.data 		|| null,
			success = opt.success 	|| fn,
			failure = opt.failure 	|| fn;
			method  = method.toUpperCase();
		if(method == 'GET' && data){
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;
			data = null;
        }
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
		xhr.onreadystatechange = function(){
			_onStateChange(xhr,success,failure);
		};
		xhr.open(method,url,async);
		if(method == 'POST'){
			xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
		}
		xhr.send(data);
		return xhr;	
	}
	function _onStateChange(xhr,success,failure){
		if(xhr.readyState == 4){
			var s = xhr.status;
			if(s>= 200 && s < 300){
				success(xhr);
			}else{
				failure(xhr);
			}
		}else{}
	}
	return {request:request};	
}();

 

如下请求后台的一个servlet，发送参数name=jack,age=20，默认使用异步，GET方式。

 

Ajax.request('servlet/ServletJSON',{
		data : 'name=jack&age=20',
		success : function(xhr){
			//to do with xhr
		},
		failure : function(xhr){
			//to do with xhr
		}
	}
);

 

以上是一个简单封装，用了不到40行的代码。这里的请求参数data只能是键值字符串，有时候希望可以js对象，以便可以更灵活的传参，下一篇将从改善参数开始。

 

评论

24 楼 vb2005xu 2011-05-30  

不理解好在哪里

23 楼 顾小五 2011-05-27  

clue 写道

LZ发的帖都很实在...

不过上面的代码有个问题，我以前也常犯，调试过几次就印象深刻了：

// ...
		function fn(){}
		var async   = opt.async 	|| true, // 这句话有问题
			method  = opt.method 	|| 'GET',
//...

你的代码在这里会使async永远为true

可以有以下几种改法，都是比较常用的：

// 1. 默认为true，只有传入false才真正为false
async = opt.async !== false;
// 2. 判断是否有传值，然后转为boolean型
async = typeof opt.async !== "undefined" ? !!opt.async : true;
// 3. 使用hasOwnProperty判断
async = opt.hasOwnProperty("async") ? !!opt.async : true;

第1种很精简，Ext源码中有不少。
第2种很直观（Ext中常用Ext.isDefined判断）
第3种最深入，还能无视原型的干扰，只处理直属属性。

一般第1种就够用了。

讲的不错，LZ那样确实容易出现问题

22 楼 bulktree 2011-01-19  

ll584310793 写道

如果进行像你这样进行封装的话，还需要用jquery吗？你个人觉得那个会更快呢？

很好很强大 jQuery稍微显得笨重了，其实用的只是简单的功能

21 楼 clue 2010-09-16  

fangbz 写道

小弟不才 请问 async = opt.async !== false; 这句话应该怎么看?
  实在是看不懂 !== 是啥意思
求教 !
谢谢

==和!=是比较运算符，但当类型不同时会进行类型转换
例如false==0这个条件为真

而===和!==不会进行类型转换，类型不同就判断它们不同
所以false===0为假

一般为了安全起见，都是使用===进行比较的（使用JSLint检查时，也会提醒你不要使用==）
（才看到回帖，Orz...）

20 楼 askjsp 2010-09-15  

重新做轮子。。

19 楼 qinglintan 2010-09-14  

jquery上封装一下。跟公司封装的差不多.

18 楼 haidilee 2010-09-06  

好东西,顶一个

17 楼 jihui1988 2010-09-02  

来看看那 刚开始看ajax

16 楼 fangbz 2010-08-23  

clue 写道

LZ发的帖都很实在...

不过上面的代码有个问题，我以前也常犯，调试过几次就印象深刻了：

// ...
		function fn(){}
		var async   = opt.async 	|| true, // 这句话有问题
			method  = opt.method 	|| 'GET',
//...

你的代码在这里会使async永远为true

可以有以下几种改法，都是比较常用的：

// 1. 默认为true，只有传入false才真正为false
async = opt.async !== false;
// 2. 判断是否有传值，然后转为boolean型
async = typeof opt.async !== "undefined" ? !!opt.async : true;
// 3. 使用hasOwnProperty判断
async = opt.hasOwnProperty("async") ? !!opt.async : true;

第1种很精简，Ext源码中有不少。
第2种很直观（Ext中常用Ext.isDefined判断）
第3种最深入，还能无视原型的干扰，只处理直属属性。

一般第1种就够用了。

小弟不才 请问 async = opt.async !== false; 这句话应该怎么看?
  实在是看不懂 !== 是啥意思
求教 !
谢谢

15 楼 xiangdefei 2010-08-21  

像jquery封装的ajax。不错，学习

14 楼 markone 2010-08-19  

不错，新人就需要这种文章
期待websocket早日取代ajax

13 楼 ll584310793 2010-08-19  

如果进行像你这样进行封装的话，还需要用jquery吗？你个人觉得那个会更快呢？

12 楼 曾经de迷茫 2010-08-19  

hyj1254 写道

var Ajax ={request:function(){}};

见过的多数代码都是这样写的。在这里用闭包感觉没什么意义。

同感，不太喜欢闭包

11 楼 hardPass 2010-08-19  

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){  
		if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
			//callback
		}
	}
}

我以前老纠结在这里.

如果访问完成，并且成功返回结果，xhr.readyState 会变成4.

但如果服务器没有响应，xhr.readyState 依然会变成4.

10 楼 zhouyrt 2010-08-18  

感谢clue提醒，总结的三种方式学习了。

9 楼 whiletrue 2010-08-18  

相当基本,看不出有啥特别的地方

8 楼 clue 2010-08-18  

LZ发的帖都很实在...

不过上面的代码有个问题，我以前也常犯，调试过几次就印象深刻了：

// ...
		function fn(){}
		var async   = opt.async 	|| true, // 这句话有问题
			method  = opt.method 	|| 'GET',
//...

你的代码在这里会使async永远为true

可以有以下几种改法，都是比较常用的：

// 1. 默认为true，只有传入false才真正为false
async = opt.async !== false;
// 2. 判断是否有传值，然后转为boolean型
async = typeof opt.async !== "undefined" ? !!opt.async : true;
// 3. 使用hasOwnProperty判断
async = opt.hasOwnProperty("async") ? !!opt.async : true;

第1种很精简，Ext源码中有不少。
第2种很直观（Ext中常用Ext.isDefined判断）
第3种最深入，还能无视原型的干扰，只处理直属属性。

一般第1种就够用了。

7 楼 hyj1254 2010-08-18  

var Ajax ={request:function(){}};

见过的多数代码都是这样写的。在这里用闭包感觉没什么意义。

6 楼 Andrew1945 2010-08-18  

封装的真的挺不错的，比较到位。

5 楼 jhlxge 2010-08-18  

写得还蛮好的。