关于Ajax

标签：

Ajax是一种无需刷新页面即可从服务器端获取数据的技术，这一技术的核心是XMLHttpRequest对象。

IE7+,FireFox,Opera,Chrome和Safari都支持原生的XHR对象，所以可以直接创建

var xhr = new XMLHttpRequest();

XHR对象的用法

在使用XHR对象时，首先要调用的是open方法，需要3个参数，分别为发送请求的类型（get\post）、请求的URL、表示是否异步的布尔值，如下所示：

//get方式
xhr.open("get","example.php",true);
//post方式
xhr.open("post","example.php",true);

要说明的是，open方法并不会真正发送请求，而只是启动一个请求以备发送，而且只能想同一域中使用同一协议，同一端口号的url发送请求。因此，如果是跨域请求的话，我们需要采用其他方法。

调用open方法以后，我们可以使用send方法发送请求，对于get和post两种方式，send也有不同的要求，对于get方式，send函数需要传递一个null参数，而对于post方式，需要将请求主体作为参数传递给send方法

//get方式
xhr.send(null);
//post方式
xhr.send(name1=value1&name2=value2);

对于异步请求，可以通过XHR对象的readyState属性来检测请求相应过程的当前活动阶段，readyState的值每变化依次，都会触发一次readystatechange事件.

readyState的取值有以下几种：

　　0：表示未初始化，即还没有调用open函数

　　1：表示已初始化，但还没有发送，即没有调用send函数

　　2：已发送，即已调用send函数，但未收到响应

　　3：接收，表示已接收到部分数据

　　4：完成，表示已接收到全部数据，而且已经可以在客户端使用

我们一般检测该属性是否为4以确定服务器端是否已返回全部数据，由于readyState反映XHR对象的状态的变换，所以一定要在调用open函数前进行初始化。所以一个完整的Ajax请求的代码大概是这样的：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        //blablabla...
    }
};
xhr.open("get","example.php",true);
xhr.send(null);

最开始我对onreadystatechange函数中为什么使用xhr而不使用this感到不太理解，然后看书上的介绍说，由于onreadystatechange事件处理程序的作用于问题，如果使用this，在有些浏览器中会导致函数执行失败。

当服务器端成功返回数据后，响应的数据会自动填充XML对象的属性，相关的属性有：

　　1、responseText                 //作为响应主体被返回的文本

　　2、responseXML                 //如果响应为XML类型的文档，则会保存在这个属性中

　　3、status                          //响应的HTTP状态

　　4、statusText                    //响应的HTTP状态的描述

常用的主要是1和3，因此我们可以通过responseText来获取响应数据，并通过status来判断响应的状态，如是否成功返回数据（状态码一般为200），请求资源是否被修改（状态码为304表示未被修改）等

所以，在上面的readyState事件处理函数中可以根据响应的HTTP状态来分别处理

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            //成功返回数据
            alert(xhr.responseText);
        }
        else {
            //响应错误
            alert("Request was unsuccessful:"+xhr.statusText);
        }
    }
}

关于Ajax

标签：

原文地址：http://www.cnblogs.com/hualuyao/p/4594275.html