Ajax与JSON的一些总结

1.1.1 摘要

Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。

XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

本文目录

XMLHttpRequest的用法
Ajax同源请求
同源策略与跨源策略
Ajax跨源请求

1.1.2 正文

XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和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 unsuccessful: " + req.status);
        }
    };
    req.open("GET", "www.myxhrtest.aspx", true);
    req.send(null);
}

前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

readyState值	描述
0	未初始化；尚未调用open()方法
1	启动；尚未调用send()方法
2	已发送；但尚未收到响应
3

Ajax与JSON的一些小结[转]

Ajax与JSON的一些总结

1.1.1 摘要

本文目录

1.1.2 正文

XMLHttpRequest的用法

相关资料更多>

推荐阅读更多>