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 超级全局变量中。
