Ajax概述
Asynchronous JavaScript And XML,异步的 js 和 XML
Google在2001年,为Google搜索加了“Google Suggest”功能,可以在用户浏览网页的同时,从服务器端获取更新后的搜索建议。命名为AJAX,目标:实现在无刷新、无提交的情况下页面内容局部更新,提高用户的浏览体验。
常用的场景:搜索建议、数据重复性判断、在线股票、在线聊天室、异步加载分页数据….
Ajax涉及到的技术:HTML、CSS、JS、DOM、HTTP、XML —— 属于纯客户端技术。
底层原理:在客户端浏览网页的同时,浏览器底层使用XMLHttpRequest
对象,向服务器发起HTTP请求,并接收服务器的响应消息——浏览的同时服务器也在工作
使用Ajax的步骤
- 创建XHR对象
var xhr = getXML();
// 兼容ie6低版本
function getXML() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
监听XHR状态改变事件
xhr.onstateschange = function () {...}
使用XHR连接到Web服务器
xhr.open(method, uri, isAsysn);
使用XHR对象发起异步的HTTP请求
xhr.send(null/data);
XHR对象常用的属性和方法
提示:XHR对象的作用:发起异步HTTP请求,并接收响应消息 —— 整个过程是不可见的,调试错误只能靠监视请求和响应消息。
XHR对象的成员属性
readyState
: 表示XHR当前的状态,即“请求-响应”过程进行到哪一步,可取值有5个,只能依次递增,无法回退,自动改变不能手动赋值- 0 :
UNSEND
请求消息尚未发送 - 1 :
OPENED
已打开到服务器的连接 - 2 :
HEADERS_RECEIVED
XHR已接收到响应消息起始行和头部 - 3 :
LOADING
XHR正在加载响应主体 - 4 :
DONE
XHR已经接收完成响应消息
- 0 :
status
: 0,响应消息状态码,只有在xhr.readyState变为2的时候才有值statusText
: “”,响应消息中原因短句,只有在xhr.readyState变为2的时候才有值responseText
: “”,响应消息的主体内容,只有在xhr.readyState变为3的时候才有值,变为4才稳定下来
XHR对象的成员事件
onreadystatechange
: xhr.readyState的值每次改变都会触发该事件
XHR对象的成员方法
open(method, uri, isAsyn)
: 打开到服务器的连接send(body/null)
: 发送请求消息setRequestHeader(name, value)
: 设置请求消息头部getResponseHeader(name)
: 获得响应消息头部getAllResponseHeaders()
: 获得响应消息中所有头部