/*创建一个基本的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 * }); */
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对象,以便可以更灵活的传参,下一篇将从改善请求参数开始。*/