閱讀197 返回首頁    go 阿裏雲 go 技術社區[雲棲]

AJAX - 基本知識

Ajax=異步的JavaScript和XML
     通過在後台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

一、AJAX - 創建 XMLHttpRequest 對象

1.什麼是XMLHttpRequest對象

     所有現代瀏覽器（IE7、Chrome、Firefox、Safari、Opera）均支持XMLHttpRequest對象，XMLHttpRequest對象用來在後台與服務器交換數據，實現頁麵局部刷新。

2.如何創建XMLHttpRequest對象

     一般瀏覽器都支持XMLHttpRequest對象，但部分IE瀏覽器支持的是ActiveXObject。


var xmlhttp;


if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
       }
else
       {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }






3.XMLHttpRequest對象如何與服務器交換數據





3.1 向服務器發送請求






     我們使用XMLHttpRequest的Open和Send方法：





xmlhttp.open("GET","text.txt",true);







xmlhttp.send();











方法

描述





open(method,url,async)



規定請求的類型、URL 以及是否異步處理請求。


    

  • 
method：請求的類型；GET 或 POST
    • 

  • 
url：文件在服務器上的位置
    • 

  • 
async：true（異步）或 false（同步）
    • 








send(string)



將請求發送到服務器。


  • 
string：僅用於 POST 請求











3.1.1 使用GET請求


 


     一個簡單的GET請求：





xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();






     為了避免每次獲得的是緩存中的內容，為了避免，可以在url中加一個唯一的時間ID：





xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();





     通過GET向服務器發送數據Demo：




xmlhttp.open("GET","demo_get.asp?name=heaven&age=26",true);
xmlhttp.send();








3.1.3 使用POST請求：






     一個簡單的POST請求：





xmlhttp.open("POST","demo_get.asp",true);
xmlhttp.send();






     如果像html表單那樣POST數據，在setRequestHeader來添加HTTP頭，使用send方法中規定要發送的數據：





xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");








     向請求添加 HTTP 頭：setRequestHeader(header,value)     
          header: 規定頭的名稱
          value: 規定頭的值






3.1.3關於異步True或False:






     對於web開發來說，發送異步請求是一個巨大的進步，因為很多在服務器執行的任務都相當費時，在Ajax出現前，這可能會引起應用程序掛起或停止。



     通過Ajax,JavaScript無需等待服務器響應，而是：


          1.在等待服務器響應期間執行其它腳本


          2.當響應就緒後對響應進行處理





當Async=True時，應設置onreadystatechange事件中處於就緒狀態時的執行函數：


xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();






當Async=False時，處於同步狀態，此時JavaScript會等到服務器就緒時才執行，無需寫onreadystatechange監控函數：




xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;








3.2 服務器的響應


     


如果要獲得來自服務器的響應，使用XMLHttpRequest中的responseText或responseXML。








responseText

獲得字符串形式的響應數據。





responseXML

獲得 XML 形式的響應數據。










3.2.1 使用responseText





     responseText 屬性返回字符串形式的響應，因此您可以這樣使用：


document.getElementById("myDiv").innerHTML=xmlhttp.responseText;








3.2.2 使用responseXML





     如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：




 請求 books.xml 文件，並解析響應：


xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;






3.3 Ajax 的 onreadystatechange事件






     當請求發送到服務器的整個過程中，我們需要執行一些基於響應的任務，即每當readyState改變時都會觸發onreadystatechange事件，readyState屬性存有XMLHttpRequest的狀態信息。






下麵是XMLHttpRequest對象的三個重要屬性：








屬性

描述





onreadystatechange

存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。





readyState



存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。


    

  • 0: 請求未初始化
    • 

  • 1: 服務器連接已建立
    • 

  • 2: 請求已接收
    • 

  • 3: 請求處理中
    • 

  • 4: 請求已完成，且響應已就緒
    • 








status



200: "OK"



404: 未找到頁麵











當readyState=4且status=200時，表示響應已就緒：


xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }






3.4 使用callback回調函數






     callback函數是一種以參數的形式傳遞給另一個函數的函數，我們在處理Ajax任務時，一般都會寫一個處理Ajax請求的標準函數，這個標準函數包括請求的url和發生onreadystatechange時間所執行的任務：



     





< html>



     < head>



     < script type ="text/javascript" >



          var xmlhttp;



          function loadXMLDoc(url,cfunc) {



               if (window.XMLHttpRequest) { 



                    // code for IE7+, Firefox, Chrome, Opera, Safari



                 xmlhttp= new XMLHttpRequest();




              } else { 



                    // code for IE6, IE5



                 xmlhttp= new ActiveXObject( "Microsoft.XMLHTTP" );




              }



               xmlhttp.onreadystatechange=cfunc;



               xmlhttp.open( "GET",url, true );



               xmlhttp.send();



          }



          function myFunction(){



               loadXMLDoc( "/ajax/test1.txt", function (){




                 if (xmlhttp.readyState==4
&& xmlhttp.status==200){




                   document.getElementById( "myDiv" ).innerHTML=xmlhttp.responseText;




                }




              });



          }



     </ script>



     </ head>




< body>




  < div id= "myDiv" >




             < h2> Let
AJAX change this text </h2 >




  </ div>




  < button type ="button" onclick= "myFunction()"> 通過
AJAX 改變內容 </ button>






     </ body>




</ html>

































































































































最後更新：2017-04-03 12:53:47
  上一篇：go android JNI學習
  下一篇：go Maven發布項目