记得有次面试的时候面试官问我知道AJAX吗?当时我回答听过但是没去看过,当时只是知道它和异步的概念有关。
经过查资料,弄明白了些头绪,下面就把我自己对AJAX的理解说说。
大多数浏览器是支持XMLHttprequest这个对象的,但是ie例外(查阅资料说5、6版本不支持),
所以为了兼容性,代码应该写成这样:
1.创建对象
var xhr;
if(window.XMLHttpRequest){
//大多数浏览器
xhr=new XMLHttpRequest();
}
if(window.ActiveXObject)
{
//ie 5 6
xhr=ActiveXObject("Miscrosoft.XMLHTTP");
}
这样就构建好了所需对象。
2.设置
get请求
xhr.open("get","/async.aspx",true);//设置请求行
xhr.send(null);//设置请求主体
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState){
//其他事务..
}
}
//其他事务..
post请求
xhr.open("post","/async.aspx",true);//设置请求行
xhr.setRequestHeader("Content-Type","application/x-www/form-urlencoded");//设置请求头
xhr.send("user=123&pwd=123");//设置请求主体
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState){
//其他事务...
}
}
//其他事务...
其中请求行的最后一个参数true代表异步,false代表同步,默认是true。
true表示脚本会在send()方法后继续执行,而不等待服务器响应。
readyState表示一种状态,
0,UNSET open尚未调用
1,OPENED open已经调用
2,HEADERS_RECEIVED 接受到头信息
3,LOADING 接受到头主体
4,DONE 响应完成
3.补充
get请求是没有请求中体的,所以不用设置请求体里的Content-Type.
post是通过请求主体来传递参数的,所以设置的Content-Type,就是为了告诉服务器要怎么解析传去的数据。
get是通过请求地址传递参数的,例如:xhr.open("get","a.aspx?user=123&pwd=123",true);
4.JQuery
以为现在很多情况下都不直接使用javascript了,而是使用到它的封装.
JQuery里面对XMLHttpRequest进行了封装,进而有了$.post();$.ge();$.ajax()....等方法。
对于是如何封装的,由于本人还没看过,所以还不敢下断言。
所以本人理解并不是异步请求,而是不等待服务器响应。send在请求的时候还是按照代码的先后顺序执行。