上文中提到的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. js -- fileData 实现文件断点续传

    前端实现文件的断点续传 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用sl ...

  2. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

  3. 完整性检查工具Nabou

    完整性检查工具Nabou 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...

  4. 阿里云 Ubuntu14.04 升级 python3.4 到 python 3.5/6

    买的阿里云服务器给的系统是Ubuntu14.04,里面装的Python3版本是Python3.4,本来也没什么,但是这个版本的Python安装flask和django各种报错,所以只好升级Python ...

  5. pdnsd 解析原理

    apt install dnsmasq dnsmasq-fullvim /etc/dnsmasq.conf vim /etc/pdnsd.conf killall pdnsdpdnsd -c /etc ...

  6. 使用wpaint绘图软件时：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...

  7. 25.C++多线程

    #include <iostream> #include <thread> #include <Windows.h> using namespace std; vo ...

  8. Elasticsearch之es学习工作中遇到的坑（陆续更新）

    1:es集群脑裂问题(不要用外网ip,节点角色不要混用) 原因1:阿里云服务器,外网有时候不稳定. 解决方案:单独采购服务器,内网安装 原因2:master和node节点没有分开 解决方案: 分角色: ...

  9. 关于Django的登录系统

    首先需要明确的是登录的本质:登录就是服务器确认当前用户的身份,并将数据库中的记录提取匹配 默认的登录系统是用户名密码方式,这种方式很平常,也没什么特别的.这里主要说的是第三方验证登录 通常第三方验证登 ...

  10. vmware workstation安装windows server 2019

    提示需要输入密钥,选择[我没有密钥] 选择有桌面体验的 自定义 新建C盘 100G 选择100G的主分区,下一步 PS:未分配的空间,先不理,安装完系统,进桌面,再分配 开始安装.接下来就是等. 等. ...