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

[javascript] view plain copy

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

2. 向服务器发送请求

[javascript] view plain copy

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

示例如下：

[javascript] view plain copy

1. xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);  
2. 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请求一定要设置请求头的格式内容

[javascript] view plain copy

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

3.服务器响应处理

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

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

3.1 同步处理

[javascript] view plain copy

1. xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);  
2. xmlhttp.send();  
3. document.getElementById("mydiv").innerHTML=xmlhttp.responseText;  

直接在send()后面处理返回来的数据。

3.2 异步处理

 异步处理相对比较麻烦，要在请求状态改变事件中处理。

[javascript] view plain copy

1. xmlhttp.onreadystatechange=function () {//接收到服务端响应时触发  
2.      if(xmlhttp.readyState==4&&xmlhttp.status==200){  
3.            document.getElementById("mydiv").innerHTML=xmlhttp.responseText;  
4.       }  
5. }  

一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

200: "OK"

304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。

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

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

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

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

Ajax的JQuery实现

$.ajax({

async:ture/false,

type:"Post",

url:"    ",

data:" ....=....&...=....",

dataType:"json",

success:function(data){

}

});

博文2

//Ajax应用的五个步骤

//1.创建XMLHttpRequest对象
var xmlHttp=createXMLHttpRequest();
function createXMLHttpRequest()
{ 
 var xmlHttp;
 if(Window.XMLHttpRequest)
 { 
  //IE6以上版本和其他浏览器内置XMLHttpRequest对象
  xmlHttp=new XMLHttpRequest();
 }
 else if(Window.ActiveXObject)
 {
  //在IE6及其以下浏览器可以通过ActiveXObject的两个控件来创建，将版本新的放在前面
  var activexName=["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0; i<activexName.length; i++)
  {
   try
   { //取出一个控件名进行创建，创建成功就终止循环
    xmlHttp=new ActiveXObject(activexName[i]);
    break;
   }
   catch(e){};
  }
 }
 //确认XMLHttpRequest对象创建成功
 if(!xmlHttp)
 {
  alert("XMLHttpRequest对象创建失败！");
  return;
 }
 else
 {
  //alert(xmlHttp);
  return xmlHttp;
 }
}

//2.注册回调函数
xmlHttp.onreadystatechange=callback;

//3.初始化XMLHttpRequest对象，设置连接信息
//第一个参数表示http的请求方式，分为GET和POST两种，GET方式请求的参数在URL中
//第二个参数表示请求的url地址，该地址会被解析为绝对地址
//第三个参数表示请求方式是同步或是异步，默认是同步true，第四，五个参数通常不用
xmlHttp.open("GET",url, true);

//4.发送数据，开始和服务器端进行交付
//同步方式下：send()这句话会在服务器端的数据传送回来后才执行完，再执行下一条语句
//异步方式下：send()这句话会立即执行完，接着执行下一条语句
//若以POST方式,需要自己设置http的请求头
//xmlHttp.open("POST",url,true);
//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlHttp.send("name="+value);
xmlHttp.send(null); //该参数为可选，此时也可不写

//5.定义回调函数，该函数主要负责接收从服务器端传回来的数据，并在页面上显示
function callback()
{
 //判断对象的交互状态是否完成
 if(xmlHttp.readyState==4)
 {
  //判断http的交互是否成功
  if(xmlHttp.status==200)
  {
   //获取服务器端返回的数据，以纯文本数据或xml文档格式的数据
   var responseText=xmlHttp.responseText;
   //将响应数据显示在页面上
   //以DOM方式或JQuery方式获取文档节点
   var divNode=document.getElementById("#divNode_ID");
   divNode.innerHTML=responseText;
  }
 }
 
}