JavaScript使用Ajax
Ajax(Asynchronous JavaScript and XML)是使用JavaScript脚本，借助XMLHttpRequest插件，在客户端与服务器端之间实现异步通信的一种方法。2005年2月，Ajax第一次正式出现，从此以后Ajax成为JavaScript发起HTTP异步请求的代名词。2006年，W3C发布了Ajax标准，Ajax技术开始快速普及。
代码测试环境：Windows（运行系统）+Apache（服务器）+PHP（脚本）。
1、XMLHttpRequest基础
XMLHttpRequest是客户端的一个API，它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持XMLHttpRequest API，如IE7+、Firefox、Chrome、Safari和Opera等。30.1.1 定义XMLHttpRequest对象
1.1、定义XMLHttpRequest对象
使用XMLHttpRequest插件的第一步：创建XMLHttpRequest对象，具体方法如下：
var xhr = new XMLHttpRequest();
提示：IE 5.0版本开始以ActiveX组件形式支持XMLHttpRequest，IE 7.0版本开始支持标准化XMLHttpRequest。不过，所有浏览器实现的XMLHttpRequest对象都提供相同的接口和用法。
【示例】使用工厂模式对定义的XMLHttpRequest对象进行封装，这样只要调用createXHR()方法就可以返回一个XMLHttpRequest对象：
在上面示例中，首先定义一个数组，收集各种创建XMLHttpRequest对象的函数。第一个函数是标准用法，其他函数主要针对IE浏览器的不同版本尝试创建ActiveX对象。其次设置变量xhr为null，表示为空对象。最后遍历工厂内所有函数并尝试执行它们。为了避免发生异常，把所有调用函数放在try中执行，如果发生错误，则在catch中捕获异常，并执行continue命令，返回继续执行，避免抛出异常。如果创建成功，则中止循环，返回XMLHttpRequest对象。
1.2、建立HTTP连接
使用XMLHttpRequest对象的open()方法可以建立一个HTTP请求，用法如下所示：
xhr.open(method, url, async, username, password);
其中xhr表示XMLHttpRequest对象，open()方法包含5个参数，简单说明如下：
- method：HTTP请求方法，必设参数，值包括POST、GET和HEAD，大小写不敏感。
- url：请求的URL字符串，必设参数，大部分浏览器仅支持同源请求。
- async：指定请求是否为异步方式，默认为true。如果为false，当状态改变时会立即调用onreadystatechange。属性指定的回调函数。
- username：可选参数，如果服务器需要验证，该参数指定用户名；如果未指定，当服务器需要验证时，会弹出验证窗口。
- password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。
建立连接后，可以使用send()方法发送请求，用法如下：
xhr.send(body);
参数body表示将通过该请求发送的数据，如果不传递信息，可以设置为null或者省略。
发送请求后，可以使用XMLHttpRequest对象的responseBody、responseStream、responseText或responseXML属性等待接收响应数据。
【示例】简单演示实现异步通信的方法：
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET","server.txt", false); //建立连接，要求同步响应
xhr.send(null); //发送请求
console.log(xhr.responseText); //接收数据
在服务器端文件(server.txt )中输入下面的字符串：
Hello World //服务器端脚本
在浏览器控制台会显示“Hello World”的提示信息，该字符串是从服务器端响应的字符串。
1.3、发送GET请求
发送GET请求简单、方便，适用于简单字符串，不适用于大容量或加密数据。实现方法：将包含查询字符串的URL传入XMLHttpRequest对象的open()方法，设置第一个参数值为GET即可。服务器能够通过查询字符串接收用户信息。
【示例】以GET方式向服务器传递一条信息callback=functionName：
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function(){ //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function(){
var url = "server.php?callback=functionName" //设置查询字符串
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET",url, false); //建立连接，要求同步响应
xhr.send(null); //发送请求
console.log(xhr.responseText); //接收数据
}
}
</script>
在服务器端文件(server.php)中输入下面的代码，获取查询字符串中callback的参数值，并把该值响应给客户端：
<?php
echo $_GET["callback"];
?>
在浏览器中预览页面，当单击“提交”按钮时，在控制台显示传递的参数值。
提示：查询字符串通过问号(?)作为前缀附加在URL的末尾，发送数据是以连字符(&)连接的一个或多个名/值对。
1.4、发送POST请求
POST请求允许发送任意类型、长度的数据，多用于表单提交，以send()方法进行传递，而不以查询字符串的方式进行传递。POST字符串与GET字符串的格式相同，格式如下：
send("name1=value1&name2=value2…");
【示例】使用POST方法向服务器传递数据：
window.onload = function(){ //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function(){
var url = "server.php" //设置请求的地址
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("POST",url, false); //建立连接，要求同步响应
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//设置为表单方式提交
xhr.send("callback=functionName"); //发送请求
console.log(xhr.responseText); //接收数据
}
}
在open()方法中，设置第一个参数为POST，然后使用setRequestHeader()方法设置请求消息的内容类型为“application/x-www-form-urlencoded”，它表示传递的是表单值，一般使用POST发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据。
在服务器端设计接收POST方式传递的数据，并进行响应：
<?php
echo $_POST["callback"];
?>
1.5、串行格式化
GET和POST方法都是以串行格式化的字符串发送数据，主要形式有以下两种：
1.对象格式
例如，定义一个包含3个名/值对的对象数据：
{ user:"ccs8", pass: "123456", email: "css8@mysite.cn" }
转换为串行格式化的字符串表示为：
'user="ccs8"&pass="123456"&email="css8@mysite.cn"'
2.数组格式
例如，定义一组信息，包含多个对象类型的元素：
[{ name:"user", value:"css8" }, { name:"pass", value:"123456" },{ name:"email", value:"css8@mysite.cn" } ]
转换为串行格式化的字符串表示为：
'user="ccs8"& pass="123456"& email="css8@mysite.cn"'
【示例】为了方便开发，下面演示如何定义一个工具函数，把JavaScript对象或数组对象转换为串行格式化字符串并返回，这样就不需要手动转换了：
1.6、跟踪响应状态
使用XMLHttpRequest对象的readyState属性可以实时跟踪响应状态。当该属性值发生变化时，会触发readystatechange事件，调用绑定的回调函数。readyState属性值说明如下表所示：
如果readyState属性值为4，说明响应完毕，那么就可以安全读取响应的数据。注意，考虑到各种特殊情况，更安全的方法是，同时监测HTTP状态码，只有当HTTP状态码为200时，才说明HTTP响应顺利完成。
【示例】修改请求为异步响应请求，然后通过status属性获取当前的HTTP状态码。如果readyState属性值为4，且status（状态码）属性值为200，则说明HTTP请求和响应过程顺利完成，这时可以安全、异步地读取数据：
1.7、中止请求
使用XMLHttpRequest对象的abort()方法可以中止正在进行的请求，用法如下：
xhr.onreadystatechange = function(){}; //清理事件响应函数
xhr.abort(); //中止请求
提示：在调用abort()方法前，应先清除onreadystatechange事件处理函数，因为IE和Mozilla在请求中止后也会激活事件处理函数。因为将onreadystatechange属性设置为null，IE会发生异常，所以可以为它设置一个空函数。
1.8、获取XML数据
XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性XMLHttpRequest对象获取响应信息，它们都是只读属性，说明如下表所示：
在实际应用中，一般将格式设置为XML、HTML、JSON或其他纯文本格式。具体使用哪种响应格式，可以参考下面几条原则。
- 如果向页面中添加大块数据，选择HTML格式会比较方便。
- 如果需要协作开发且项目庞杂，选择XML格式会更通用。
- 如果要检索复杂的数据且结构复杂，选择JSON格式轻便。
【示例1】在服务器端创建一个简单的XML文档：
<?xml version="1.0" encoding="utf-8"?>
<the>XML数据</the >
然后，在客户端进行如下请求：
在上面代码中，使用XML DOM的getElementsByTagName()方法获取the节点，然后再定位第一个the节点的子节点内容。此时如果继续使用responseText属性读取数据，则会返回XML源代码字符串。
【示例2】可以使用服务器端脚本生成XML结构数据：
<?php
header('Content-Type: text/xml;');
echo '<?xml version="1.0" encoding="utf-8"?><the>XML数据</the >'; //输出XML
?>
1.9、获取HTML字符串
设计响应信息为HTML字符串，然后使用DOM的innerHTML属性把获取的字符串插入网页中。
【示例】在服务器端设计响应信息为HTML结构代码：
<table border="1" width="100%">
<tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>
<tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr>
</table>
在客户端接收响应信息：
注意：在某些情况下，HTML字符串可能为客户端解析响应信息节省一些JavaScript脚本，但是也带来一些问题。
- 响应信息中包含大量无用的字符，响应数据会变得很臃肿。因为HTML标记不含有信息，完全可以把它们放置在客户端由JavaScript脚本负责生成。
- 响应信息中包含的HTML结构无法被有效地利用，对于JavaScript脚本来说，它们仅仅是一堆字符串。同时结构和信息混合在一起，也不符合标准化设计原则。
1.10、获取JavaScript脚本
设计响应信息为JavaScript代码，与JSON数据不同，它是可执行的命令或脚本。
【示例】在服务器端请求文件中包含下面一个函数：
function(){
var d = new Date()
return d.toString();
}
在客户端执行下面的请求：
注意：使用eval()方法时，在字符串前后附加两个小括号：一个是包含函数结构体的，一个是表示调用函数的。不建议直接使用JavaScript代码作为响应格式，因为它不能够传递更丰富的信息，同时JavaScript脚本极易引发安全隐患。
1.11、获取JSON数据
使用responseText可以获取JSON格式的字符串，然后使用eval()方法将其解析为本地JavaScript脚本，再从该数据对象中读取信息。
【示例】在服务器端请求文件中包含下面JSON数据：
{user:"ccs8",pass: "123456",email:"css8@mysite.cn"}
然后在客户端执行下面的请求。把返回JSON字符串转换为对象，然后读取属性值：
注意：eval()方法在解析JSON字符串时存在安全隐患。如果JSON字符串中包含恶意代码，在调用回调函数时可能会被执行。解决方法：先对JSON字符串进行过滤，屏蔽敏感或恶意代码。也可以访问http://www.json.org/json2.js下载JavaScript版本解析程序。如果确信所响应的JSON字符串是安全的，没有被人恶意攻击，那么可以使用eval()方法解析JSON字符串。
1.12、获取纯文本
对于简短的信息，可以使用纯文本格式进行响应。但是纯文本信息在传输过程中容易丢失，且没有办法检测信息的完整性。
【示例】服务器端响应信息为字符串“true”，则可以在客户端这样设计：
1.13、获取和设置头部消息
HTTP请求和响应都包含一组头部消息，获取和设置头部消息可以使用XMLHttpRequest对象的下面两个方法：
- getAllResponseHeaders()：获取响应的HTTP头部消息。
- getResponseHeader(“Header-name”)：获取指定的HTTP头部消息。
【示例】下面将获取HTTP响应的所有头部消息：
var xhr = createXHR();
var url = "server.txt";
xhr.open("GET", url, true);
xhr.onreadystatechange = function (){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.log(xhr.getAllResponseHeaders()); //获取头部消息
}
}
xhr.send(null);
如果要获取指定的某个首部消息，可以使用getResponseHeader()方法，参数为获取首部的名称。例如，获取Content-Type首部的值，则可以按以下方式设计：
console.log(xhr.getResponseHeader("Content-Type"));
除了可以获取这些头部消息外，还可以使用setRequestHeader()方法在发送请求中设置各种头部消息。用法如下：
xhr.setRequestHeader("Header-name", "value")；
其中Header-name表示头部消息的名称，value表示消息的具体值。例如，使用POST方法传递表单数据，可以设置如下头部消息：
xhr.setRequestHeader("Content-type ", " application/x-www-form-urlencoded ")；
1.14、认识XMLHttpRequest 2.0
XMLHttpRequest 1.0 API存在如下缺陷：
- 只支持文本数据的传送，无法用来读取和上传二进制文件。
- 传送和接收数据时，没有进度信息，只能提示有没有完成。
- 受到同域限制，只能向同一域名的服务器请求数据。
2014年11月W3C正式发布XMLHttpRequest Level 2(http://www.w3.org/TR/XMLHttpRequest2/)标准规范，新增了很多实用功能，推动异步交互在JavaScript中的应用。简单说明如下：
- 可以设置HTTP请求的时限。
- 可以使用FormData对象管理表单数据。
- 可以上传文件。
- 可以请求不同域名下的数据（跨域请求）。
- 可以获取服务器端的二进制数据。
- 可以获得数据传输的进度信息。
1.5、请求时限
XMLHttpRequest 2为XMLHttpRequest对象新增timeout属性，使用该属性可以设置HTTP请求时限：
xhr.timeout = 3000;
上面语句将异步请求的最长等待时间设为3000 ms。超过时限，就自动停止HTTP请求。与之配套的有一个timeout事件，用来指定回调函数：
xhr.ontimeout = function(event){
console.log('请求超时！');
}
1.16、FormData数据对象
XMLHttpRequest 2新增FormData对象，使用它可以处理表单数据。使用方法如下。
第1步，新建FormData对象：
var formData = new FormData();
第2步，为FormData对象添加表单项：
formData.append('user', '张三');
formData.append('pass', 123456);
第4步，FormData对象可以直接获取网页表单的值：
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('grade', '2'); //添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);
1.17、上传文件
新版XMLHttpRequest对象不仅可以发送文本信息，还可以上传文件。使用send()方法可以发送字符串、Document对象、表单数据、Blob对象、文件和ArrayBuffer对象。
【示例】设计一个“选择文件”的表单元素(input[type=“file”])，将它装入FormData对象：
var formData = new FormData();
for (var i = 0; i < files.length;i++) {
formData.append('files[]', files[i]);
}
发送FormData对象给服务器：
xhr.send(formData);
1.18、跨域访问
XMLHttpRequest 2版本允许向不同域名的服务器发出HTTP请求。使用跨域资源共享的前提是：浏览器必须支持这个功能，且服务器端必须同意这种跨域。如果能够满足这两个条件，则代码的写法与不跨域的请求完全一样。例如：
var xhr = createXHR();
var url = 'http://other.server/and/path/to/script'; //请求的跨域文件
xhr.open('GET', url, true);
xhr.onreadystatechange = function (){
if ( xhr.readyState == 4 && xhr.status == 200 ){
console.log(xhr.responseText);
}
}
xhr.send();
1.19、响应不同类型的数据
新版本的XMLHttpRequest对象新增了responseType和response属性。
- responseType：用于指定服务器端返回数据的数据类型，可用值为text、arraybuffer、blob、json或document。如果将属性值指定为空字符串值或不使用该属性，则该属性值默认为text。
- response：如果向服务器端提交请求成功，则返回响应的数据。
- 如果reaponseType为text，则reaponse返回值为一串字符串。
- 如果reaponseType为arraybuffer，则reaponse返回值为一个ArrayBuffer对象。
- 如果reaponseType为blob，则reaponse返回值为一个Blob对象。
- 如果reaponseType为json，则reaponse返回值为一个JSON对象。
- 如果reaponseType为document，则reaponse返回值为一个Document对象。
1.20、接收二进制数据
XMLHttpRequest 1.0版本只能从服务器接收文本数据，新版则可以接收二进制数据。使用新增的responseType属性，可以从服务器接收二进制数据。
把responseType设为blob，表示服务器传回的是二进制对象：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';
在接收数据的时候，用浏览器自带的Blob对象即可：
var blob = new Blob([xhr.response], {type: 'image/png'});
注意：是读取xhr.response，而不是读取xhr.responseText。
将responseType设为arraybuffer，把二进制数据装在一个数组里：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = "arraybuffer";
在接收数据的时候，需要遍历这个数组：
var arrayBuffer = xhr.response;
if (arrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteArray.byteLength; i++) {
//执行代码
}
}
1.21、监测数据传输进度
新版本的XMLHttpRequest对象新增了一个progress事件，用来返回进度信息，它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。
第1步，先定义progress事件的回调函数：
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
第2步，在回调函数里面，使用这个事件的一些属性：
function updateProgress(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
}
}
在上面的代码中，event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0。
与progress事件相关的还有其他5个事件，可以分别指定回调函数：
- load：传输成功完成。
- abort：传输被用户取消。
- error：传输中出现错误。
- loadstart：传输开始。
- loadEnd：传输结束，但是不知道是成功还是失败。