相当于在用户和服务器之间加了一个中间层(AJAX引擎),使用户操作与服务器响应异步化。
对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。
过程:
- 创建一个ajax引擎对象,ie6是new ActiveXbject其他浏览器是new一个xmlHttpRequest对象;
- 调用open方法启动一个请求以备发送,open方法传入三个参数请求类型,请求url和一个布尔值
- 调用send方法发送;
- 处理回调函数onreadystatechange,当readState =4,响应数据完成时,并且status=200,请求成功的时候,处理响应数据。
注意:回调函数要写在open()和send()之前;
1.创建Ajax核心对象XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// 兼容 IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
xmlhttp.open(method,url,async);
send(string)
注意:open 的参数要牢记,很多面试官爱问这样的细节
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)方法post请求时才使用字符串参数,否则不用带参数。
注意:post请求一定要设置请求头的格式内容
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
3.服务器响应处理
responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。
3.1 同步处理
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
直接在send()后面处理返回来的数据。
3.2 异步处理
异步处理相对比较麻烦,要在请求状态改变事件中处理。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
} }
一共有5中请求状态,从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
xmlhttp.status:响应状态码。这个也是面试比较爱问的,这个必须知道4个以上,比较常见的有:
200: "OK"
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
408 (请求超时) 服务器等候请求时发生超时
500 (服务器内部错误) 服务器遇到错误,无法完成请求。