JS中的Ajax

JS中的Ajax

Ajax简介

Ajax为 Asynchronous Javascript And XML 的缩写，这一技术能够向服务器请求额外的数据而无须卸载页面。

XMLHttpRequest对象

创建XHR对象

var xhr = new XMLHttpRequest();
//对于IE只支持IE7+

XHR的用法

open()方法

使用XHR对象时，要调用的第一个方法就是open() ，它接受3个参数：①要发送的请求的类型 ②请求的URL ③是否异步发送请求。

xhr.open("get", "example.php", false);

需要注意两点：

• 调用open()方法不会真正发送请求，而只是启动一个请求以备发送。
• 只能向一个域中使用相同端口和协议的URL发送请求，否则会出现跨域的安全问题。

send()方法

要发送请求，必须使用send()方法：

xhr.send(null)；
//参数只有一个：作为请求主体发送的数据

XHR对象的属性

XHR对象中的许多属性会在服务器收到响应之后被自动填充：

• responseText: 作为响应主体被返回的文本。
• status: 响应的HTTP状态。
• status: HTTP的状态说明。
• readyState : 当前的活动阶段：
  • 0：未初始化（尚未调用open()方法）
  • 1： 启动（已调用open()方法，但尚未调用send()方法）
  • 2： 发送（已调用send()方法，但尚未收到响应）
  • 3： 接受（已经接受到部分响应数据）
  • 4： 完成（已经接受到全部响应数据，并且已经可以在客户端使用）

var xhr = createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        //状态码在200~300之间一般表示成功，状态码为304表示请求的资源没有被修改，可以直接使用缓存
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

注意：无论返回的内容类型是什么，响应主体的内容都会保存到responseText属性中。

HTTP的头部信息

默认情况下，发送XHR请求的同时还会发送下列头部信息：

• Accept：浏览器能够处理的内容类型。
• Accept-Charset：浏览器能够显示的字符集。
• Accept-Encoding：浏览器能够处理的压缩编码。
• Accept-Language：浏览器当前设置的语言。
• Connection：浏览器与服务器之间连接的类型。
• Cookie：当前页面设置的任何Cookie。
• Host: 发出请求的页面所在的域。
• Referer：发出请求的页面的URI。
• User-Agent：浏览器用户的代理字符串。

利用setRequestHeader()方法可以设置自定义的请求头部信息。注意：必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()方法。

示例如下：

var xhr = createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        //状态码在200~300之间一般表示成功，状态码为304表示请求的资源没有被修改，可以直接使用缓存
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

GET请求

注意：对XHR而言，位于传入open()方法的URL末尾的查询字符创必须经过正确的编码才行。

以下为向现有URL末尾添加查询字符串参数的辅助函数：

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

POST请求

POST请求通常用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交。

function submitData(){
    var xhr = createXHR();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            //状态码在200~300之间一般表示成功，状态码为304表示请求的资源没有被修改，可以直接使用缓存
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    xhr.open("post", "example.txt", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var form = document.getElementById("user-info");
    //此处的serialize()函数用于表单序列化处理
    xhr.send(serialize(form));
}

这样以后服务器端中的PHP就可以通过$_POST 超级全局变量访问提交的数据了。注意：如果不设置Content-Type头部信息，那么数据就不会出现在$_POST 超级全局变量中。