文档介绍：
1.1.1 摘要 Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR ),可以通过使用 XHR 对象获取到服务器的数据, 然后再通过 DOM 将数据插入到页面中呈现。虽然名字中包含 XML , 但 Ajax 通讯与数据格式无关,所以我们的数据格式可以是 XML 或 JSON 等格式。 XMLHttpRequest 对象用于在后台与服务器交换数据,具体作用如下: ?在不重新加载页面的情况下更新网页?在页面已加载后从服务器请求数据?在页面已加载后从服务器接收数据?在后台向服务器发送数据本文目录? XMLHttpRequest 的用法? Ajax 同源请求?同源策略与跨源策略? Ajax 跨源请求 1.1.2 正文 XMLHttpRequest 是一个 JavaScript 对象, 它是由微软设计, 并且被 Mozilla 、 Appl e 和 Google 采纳, W3C 正在标准化它。它提供了一种简单的方法来检索 URL 中的数据。我们要创建一个 XMLHttpRequest 实例,只需 new 一个就 OK 了: //// Creates a XMLHttpRequest object. var req = new XMLHttpRequest(); 也许有人会说: “这可不行啊! IE6 不支持原始的 XHR 对象”,确实是这样,我们在后面将会介绍支持 IE6 或更老版本创建 XHR 对象的方法。 XMLHttpRequest 的用法在创建 XHR 对象后,接着我们要调用一个初始化方法 open() ,它接受五个参数具体定义如下: void open( DOMString method, //"GET", "POST", "PUT", "DELETE" DOMString url, optional boolean async, optional DOMString user, optional DOMString password ); 通过上面的定义我们知道 open() 方法的签名包含五个参数,其中有参数 method 和 url 地址是必填的,假设我们针对 URL: myxhrtest.aspx 发送 GET 请求获取数据,具体定义如下: var req = new XMLHttpRequest(); req.open( "GET" , "myxhrtest.aspx" , false ); 通过上述代码会启动一个针对 myxhrtest.aspx 的 GET 请求,这里有两点要注意:一是 URL 相对于执行代码的当前页面(使用绝对路径);二是调用 open() 方法并不会真正发送请求,而只是启动一个请求准备发送。只能向同一个域中使用相同端口和协议的 URL 中发送请求; 如果 URL 与启动请求的页面有任何差别,都会引发安全错误。要真正发送请求要使用 send() 方法, send() 方法接受一个参数, 即要作为请求主体发送的数据, 如果不需要通过请求主体发送数据, 我们必须传递一个 null 值。在调用 send() 之后,请求就会被分派到服务器,完整 Ajax 请求代码如下: var req = new XMLHttpRequest(); req.open( "GET" , "myxhrtest.aspx" , false ); req.send( null ); 在发送请求之后,我们需要检查请求是否执行成功,首先可以通过 status 属性判断, 一般来说,可以将 HTTP 状态代码为 200 作为成功标志。这时,响应主体内容会保存到 responseText 中。此外,状态代码为 304 表示请求的资源并没有被修改,可以直接使用浏览器缓存的数据, Ajax 的同步请求代码如下: if (req != null ){ req.onreadystatechange = function (){ if ((req.status >= 200 && req.status < 300) || req.status == 304) { //// Do something. } else { alert( "Request was essful: "+ req.status); } }; req.open( "GET" , "x" , true ); req.send( null ); } 前面我们定义了 Ajax 的同步请求,如果我们发送异步请求,那么在请求过程中 javascript 代码会继续执行,这时可以通过 readyState 属性判断请求的状态, 当 readyState =4 时,表示收到全部响应数据,属性值的定义如下: readyState 值描述 0 未初始化;尚未调用 open() 方法 1 启动;尚未调用 send() 方法 2 已发送;但尚未收到响应 3 接收;已经收到部分响应数据 4 完成;收到全部响应数据表1 readyState 属性值同步请求:发生请求后,要等待服务器执行完毕才继续执行当前代码。异步请求:发生请求后,无需等到服务器执行完毕,可以继续执行当前代码。现在我们要增加判断 readyState 属性值,当 readyState =4 时,表示全部数据接收完成, 所以 Ajax 的异步请求代码如下: if (req != null ){ req.onreadystatechange = function (){ //// Checks the asyn pleted or not. if (req.readyState == 4) { if ((req.status >= 200 && req.status < 300) || req.status == 304) { //// Do something. } else { alert( "Request was essful: "+ req.status); }} }; req.open( "GET" , "x" , true ); req.send( null ); } Ajax 同源请求现在我们对 Aja x 的请求实现有了初步的了解, 接下来我们将通过具体的例子说明 Aja x 请求的应用场合和局限。在日常网络生活中,我们在浏览器的地址中输入要访问的 URL 并且回车,浏览器会向服务器发送请求, 当服务器收到请求后, 把相应的请求页面发送回浏览器, 我们会发现页面大部分加载完毕, 有些还没有加载完毕。总的来说, 采用异步加载方式不会影响已加载完毕的页面浏览,我们可以通过 Ajax 实现异步加载。这里我们以 AdventureWorks 数据库为例, 把产品表( Product ) 中的数据通过报表呈现给用户,我们可以通过多种方法实现该报表需求,这里我们将通过 Ajax 实现该功能。首先,我们要把后台数据转换为 JSON 格式,接下来我们定义 Product 表的数据库访问对象( DAO ),具体的实现代码如下: /// <summ

1