上文中提到的Ajax的异步更新。主要使用XMLHttpRequest对象来实现的，XMLHttpRequest对象能够在不向server提交整个页面的情况下，实现局部更新网页。

当页面所有载入完毕后。client通过该对象向server请求数据，server端接受数据并处理后，向client反馈数据。

 关于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[可选]（假设server须要验证。此处指定username。假设未指定，当server须要验证时，会弹出验证窗体）

    //                 bstrPassword[可选]（验证信息中的password部分。假设username为空，则此值将被忽略）

    // 备注：调用此方法后，能够调用send方法向server发送数据。

    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方法---发送请求到httpserver并接收回应

    // 		（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方法，建立对server的调用，而且设置URL以及所希望的HTTP方法，一般是Get或者Post。关于Get和Post的不同。请见下图：

     3.再者，当通用server后，我们须要完毕一项任务，那便是确定当server返回所需数据。或者说XMLHTTPRequest的状态发生变化时。调用HandleStateChange函数。

xmlhttp.onreadystatechange=
HandleStateChange;

     4.然后，当设置好“要去哪儿（对server的调用）”和“回到哪儿（HandleStateChange函数）”后。就能够发送请求了。xmlhttp.Send(xmldoc);

     5.最后，就须要HandleStateChange函数来检查XMLHTTPRequest的readystate属性，然后检查server返回的状态码。假设一切正常。HandleStateChange函数就会在client运行对应操作。这也就是所谓的回调函数。

 

     以上说了说XMLHTTPRequest这个Ajax核心对象的使用，那么它是怎样实现异步更新的呢？这就体如今咱们上面提到的回调函数了。

大家看上面程序的调用顺序，在第三步中我们就设置了server返回数据时所需调用的函数，设置完毕之后，我们就不用管他了。全然能够继续我们下一步的操作（比如第四步）。在我们的操作过程中，一旦XMLHTTPRequest的状态发生变化。就会自己主动调用HandleStateChange函数，来实现当中功能。这整个过程就非常easy的实现了异步更新。

Ajax之旅（二）--XMLHttpRequest的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. ajax连接池和XMLHttpRequest

    连接池 我们公司在路由和交换机web界面和后端交互全部采用的是自己封装的ajax组件完成的,组件有点老了,代码风格和其中的某些用法现在看起来都有点不习惯.今天把这个组件的核心部分的ajax连接池记录下 ...

  3. ajax起步 （二）

    Ajax的关键在于XMLHttpRequest对象,如下基本用法: <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  5. Ajax学习笔记(二)

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

  6. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  7. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  8. ajax练习习题二三级联动

    异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发 ...

  9. 配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

随机推荐

  1. 56.如何清除已经设置的npm config配置

    npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除

  2. OpenCV —— ROI

    通过 cvResetImageRoI 函数释放ROI是非常重要的,否则其他操作将默认在ROI区域中进行 通过巧妙的使用widthStep,可以达到同ROI一样的效果 —— 如果想设置和保持一副图像的多 ...

  3. spark读写mysql

    spark读写mysql除官网例子外还要指定驱动名称 travels.write .mode(SaveMode.Overwrite) .format("jdbc") .option ...

  4. VitrualBox虚拟机设置网络桥接方式与windows互相ping通

    一.VitrualBox 选择桥接模式 由于公司服务器对MASK地址访问外网有严格的限制,所以虚拟机里边的HWaddr mask地址没有加入公司的服务器的路由表里边,所以访问不了外网,而网络转换地址( ...

  5. UVALive 5292 Critical Links

    Critical Links Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Ori ...

  6. 32款iOS开发插件和工具介绍[效率]

    插件和工具介绍内容均收集于网络,太多了就不一一注明了,在此谢过!   1.Charles 为了调试与server端的网络通讯协议.经常须要截取网络封包来分析. Charles通过将自己设置成系统的网络 ...

  7. worktools-git 工具的使用总结（3）

    1.标签的使用,增加标签 git tag 1.0 branch_name zhangshuli@zhangshuli-MS-:~/myGit$ git br -av parent e2e09c4 so ...

  8. WCF 字节数据传输

    准备工作 1.新建一个工程,添加一个WCF服务库, 然后公共的类库, 添加一个默认可序列化的的CompositeType类用于压缩. [Serializable] public class Compo ...

  9. StartCoroutine的使用

    StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,可是在unity中有些元素是不能操作的.这个时候能够使用协程来完毕. 使 ...

  10. hdu4605Magic Ball Game 树状数组

    //给一棵树.树的每个节点的子节点个数是0或2 //对于每个节点都有一个权值w[i] //一个权值为x的球在每个节点的情况有 //x=w[i] 这个球在该点不向下掉 //x<w[i] 这个球往左 ...