JS實現(xiàn)AJAX請求

崋果山 2017-07-29

展開全文

AJAX：全稱“Asynchronous JavaScript and XML” (異步的JavaScript與XML)

AJAX請求的特點：

1，不刷新頁面

2，服務器僅返回需要的數(shù)據(jù)

AJAX引擎：XMLHttpRequest

此對象是瀏覽器中的內置對象，在目前的所有瀏覽器中都支持此對象。

IE中獲取此對象：

if(window.ActiveXObject){
    var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}

非IE中獲取此對象：

var xmlHttp=new XMLHttpRequest();

兼容模式：

var xmlHttp;//聲明一個對象
function createXMLHttpRequest(){
    if(window.ActiveXObject){//如果是IE，采用這種方式獲取
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{//非IE采用這種方式獲取
        xmlHttp=new XMLHttpRequest();
    }
}

請求的格式：

xmlHttp.open(請求方式,請求地址,[是否為異步請求]);

xmlHttp.send();

Get請求：

xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.send();

注：

get請求的傳值方式為請求地址后面跟 ?key=value

Post請求：

xmlHttp.open("POST","ajax.do",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name=tom");

注：

post請求的傳值方式是在send()方法中進行傳值，多個值用逗號隔開：name=tom,age=12

setRequestHeader的意思是設置請求頭的類型為表單類型：Content-Type="application/x-www-form- urlencoded" 是form表單的默認屬性

一個完整的AJAX請求的流程：

1，創(chuàng)建XMLHttpRequest對象

2，調用xmlHttp.open()設置請求內容

3，設置回調函數(shù)（根據(jù)服務器返回的狀態(tài)信息，做什么事情）

4，調用xmlHttp.send()發(fā)送請求

function sendAjax(){
    createXMLHttpRequest();//調用上面設置的兼容模式
    xmlHttp.open("GET","ajax.do?name=tom",true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange=callback;//狀態(tài)信息發(fā)生改變調用函數(shù)
    xmlHttp.send();
}

//回調函數(shù)
function callback(){
    alert("callback");
}

sendAjax();//瀏覽器會彈出幾次框（不同的瀏覽器可能不同）

獲取AJAX請求的狀態(tài)碼和HTTP協(xié)議的狀態(tài)碼：

AJAX請求的狀態(tài)碼有四個值：

var xmlState=xmlHttp.readyState;

1，已初始化

2，數(shù)據(jù)傳輸中

3，響應數(shù)據(jù)傳輸中

4，響應完畢

HTTP協(xié)議的狀態(tài)碼有很多：

var httpState=xmlHttp.status;

常見的狀態(tài)碼如下：

狀態(tài)碼	意義
200	服務器正確處理了請求并響應
404	請求的頁面未找到
403	沒有權限訪問請求的頁面
405	頁面不接收該請求方式
408	請求超時
500	服務器處理請求時發(fā)生異常
503	服務暫時不可用
304	網(wǎng)頁未修改

使用Servlet獲取服務器端的文本：

//ajax.do
//這是Servlet類中的doGet方法
public void doGet(HttpServletRequest request,HttpServletResponse response){
    PrintWriter out=response.getWriter();
    out.print("OK");
    out.flush();
    out.close();
}

//callback
function callback(){
    if(xmlHttp.readyState==4){//響應完畢后
        if(xmlHttp.status==200){//http狀態(tài)碼為200時
            var result=xmlHttp.responseText;//獲取ajax請求的文本內容
            alert(result);
        }
    }
}