什么是Ajax
不用刷新整个页面便可与服务器通讯的办法。AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
AJAX异步刷新技术优点：
- 无刷新的好处，只更新部分页面，有效的利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果，操作更加方便
传统web和ajax的差异
-
发送请求方式不同
- 传统web：浏览器发送同步请求
- Ajax技术：异步引型对象发送的请求
-
2.服务器响应不同：
- 传统web：响应内容是一个完整页面
- Ajax技术：响应内容只是需要的数据
-
3.客户端处理方式不同
- 传统web：需等待服务器响应完成并重新加载整个页面后用户才能进行操作
- ajax技术：可以动态更新页面中的部分内容，不影响用户在页面进行其他操作
XMLHttpRequest 对象
该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。实际上通常把Ajax当成XMLHttpRequest对象的代名词，为整个Ajax技术的核心提供异步发送请求的能力
XMLHttpRequest 对象方法：
1. 创建一个新的HTTP请求
open(String method,String url,boolean async, String user, String password)
参数说明：
method 表示设置HTTP请求的方法，比如get，post，对大小写不敏感
url 表示请求的url地址
async 可选，表示指定此请求是否为异步方法，默认是true
user 可选，如果服务器需要验证，此处需要指定用户；否则，会弹出验证窗口
password 可选，如果用户名为空，此值忽略
2. 发送请求到服务器端
send(String data)
参数说明：
data 表示请求发送的数据，如果method值为post，可以指定该参数，如果为get，该参数为null
3. 取消当前请求
abort()
4. 设置请求的某个HTTP头信息
setRequsetHeader(String header,String value)
参数说明：
header 表示指定的http头名称
value 表示指定的http头名称所对应的值
5. 获取响应的指定HTTP头信息
getResponseHeader(String header)
参数说明：
header 表示要获取的指定http头
6. 获取响应的所有HTTP头信息
getAllResponseHeader()
XMLHttpRequest 对象常用属性：
onreadystatechange 设置回调函数
readyState 返回请求的当前状态（0：为初始化，1：开始发送请求，2：请求发送完成，3：开始读取响应，4：读取响应结果）
status 返回当前请求的Http状态码（200：正确返回，404：找不到访问对象）
statusText 返回当前请求的响应行状态
responseText 以文本形式获取响应值
responseXML 以XML形式获取响应值，并且解析成DOM对象返回
事件： onreadystatechange:指定回调函数
常用属性：（续）
readyState：XMLHttpRequest的状态信息
0----XMLHttpRequest对象未完成初始化
1----XMLHttpRequest对象开始发送请求
2----XMLHttpRequest对象的请求发送完成
3----XMLHttpRequest对象开始读取响应
4----XMLHttpRequest对象读取响应结束
常用属性：（续）
status：HTTP的状态码
200----服务器正确返回响应
404----请求的资源不存在
500----服务器内部错误
403----没有访问权限
statusText：返回当前请求的响应状态
responesText：以文本形式获得响应的内容
responseXML：将XML格式的响应内容解析成DOM对象返回
事例：简单初始化
XMLHttpRequest对象初始化
function createXmlHttpRequest(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
代码
// 发送请求
function sendRequest(){
// 获取文本框的值
var chatMsg = input.value;
var url="chatServlet.do?charMsg="+chatMsg;
// 建立对服务器的调用
XMLHttpReq.open("POST",url,true);
// 设置MiME类别,如果用 POST 请求向服务器发送数据，
// 需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
// 它会告知服务器正在发送数据，并且数据已经符合URL编码了。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
// onreadystatechange会调用相应的事件处理函数
XMLHttpReq.onreadystatechange=processResponse;
// 发送数据
XMLHttpReq.send(null);
}
2.注册回调函数
xmlhttp.onreadystatechange = callback(){
// 判断对象的状态是交互完成
if（xmlhttp.readystate == 4）{
....
}
}
数据格式提要
在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。但是从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：XML，JSON，HTML
