AJAX 全拼就是Aaynchronous JavaScript And XML,取首字母。Aaynchronous则更是异步的,老外很语义化的就定义了。
Aaynchronous JavaScript And XML:异步的JS和XML,由Google2002年在GoogleSuggest应用提出,目标实现客户端和服务器“同时”运行——异步的HTTP请求和响应,客户端不会经常出现“一片惨白”,提高浏览体验。
AJAX涉及到的技术:HTML、CSS、JS、DOM、XML、JSON等,属于前端范畴,是纯客户端技术。
AJAX实现的效果:
(1)客户端和服务器异步运行
(2)客户端页面的局部刷新
(3)动态页面的静态化
AJAX底层工作原理:
XMLHttpRequest的常用成员
XHR对象的作用:发起异步的HTTP请求消息,并接收服务器返回的响应消息。
status:0 | 保存着服务器返回的响应消息的状态码 |
statusText:'' | 保存着服务器返回的响应消息的原因短句 |
responseText:'' | 保存着响应消息的主体——看做一段String |
responseXML:null | 保存着响应消息的主体——看做一个XMLDOM对象 |
timeout:0 | 设置XHR发起请求消息后,等待服务器给出响应消息的持续时间 |
readyState:0 只读的,其值是随着请求/响应的进程而自动改变的——用于描述当前请求/响应进行到哪一步了 | 0 - UNSENT 请求消息尚未发送 1 - OPENED XHR已创建请求消息,打开针对服务器的连接 2 - HEADERS_RECEIVED XHR对象已经接收到响应消息的头部 3 - LOADING XHR正在加载响应主体数据 4 - DONE XHR对象已经接收完毕响应消息 |
常用成员事件: | |
onreadystatechange:fn | 当XHR的readyState值发生改变,触发此句柄 |
ontimeout:fn | 当XHR的请求超时,触发此句柄 |
onerror:fn | 当XHR发生请求/响应错误,触发此句柄 |
常用的成员方法: | |
getAllResponseHeaders() | 获取响应消息中所有的头部 |
getResponseHeader(headerName) | 获取响应消息中指定的头部 |
open(METHOD, URI, isAysnc) | 创建一个HTTP请求消息,打开一个针对服务器的连接 |
send( null/'k1=v1&k2=v2&...' ) | 发送HTTP请求消息 |
setRequestHeader(name, value) | 在请求消息发送之前,设置一个请求消息头部 |
使用AJAX发起HTTP GET请求消息
// 创建XHR对象
var xhr = ...;
// 绑定监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
}else{
}
}
}
// 创建请求消息
xhr.open('GET', 'xx.php?k1=v2&k2=v2&k3=v3', true);
// 发送请求消息
xhr.send(null);
使用AJAX发起HTTP POST请求消息:批量的数据录入,不需要页面跳转
请求消息的Content-Type头常用值:
text/plain : 客户端向服务器提交的请求主体是一些普通文本数据(未经编码)——很多Web服务器会直接拒绝接收这样的请求数据
application/x-www-form-urlencoded : 客户端向服务器提交的请求主体是经过了编码的文本数据——默认情况下,HTMLForm标签会把所有的表单数据编码之后再提交给服务器
multipart/form-data : 客户端向服务器提交的请求主体中包含上传的文件
// 创建XHR对象
var xhr = ...;
// 绑定监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
}else{
}
}
}
// 创建请求消息
xhr.open('POST', 'xx.php', true);
// 设置请求头部
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求消息
xhr.send('k1=v1&k2=v2');