初识Ajax
本节要点：
- 什么是Ajax
- XMLHttpRequest对象
- 创建Ajax的过程
1 什么是AJAX
AJAX是Asynchronous JavaScript And XML的缩写，但是，很多被认为是“Ajax”的页面并没有使用JavaScript或xml，所以把Ajax定义为一种构建Web页面的方法，使页面像桌面应用一样具有响应性和交互性，这种说法更合适。AJAX的主要用途是使用JavaScript从服务器获取数据而不必刷新整个页面。其中AJAX拆分开来解释：
- Asynchronous：发送请求后不等返回结果，由回调函数处理结果
- JavaScript：向服务器发起请求，获得返回结果，更新页面
- XML：封装数据
2 XMLHttpRequest对象
XMLHttpRequest是整个Ajax技术的灵魂。可以说没有XMLHttpRequest，就没有Ajax。Ajax技术的核心是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。
XMLHttpRequest对象不是一个国际标准。在不同浏览器中有不同的实现。要实现能够跨越浏览器运行的Ajax应用，必须考虑所有的使用场合。使用时必须根据浏览器采用不同的语法进行创建。但对每一个都进行判断不合实际，可以利用JavaScript的异常处理机制实现跨浏览器的XMLHttpRequest对象创建脚本。
示例：
var xmlhttp;
//IE浏览器
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
//DOM 2浏览器
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
3 创建Ajax的过程
3.1 构建Ajax应用
利用XMLHttpRequest(XHR)对象，每次构建Ajax应用必须遵循以下步骤：
- 创建XMLHttpRequest对象
- 创建Ajax请求
- 发送Ajax请求
- 处理服务器响应
创建完XMLHttpRequest对象后就可 以开始使用它了。首先介绍open()方法，它创建一个请求，并准备向服务器发送，open方法语法如下：
open(method , url , asynchronous , user , password);
其中的参数含义如下：
- method：指定请求的类型，一般为get或post;
- url：指定请求的地址，可以使用绝对地址或相对地址，可以附带查询字符串
- asynchronous：可选参数，标识请求是同步还是异步，异步请求为true,同步请求为false，默认情况下该参数为true；
- user：可选参数，指定请求的用户名，没有则省略；
- password：可选参数， 指定请求的密码，没有则省略；
示例：创建一个请求，利用get方式发送，服务器url为“my.do”
xmlhttp.open(“get”, “my.do”);
3.2 发送Ajax请求
在创建一个请求以后，可以使用send()方法向服务器发送这个请求，同时发送数据。其原型如下：
send(body);
该方法仅有一个body参数，它标识要向服务器发送的数据，其格式为查询字符串的形式。
示例：
var body = “userName=qiyi&sex=male&age=25”;
xmlhttp.send(body);
3.3 捕获请求的状态变化
在发送请求后，往往无法知道请求什么时候完成，所以必须利用事件机制捕获请求的状态，XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。 onreadystatechange事件可以指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。 在调用open方法与send方法时都会触发onreadystatechange事件。
示例：
xmlhttp.onreadystatechange=function(){
//事件处理代码
}
3.4 readyState状态值
onreadystatechange事件是在readyState属性方法改变时触发，readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值进行不同的处理，下表介绍了每个值的含义。
|
readyState |
含义 |
|
0 |
表示对象已经建立，但还未初始化。 |
|
1 |
当调用open()方法后，readyState=1，表示XMLHttpRequest对象已经被初始化 |
|
2 |
当调用send()方法后，XHR在向服务器发送请求的这段时间内，readyState =2 |
|
3 |
当调用send()方法后，服务器成功接收到所有请求后，readyState = 3 |
|
4 |
表示已经成功接收到来自服务器的响应数据。 |
使用readyState属性判断请求状态
在整个请求过程中，onreadystatechange事件在每一次readyState值发生改变时都会被触发。通常在事件中判断readyState的值是在请求完成时才做处理。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readState ==4){
//对服务器响应数据进行处理
}
}
3.5 使用status属性判断请求的结果
status存储服务器端返回的HTTP响应代码，它代表请求的处理结果，下表列出了常见的响应代码的含义：
|
Http状态码 |
含义 |
|
200 |
请求成功 |
|
202 |
请求被接收，但处理未完成 |
|
400 |
错误的请求 |
|
404 |
请求资源未找到 |
|
500 |
内部服务器错误 |
在请求已经完成的情况下，可以使用status判断请求的结果，其中，404错误是最常见的错误代码，代表“请求资源未找到”。在Ajax的开发中，最常用的是200这个响应代码，例如在浏览器成功打开了一个网页，这时HTTP相应代码就是200，但这个代码一般不会显示。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readState ==4){
if(xmlhttp.status ==200){
//请求成功完成
}
else{
//网络失败或者服务器错误
}
}
}
XHR对象可以接收服务器返回的文本片段和XML文档，分别保存在responseText与responseXML属性中。
3.6 获得返回文本
1) 使用responseText获得返回的文本
当服务器端处理了请求并返回后，可以利用XMLHttpRequest对象的responseText属性获取返回的文本片段。
//定义XMLHttpRequest对象的事件处理程序
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
//捕捉文本 alert(xmlhttp.responseText);
}else{
alert(xmlhttp.status);
}
}
}
2) 使用responseXML捕捉XML文档
除responseText属性外，还可以用responseXML属性来获取服务器返回的XML文档。在使用responseText属性获取返回的纯文本时，服务器端无需特殊的操作。
如果服务器返回的是XML文档，必须要求响应体的HTTP头信息中“content-type”属性为“text/xml”。
假如服务器返回以下XML文档
<?xml version="1.0" encoding="UTF-8">
<root>
<title>这是服务器返回的XML数据</title>
</root>
//将服务器返回的XML打印在屏幕上。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
//获取xml对象
var xmlObj=xmlhttp.responseXML;
//获取第一个title标记内容
var title=xmlObj.getElementsByTagName("title")[0].text;
//输出信息
alert("XML:\n" + xmlObj.xml + "\n" + "第一个title标记内容为：" + title);
}else{
alert(xmlhttp.status);
}
}
}
