js實現AJAX請求

標籤：style   blog   http   color   java   使用   os   io   

 

摘自：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=12setRequestHeader的意思是佈建要求頭的類型為表單類型：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();} //callbackfunction 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協議中伺服器返回的狀態代碼擷取簡單地伺服器返回的文本資訊