Ajax讲解与简单封装

为了复习下Ajax基础，抽空写了本篇博客。哈哈。
要运用Ajax，必须非常熟悉一个 JavaScript 对象，即XMLHttpRequest（简称XHR）。这个小小的对象已经在几种浏览器存在一段时间了，它是Ajax的核心。首先先看下如何创建跨浏览器的XMLHttpRequest对象：

//创建XMLHttpRequest对象
function createXMLHttpRequest(){
	var request = false;
	try{
		request = new XMLHttpRequest();//Mozilla,Safari,Opera,IE7等
	}catch(e){
		try{
			request = new ActiveXObject('Msxml2.XMLHTTP');//IE较新版本
		}catch(e1){
			try{
				request = new ActiveXObject('Microsoft.XMLHTTP');//IE较老版本
			}catch(e2){
				request = false;
			}
		}
	}
	return request;
}

注意不要被这些花括号迷住了眼睛，下面分别介绍每一步:

• 创建一个新变量 request 并赋值 false。使用 false 作为判断条件，表示还没有创建 XMLHttpRequest 对象
• 增加try/catch块：尝试创建 XMLHttpRequest 对象，如果全部失败，则保证request的值仍然为false。所以检查request是否仍然为false（如果一切顺利就不会是false）。

该对象的几个常用的方法和属性：

open()：建立到服务器的新请求

send()：向服务器发送请求

readyState：提供当前 HTML 的就绪状态

status：服务器响应的状态代码

responseText：服务器返回的请求响应文本

下面将对Ajax的使用作详细阐述：

建立到服务器的请求：
准备好XMLHttpRequest对象后，就可以建立到服务器的请求了。结合一个实例来构造url：
var url = "getEmpInfo.do?empId=" + escape(empId);
注：escape()方法用于转义不能用明文正确发送的任意字符。比如，空格将被转换成字符 %20，从而能够在url中传递这些字符。
然后建立请求：

request.open("GET",url,true);

使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个参数：

参数request-type：发送请求的类型。典型的值是GET或POST,但也可以发送HEAD请求。当为POST时，需要设置：
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
参数url：要连接的 URL
参数asynch：如果希望使用异步连接则为true，否则为false。该参数是可选的，默认为true
参数username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值
参数password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值

通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为true，这样更容易理解。

使用XMLHttpRequest发送请求：
一旦请求用open()配置好之后，就可以用send()方法发送请求了，send()方法只有一个参数，就是要发送的内容。例如：

var data = "idx="+idx;
request.send(data);

但是如果url本身已经传递了参数，或者该请求不需要参数，即这里不需要用send()方法传递数据，只要传递null作为该方法的参数即可：

request.send(null);

设置回调函数：
如果请求是异步请求，请求发出后JavaScript方法不会等待服务器处理完成，因此代码将继续执行。（如果是同步请求，则此时浏览器将等待服务器返回结果。结果返回后，才继续执行代码）。
当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用web页面中的代码。也就是说，服务器完成请求之后，会查看XMLHttpRequest对象，特别是onreadystatechange属性。然后调用该属性指定的方法。之所以称之为回调，是因为是由服务器向网页发起调用，无论网页本身在做什么。这就是称之为“异步”的原因：用户在一层操作网页，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。回调函数设置如下：

var request = createXMLHttpRequest();
request.open("GET",url,true);
request.onreadystatechange = updatePage;//设置回调函数，在send()方法前设置
request.send(null);

需要特别注意的是该属性在代码中设置的位置，它是在调用send()方法之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能够查看该属性！还要特别注意的是，这里的updatePage是个函数名称，不能写成updatePage()函数调用的形式！这表示将updatePage()函数运行的返回结果赋值给onreadystatechange属性。体会JavaScript中函数也是对象的特征。

处理服务器响应：
请求发送后，用户可以继续使用浏览器（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此之外，可以将应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其它的页面结构，让用户访问另一个url或者做响应服务器需要的任何事情。
响应函数（仅弹出简单的警告提示信息）：

function updatePage(){
	alert("server is done!");
}

如果运行以上代码，根据浏览器的不同，会看到两次、三次、甚至四次警告提示信息。原因是没有考虑到HTTP的就绪状态。这是请求/响应循环中的一个重要的部分。
HTTP就绪状态（readyState）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态：

0：请求没有发出（在调用 open() 之前）
1：请求已经建立但还没有发出（调用 send() 之前）
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应
4：响应已完成，可以访问服务器响应并使用它

与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从0到1、2、3再到4，一些浏览器从不报告0或1而直接从2开始，然后是3和4，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态1。
对于Ajax编程，需要直接处理的惟一状态就是就绪状态4，它表示服务器响应已经完成，可以安全的使用响应数据了。基于此，回调函数作如下调整：

function updatePage(){
	if(request.readyState==4){
		alert("server is done!");
	}
}

修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警告提示信息了。
以上代码看起来似乎不错，但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？服务器端代码应该是由Ajax、JSP、普通HTML或其他类型的代码调用的，但只能使用传统的Web专用方法报告信息。而在 Web 世界中，HTTP状态码（status）可以处理请求中可能发生的各种问题，比如：
输入了错误的URL请求将得到404错误码，它表示该页面不存在；
403和401错误码表示所访问的数据受到保护或者禁止访问；
无论哪种情况，这些错误码都是从完成的响应中得到的。换句话说，服务器执行了请求（即HTTP就绪状态是4）但是没有返回客户机预期的数据。因此除了就绪状态外，还需要检查HTTP状态。我们期望的状态码是200，它表示一切顺利。如果就绪状态是4而且状态码是200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。
所以在回调函数中增加HTTP状态（status）检查：

function updatePage(){
	if(request.readyState==4){
		if(request.status==200){
			alert("server is done!");
		}
	}
}

现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据（文本形式）保存在XMLHttpRequest对象的responseText属性中。（如果服务器选择使用XML响应，则也可以使用在responseXML属性获取）。

小结：
1.Ajax应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节，使得Ajax编程更加容易。但是如果不知道应用程序在做什么，就很难发现其中的问题。
2.XMLHttpRequest对象是Ajax应用的核心，必须非常熟悉
3.Ajax应用的基本流程：
      创建XMLHttpRequest对象
      设置要连接的URL
      建立到服务器的连接
      设置服务器在完成后要运行的回调函数
      发送请求

附：我做的Ajax简单封装：

/**
* Ajax工具类
*/
var Ajax=function(){
	
	//创建XMLHttpRequest对象
	function createXMLHttpRequest(){
		var request = false;
		try{
			request = new XMLHttpRequest();//Mozilla,Safari,Opera,IE7等
		}catch(e){
			try{
				request = new ActiveXObject('Msxml2.XMLHTTP');//IE较新版本
			}catch(e1){
				try{
					request = new ActiveXObject('Microsoft.XMLHTTP');//IE较老版本
				}catch(e2){
					request = false;
				}
			}
		}
		return request;
	}
	
	//jQuery源码中的parseJSON方法
	function parseJSON(data){
	    if ( typeof data !== "string" || !data ) {   
	        return null;   
	    }
	    // Make sure leading/trailing whitespace is removed (IE can't handle it)   
	    // data = jQuery.trim( data );   屏蔽掉
	    
	    // Make sure the incoming data is actual JSON   
	    // Logic borrowed from http://json.org/json2.js   
	    //if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")   
	       // .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")   
	       // .replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
	        // Try to use the native JSON parser first   
	        return window.JSON && window.JSON.parse ? window.JSON.parse(data) : (new Function("return " + data))();   
	   // }
	}
	
	/**
	* 执行Ajax请求
	* url:       请求url
	* data:      请求参数       
	* type:      返回数据格式（json或者文本型，默认文本型）
	* async:     是否异步，异步（true），同步（false），默认true
	* method:    请求方式 GET or POST(默认)
	* timeout    请求超时时间(默认0)（只有在异步时设置才有效）
	* onSuccess: 请求成功后响应函数
	* onTimeout: 请求超时后响应函数
	* onFailure: 请求失败后响应函数
	*/	
    function start(params){
        var request = createXMLHttpRequest();
        if(!request){
        	alert("不能创建XMLHttpRequest对象");
        	return false;
        }
        
        var url = params.url;
        var data = params.data || null;
        var type = params.type || "";//这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值
        var async = params.async !== false;
        var method = (params.method || 'POST').toUpperCase();
        var timeout = params.timeout || 0;
        
        //alert("==url="+url+"\tdata="+data+"\ttype="+type+"\tasync="+async+"\tmethod="+method+"\ttimeout="+timeout);
        var timer;
        if(async){//异步时，可以检测超时
        	if(timeout>0){
	        	timer = setTimeout(function(){
	        		request.abort();//调用abort后request.status为0
	        	},timeout);
	        }
        }
        
        request.open(method,url,async);//建立到服务器的请求
        if(method==="POST"){
        	//因为是post请求，故需要设置requestHeader.(get请求就不用设置了)
      		//表示客户端提交给服务器文本内容的编码方式 是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示
        	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        request.onreadystatechange = function(){
        	//alert("request.readyState="+request.readyState);
        	if(request.readyState==4){
        		//alert("request.status="+request.status);
        		if(request.status==200){
        			if(type=="json"){
        				var text = request.responseText.replace(/\r\n/g,"");//替换返回的换行符"/n"
        				//params.onSuccess(eval('('+(ajax_responseText)+')'));//eval()函数可计算某个字符串，并执行其中的的 js代码
						params.onSuccess(parseJSON(text)); //效率比json_sans_eval.js中的jsonParse方法高效！！！
        			}else if(type=="xml"){
        				params.onSuccess(request.responseXML);
        			}else{
        				params.onSuccess(request.responseText);
        			}
        		}else{
        			if(request.status==0){
        				if(params.onTimeout){
        					params.onTimeout();
        				}else{
        					alert('timeout');
        				}
        			}else{
        				if(params.onFailure){
        					params.onFailure();
        				}else{
        					alert('fail');
        				}
        			}
        		} 
        		if(async){
        			clearTimeout(timer);
        		}
        	}
        };
        request.send(data);
	}
    
    return{
	    execute:function(params){
	        start(params);
	    }
    }
}();