Ajax

要点：最好先回答原生态Ajax使用的步骤，我们通常使用Jquery来实现Ajax请求和处理的。在回答
的时候尽量详尽，包括方法的参数的个数，顺序和作用   

参考：http://blog.csdn.net/hlinghling/article/details/52624757
http://blog.csdn.net/crystal6918/article/details/53310626

一、AJAX是什么？

---

Ajax 是一种异步请求数据的一种技术

二、原生Ajax使用的步骤

---

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.(兼容写法)

var request;  
if (window.XMLHttpRequest)  
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
 request=new XMLHttpRequest();  
  }  
else  
  {// 兼容 IE6, IE5  
  request=newActiveXObject("Microsoft.XMLHTTP");  
  }  

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

• GET方法：

  req.open("GET", url, true);
  req.send(null);

• POST方法

xmlhttp.open("POST","ajax_test.html",true); 
//要成功发送请求头部信息，必须在调用open方法之后且调用send方法之前调用setRequestHeader（）。 
//post请求一定要设置请求头的格式内容
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("fname=Henry&lname=Ford");  

(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.

request.onreadystatechange=function() 
//异步请求 
  {  
  if (request.readyState==4 &&request.status==200)
  //内部写回调函数  
    {  
   document.getElementById("myDiv").innerHTML=request.responseText;  
    }  
  }  

(6)使用JavaScript和DOM实现局部刷新.

三、XHR的用法和属性

---

1.open(method,url,async);-----参数含义要记住  

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

2.send(string) post请求时才使用字符串参数，否则不用带参数。

3.获取响应的一些方法：

4.异步请求可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段：

0：未初始化，尚未调用open（）方法
1：启动。已经调用open（）方法，但尚未调用send（）方法。
2：发送。已经调用send（）方法，但尚未接收到响应。
3：接收。已经接收到部分相应数据。
4：完成。已经接受到全部响应数据，而且已经可以在客户端使用了。

只要readyState的值由一个值变成另一个值，就会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。    

5.在接收到响应之前还可以调用abort（）方法来取消异步请求：

xhr.abort（）;

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。 在终止请求之后，还应该对XHR对象进行解引用操作。
由于内存原因，不建议重用XHR对象。

四、原生Ajax代码（手撕）

---

<script>
  var xmlhttp;

  function createXMLHttpRequest(){
    xmlhttp=null;

    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的创建方式
    }else if(window.ActiveXObject){
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的创建方式
    }

    //异步调用服务器段数据
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //创建HTTP请求
      xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数，设置回调函数
      xmlhttp.send(null);  //发送请求
    }else{
      alert("不支持XHR")
    }
  }

   //响应HTTP请求状态变化的函数，也就是回调函数
  function httpStateChange(){//判断异步调用是否完成
    if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了
      if(xmlhttp.status==200||(xmlhttp.status==0){//状态码为0是本地响应成果，200表示处理的结果是ok的
      //判断异步调用是否成功,如果成功开始局部更新数据
        //code...
      }else{
        alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
      }
    }
  }
</script>

五、XHR2

---

超时设定

XHR有一个timeout属性，表示请求在等待响应多少毫秒之后就终止。
在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。

xhr.open("get","example.php",true);
xhr.timeout = 1000; //将超时设置为1秒钟=1000毫秒
xhr.ontimeout = function(){
    alert("request didn't return in a second");
}
xhr.send(null);

这个例子设置timeout属性为1000毫秒，意味着如果请求在1秒钟内还没有返回，就会自动终止。请求终止时，会调用ontimeout事件处理程序。

六、Ajax的优缺点

---

优点：

    无刷新更新数据
    异步与服务器通信
    前端和后端负载平衡
    基于标准被广泛支持
    界面与应用分离

缺点：

• 动态更新的页面，用户无法回到前一个页面状态。解决方案是使用URL片断标识符（通常被称为锚点，即URL中#后面的location. hash）来保持跟踪。
• AJAX的安全问题
• 对搜索引擎支持较弱，降低系统性能
• 给调试带来了很大的困难
• 违背URL和资源定位的初衷：你在一个URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

七、jQuery的Ajax

---

• $.ajax( )是最底层的方法
• load( )、$.get( )、$.post( )是第二层方法
• $.getScript( )和$.getJSON( )是第三层方法

(一)load( )

load(url [,data] [,callback])

1.url：请求HTML页面的URL地址
2.data（可选）：发送至服务器的key/value数据
3.callback（可选）：请求完成时的回调函数，无论请求成功还是失败。

$(#send).click(function(){
    $("container").load("test.html");
})

传递方式   

若load（）方法指定了参数data，则采用POST方式；如果没有指定则采用GET方式传递：

//无参数传递，则是GET方式
$("#container").load("test.html",function(){
    ……
})

//有参数传递，则是POST方式
$("#container").load("test.html",{name:"rain"},function(){
    ……
})

 回调参数

对于必须在加载完成后才能继续的操作，load（）方法提供了回调函数。
此函数有三个参数，分别代表responseText、textStatus和XMLHTTPRequest对象。

$("#container").load("test.html",function(responseText,textStatus,XMLHTTPRequest){
    //responseText：请求返回的内容
    //textStatus：请求状态：success、error、notmodified、timeout4中
    //XMLHTTPRequest对象
})

在load（）方法中，无论Ajax请求是否成功，只要请求完成（complete），回调函数就被触发。

(二)$.get（）

$.get()方法使用GET方式来进行异步请求。

$.get(url [,data] [,callback] [,type])

1.url：请求的url地址
2.data（可选）：发送至服务器的key/value数据，会作为QueryString附加到请求URL中。
3.callback（可选）：载入成功时的回调函数（只有Response的返回状态是success才调用该方法），自动将请求结果和状态传递给该方法。
4.type（可选）：服务端返回内容的格式，包括xml、html、script、json、text

$.get("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            //data：返回的内容
            //textStatus：请求状态，success、error、notmodified、timeout
})

get方法中的回调函数只有当数据成功返回后才被调用，这点与load（）方法不一样。

(三)$.post（）

$.post("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            $("#resContent").html(data);
})

（四）$.getScript（）$.getScript()方法来直接加载js文件。

$.getScript("test.js");

与其他方法一样，$.getScript()方法也有回调函数，它会在js文件成功载入后运行。

（五）$.getJSON（）

$.getJSON（）用于加载JSON文件，与$.getScript()用法相同。

$.getJSON("test.json",function(data){
    //data：返回的数据
})

（六）ajax（）
$.ajax()方法是jQuery最底层的Ajax实现。它的结构为：

$.ajax(options)

该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息。
参数以key/value的形式存在，所有参数都是可选的。常用参数有以下这些：

• url：发送请求的地址，默认为当前页
• type：请求方式（POST或GET），默认为GET。其他HTTP请求方法，例如PUT和DELETE也可以使用，但仅部分浏览器支持。
• timeout：设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
• data：发送到服务器的数据。GET请求将附加在URL后面。
• dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。
  可用的类型如下：

xml
html：返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
script：返回纯文本js代码。
json：返回json数据
jsonp：JSONP格式
text

• beforeSend：发送请求前可以修改XMLHttpRequest对象的函数。例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest是唯一的参数。

function(XMLHttpRequest){
    //this：调用本次Ajax请求时传递的options参数
}

• complete：请求完成后调用的回调函数（请求成功或失败时均调用）。
  参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest,textStatus){
    //this：调用本次Ajax请求时传递的options参数
}  

• success：请求成功后调用的回调函数。有两个参数：

  1.由服务器返回，并根据dataType参数进行处理后的数据
  2.描述状态的字符串
  

function(data,textStatus){
    //this：调用本次Ajax请求时传递的options参数
    //data：可能是XML、JSON、HTML、text等
}

• error：请求失败时被调用的函数。该函数有三个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。

function(XMLHttpRequest,textStatus,errorThrown){
    //this：调用本次Ajax请求时传递的options参数
    //通常textStatus和errorThrown只有其中一个包含信息
}

• global：默认为true，表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件。

代码举例：

$.ajax({  
            url:"url",  
            type:"get",  
            dataType:"json",  
            data:{  
                userID:"1"  
            },  
            success:function(response){  

            },  
            error:function() {  
            }  
        });  

八、对Ajax进行超时处理

---

设置timeout的时间，通过检测complete时status的值判断请求是否超时，如果超时执行响应的操作。   

var ajaxTimeoutTest = $.ajax({
　　url:'',  //请求的URL
　　timeout : 1000, //超时时间设置，单位毫秒
　　type : 'get',  //请求方式，get或post
　　data :{},  //请求所传参数，json格式
　　dataType:'json',//返回的数据格式
　　success:function(data){ //请求成功的回调函数
　　　　alert("成功");
　　},
　　complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
　　　　if(status=='timeout'){//超时,status还有success,error等值的情况
 　　　　　 ajaxTimeoutTest.abort();
　　　　　  alert("超时");
　　　　}
　　}
});