AJAX
AJAX
什么是AJAX
AJAX是Asynchronous JavaScript and XML（异步的JavaScript和XML）的简称，是一种能在不重新加载的网页的条件下，更新网页内容的技术。
AJAX的工作原理
XHR对象
IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的，因此，在IE中可能会出现三种不同版本的XHR对象：MSXML2.XMLHttp、MSXML.XMLHttp3.0和MSXML2.XMLHttp.6.0。若要使用XHR对象，需要编写一个函数。
function createXHR(){
if(typeof arguments.callee.activeXString != 'String'){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML.XMLHttp3.0", "MSXML2.XMLHttp"],i,len;
for(i = 0, len = versions.length; i < len; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
在IE7+、Chrome、FireFox、Safari、Opera中，都支持XHR对象，可以直接使用构造函数来创建XHR对象。因此，上面的代码只需要稍微修改就可以在更高版本的浏览器上使用。
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != 'String'){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML.XMLHttp3.0", "MSXML2.XMLHttp"],i,len;
for(i = 0, len = versions.length; i < len; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else{
throw new Error("No XHR object available!");
}
}
实际上，一般在写时，对于IE6和IE5，我们只需要写一个ActiveXObject("Microsoft.XMLHTTP")即可，不需要上面这么长的代码。
var XHR;
if(window.XMLHttpRequest){
XHR = new XMLHttpRequest();
} else {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
XHR的使用
XHR请求
XHR.open("GET","test.txt",true);
XHR.send();
向服务器发送信息时，要使用open()方法和send()方法。
open()方法接受三个参数
XHR.open(method, url, async);
method是要发送的请求的类型("GET","POST"等)，url是请求的地址，async代表是否使用异步发送请求的布尔值。以下对这三个参数进行详解。
GET与POST
GET是最常见的请求类型，用于向服务器查询某些信息。它是将查询的字符串参数追加到url末尾然后传给服务器的，查询字符串需要进行编码。
XHR.open("GET","example.php?name1=value1&name2=value2",true);
连接字符串时，在要传输的url后添加一个问号"?"，后面跟着每个参数和值，参数和值之间用等号"="连接，每个参数/值对之间用"&"连接。`
POST请求通常用于向服务器发送被保存的信息。POST请求应该把数据作为请求的主体提交，一个POST请求可以包含很多的内容，而且格式不限。使用POST方式发送请求时，通常需要使用setRequestHeader设置请求头，然后将传输的内容通过send()发送出去。一个完整的POST方式请求如下所示：
XHR.open("POST","example.php",true);//初始化一个POST请求
XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头
XHR.send("fname=Lee&lname=Cheers");//发送请求
GET和POST的区别
- 在客户端，GET方式通过URL提交数据，而POST方式是将数据放在HTML HEADER中
- 因为URL有长度限制，所以一般GET方式不能传输太大的数据，一般情况下不超过1024个字符，而POST方式没有长度限制
- 在使用GET方式时，因为是使用URL方式发送数据，URL信息会直接显示在地址栏上，通过修改地址栏信息也可以修改传输的数据信息，同时，传输的信息也会直接暴露，所以当需要发送重要数据时，GET方式的安全性不高。而POST方式不会在地址栏中直接显示URL，所以安全性相对比GET高。
url
此处为服务器上文件的地址，该文件可以是任何格式的文件，可以是.txt、.xml文件，也可以是服务器脚本文件.php、.aspx等。
async异步
此处的值是true或false。当值为true时，即使用异步，在等待服务器响应期间，可以执行其他的脚本，等服务器响应就绪后就会对响应进行处理。当值为false时，在服务器响应期间，不能对其他的脚本进行处理。一般推荐使用异步。
服务器响应
要获得来自服务器的响应，可以使用XMLHttpRequest的responseText或responseXML属性。
responseText是获得字符串形式的响应数据，responseXML获取的是XML形式的响应，当服务器返回的响应式是XML，且需要对XML对象进行解析时，可以使用该属性。
document.getElementById("myDiv").innerHTML = XHR.responseText;//字符串格式
xmlDoc = XHR.responseXML;
text = '';
x = xmlDoc.getElementsByTagName("artist");
for(var i = 0; i < x.length; i++){
text = text + x[i].childNode[0].nodeValue + "<br/>";
}
document.getElementById("myDiv").innerHTML = text;
//对XML格式的响应进行解析
XHR onreadyState
onreadystatechange事件
当请求被发送到服务器后，我们需要执行一些基于响应的任务，当XHR的readyState发生改变时就会触发onreadystatechange事件，readyState属性存有XHR的状态信息。XHR有以下几个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数，每当readyState属性发生变化时，就会触发 |
| readyState | XHR响应状态，此属性有5个值： 0：未初始化，尚未调用open()方法 1：启动，已经调用了open()方法，但是未调用send()方法 2：发送：已经调用了send()方法，但尚未收到响应 3：接收，已经接收到部分响应数据 4：完，已经接收到了全部响应数据，而且已经可以在客户端使用了 |
| status | HTTP响应状态 200：成功 404：Not Found（你懂得） |
| statusText | HTTP状态说明 |
基于以上XHR属性，我们就可以在向服务端发送请求后，如果成功地接收到了响应，我们就可以执行下一步操作。
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="myDiv">点击按钮后，这里将显示我的姓名</div>
<button id="btn">点击</button>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Microsoft.xmlHTTP");
}
xhr.open("GET","example.php?fname=Lee&lname=cheers");
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("myDiv").innerHTML = xhr.responseText;
}
}
}
}
</script>
</body>
</html>
example.php
<?php
header("Content-Type:Text/plain");
$fname = $_GET['fname'];
$lname = $_GET['lname'];
echo "hello, $fname $lname";
?>
