js實現AJAX請求

 

摘自：http://www.myexception.cn/javascript/1448345.html

 

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

 

AJAX請求的特點：

1、不刷新頁面

2、服務器僅返回需要的數據

 

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

IE中獲取此對象：

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

非IE中獲取次對象：var xmlHttp=new XMLHttpRequest();

 

兼容模式：

 var xmlHttp：//聲明一個對象

 function creatXMLHttpRequest(){
      if(window.ActiveXobject){……}else{//非IE采用的方式……}

 }

 

 請求的格式：
  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，創建XMLHttpRequest對象
  2，調用xmlHttp.open()設置請求內容
  3，設置回調函數（根據服務器返回的狀態信息，做什么事情）
  4，調用xmlHttp.send()發送請求
function sendAjax(){
    createXMLHttpRequest();//調用上面設置的兼容模式
    xmlHttp.open("GET","ajax.do?name=tom",true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange=callback;//狀態信息發生改變調用函數
    xmlHttp.send();
}

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

sendAjax();//瀏覽器會彈出幾次框（不同的瀏覽器可能不同）
 獲取AJAX請求的狀態碼和HTTP協議的狀態碼：
 AJAX請求的狀態碼有四個值：
  var xmlState=xmlHttp.readyState;
  1，已初始化
  2，數據傳輸中
  3，響應數據傳輸中
  4，響應完畢
HTTP協議的狀態碼有很多：
  var httpState=xmlHttp.status;
常見的狀態碼如下：
狀態碼    意義
200    服務器正確處理了請求並響應
404    請求的頁面未找到
403    沒有權限訪問請求的頁面
405    頁面不接收該請求方式
408    請求超時
500    服務器處理請求時發生異常
503    服務暫時不可用
304    網頁未修改
 
使用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狀態碼為200時
            var result=xmlHttp.responseText;//獲取ajax請求的文本內容
            alert(result);
        }
    }
}
 
總結：
Ajax請求使用 XMLHttpRequest 對象
IE和非IE獲取對象的方式不同
GET，POST請求的傳值問題
Ajax請求的流程
Ajax請求的狀態碼和HTTP協議中服務器返回的狀態碼
獲取簡單地服務器返回的文本信息