Ajax之旅(二)--XMLHttpRequest

前端之家收集整理的这篇文章主要介绍了Ajax之旅(二)--XMLHttpRequest前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上文中提到的Ajax的异步更新,主要使用XMLHttpRequest对象来实现的,XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。关于XMLHttpRequest对象方法属性如下(聊一眼即可,不是本文重点):

<html>
<head>
<title>XMLHTTPRequest对象的说明DEMO</title>
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// 创建一个XMLHTTPRequest对象
function createXMLHTTPRequext(){
      if(window.ActiveXObject) {
           xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    else if(window.XMLHTTPRequest){
       xmlhttp = new XMLHTTPRequest();
    }
}
function PostOrder(xmldoc)
{
    createXMLHTTPRequext();
    
    // Open方法---创建一个新的http请求,并指定此请求的方法、URL以及验证信息
    // 	    (1)语法:XMLHttpRequest.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);
    //      (2)参数:bstrMethod(http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感) 
	//				   bstrUrl(请求的URL地址,可以为绝对地址也可以为相对地址)
	//				   varAsync[可选](布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数) 
	//				   bstrUser[可选](如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口)
    //                 bstrPassword[可选](验证信息中的密码部分,如果用户名为空,则此值将被忽略)
     
    // 备注:调用方法后,可以调用send方法向服务器发送数据。
    xmlhttp.Open("get","http://localhost/example.htm",false);

    
    // onreadystatechange属性---指定当readyState属性改变时的事件处理句柄
    //  	(1)语法:XMLHttpRequest.onreadystatechange = funcMyHandler;
    //      (2)如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数,
    // 		(3)当数据接收完毕后(readystate == 4)此页面上的一个按钮将被激活
	
    // 备注:此属性只写,为W3C文档对象模型的扩展
    xmlhttp.onreadystatechange= HandleStateChange; 
    
	
    // send方法---发送请求到http服务器并接收回应
    // 		(1)语法:XMLHttpRequest.send(varBody);
    // 		(2)参数:varBody (欲通过此请求发送的数据) 
    
	// 备注:此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync == False,此方法将会等待请求完成或者超时时才会返回,如果bAsync == True,此方法将立即返回。 
    xmlhttp.Send(xmldoc);
	
	
    // abort方法---取消当前请求
    // 		(1)语法:XMLHttpRequest.abort();
	
    // 备注:调用方法后,当前请求返回UNINITIALIZED 状态。
    xmlhttp.abort();
    
}
function HandleStateChange()
{
    // readyState属性---返回XMLHTTP请求的当前状态
    // 		(1)语法:lValue = oXMLHttpRequest.readyState;
    
	// 备注:变量,此属性只读,状态用长度为4的整型表示.定义如下:
    // 		(1)0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法) 
    // 		(2)1 (初始化) 对象已建立,尚未调用send方法 
    // 		(3)2 (发送数据) send方法调用,但是当前的状态及http头未知 
    // 		(4)3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, 
    // 		(5)4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
    if (xmlhttp.readyState == 4){
		if(xmlhttp.status =200 )
		{
		     document.frmTest.myButton.disabled = false;
			 
		   //status属性---返回当前请求的http状态码
		   // 		(1)语法:Value = oXMLHttpRequest.status;
		   // 		(2)返回值:长整形标准http状态码,定义如下: 
		   // 			
							 // 100:Continue
							 // 101:Switching protocols
							 // 200:OK
							 // 201:Created
							 // 202:Accepted
							 // 203:Non-Authoritative Information
							 // 204:No Content
							 // 205:Reset Content
							 // 206:Partial Content
							 // 300:Multiple Choices
							 // 301:Moved Permanently
							 // 302:Found
							 // 303:See Other
							 // 304:Not Modified
							 // 305:Use Proxy
							 // 307:Temporary Redirect
							 // 400:Bad Request
							 // 401:Unauthorized
							 // 402:Payment required
							 // 403:Forbidden
							 // 404:Not Found
							 // 405:Method Not Allowed
							 // 406:Not Acceptable
							 // 407:Proxy Authentication required
							 // 408:Request Timeout
							 // 409:Conflict
							 // 410:Gone
							 // 411:Length required
							 // 412:Precondition Failed
							 // 413:Request Entity Too Large
							 // 414:Request-URI Too Long
							 // 415:Unsupported Media Type 
							 // 416:Requested Range Not Suitable 
							 // 417:Expectation Failed 
							 // 500:Internal Server Error 
							 // 501:Not Implemented
							 // 502:Bad Gateway
							 // 503:Service Unavailable
							 // 504:Gateway Timeout 
							 // 505:HTTP Version Not Supported
							 
		   // 备注:长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。 
		   alert(xmlhttp.status);
		   
		}      
    }
}
//-->
</script>
</head>
<body>
<form name="frmTest">    
    <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
</form>    
</body>
</html>

要想更加深入的了解XMLHttpRequest对象,只知道其方法属性只是其基础,我们还需要理解其创建和使用过程。以下是我通过一个小Demo总结分析的XMLHttpRequest对象创建和使用的,算是原理吧。不足之处还请您指导!

1.首先,通过createXMLHTTPRequest方法,创建一个XMLHTTPRequest对象。其中简单的分支逻辑是为了确定如何创建对象。判断浏览器是否支持ActiveX控件,依此来确定浏览器是否为IE

2.其次,通过Open方法,建立对服务器的调用,并且设置URL以及所希望的HTTP方法,通常是Get或者Post。关于GetPost的不同,请见下图:


3.再者,当通用服务器后,我们需要完成一项任务,那便是确定当服务器返回所需数据,或者说XMLHTTPRequest的状态发生变化时,调用HandleStateChange函数xmlhttp.onreadystatechange= HandleStateChange;

4.然后,当设置好“要去哪儿(对服务器的调用)”和“回到哪儿(HandleStateChange函数)”后,就可以发送请求了。xmlhttp.Send(xmldoc);

5.最后,就需要HandleStateChange函数来检查XMLHTTPRequestreadystate属性,然后检查服务器返回的状态码,如果一切正常,HandleStateChange函数就会在客户端执行相应操作。这也就是所谓的回调函数

以上说了说XMLHTTPRequest这个Ajax核心对象的使用,那么它是如何实现异步更新的呢?这就体现在咱们上面提到的回调函数了。大家看上面程序的调用顺序,在第三步中我们就设置了服务器返回数据时所需调用函数,设置完成之后,我们就不用管他了,完全可以继续我们下一步的操作(例如第四步),在我们的操作过程中,一旦XMLHTTPRequest的状态发生变化,就会自动调用HandleStateChange函数,来实现其中功能。这整个过程就很容易的实现了异步更新。

猜你在找的Ajax相关文章