ajax请求过程

原生态Ajax使用的步骤，最后告诉面试官，咱们在工做中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽可能详尽，包括方法的参数的个数，顺序和做用，以避免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！

Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能颇有帮助。

Ajax的使用

 

    (1)建立`XMLHttpRequest`对象,也就是建立一个异步调用对象. (2)建立一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息. (3)设置响应`HTTP`请求状态变化的函数. (4)发送`HTTP`请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新. var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }

 

 

如下步骤，若是不能理解你死记硬背都要记下来，总比你答不出来要好吧！

1.建立Ajax核心对象XMLHttpRequest

 

var xmlhttp;
if(window.XMLHttpRequest){
//IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;
}else{
   //IE5,IE6执行该代码
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

 

xmlhttp.open(method,url,async);
xmlhttp.send();

示例以下：

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);
xmlhttp.send();

注意一：open 的参数要牢记，不少面试官爱问这样的细节

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置，相对位置或绝对位置
• async：true（异步）或 false（同步）

• 为何使用 Async=true ？

  咱们的实例在 open() 的第三个参数中使用了 "true"。

  该参数规定请求是否异步处理。

  True 表示脚本会在 send() 方法以后继续执行，而不等待来自服务器的响应。

   

  onreadystatechange 事件使代码复杂化了。可是这是在没有获得服务器响应的状况下，防止代码中止的最安全的方法。

  经过把该参数设置为 "false"，能够省去额外的 onreadystatechange 代码。若是在请求失败时是否执行其他的代码可有可无，那么可使用这个参数

   

注意二：post请求不一样于get请求

send(string)方法post请求时才使用字符串参数，不然不用带参数。

注意三：post请求必定要设置请求头的格式内容

 

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Herry&lname=Ford");

3.服务器响应处理

responseText    得到字符串形式的响应数据。

responseXML   得到XML 形式的响应数据。

3.1 同步处理

 

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",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"

304：该资源在上次请求以后没有任何修改（这一般用于浏览器的缓存机制，使用GET请求时尤为须要注意）。

403   （禁止） 服务器拒绝请求。

404   （未找到） 服务器找不到请求的网页。

408  （请求超时） 服务器等候请求时发生超时。

500   （服务器内部错误）  服务器遇到错误，没法完成请求。