Ajax-基礎篇

1：例子：下面的例子點擊按鈕會在不更新整個頁面的情況下動態更新內容

abcdefg

代碼如下：

<html>

<head>

<script
type="text/javascript" src="/jquery/jquery.js"></script>

<script
type="text/javascript">

$(document).ready(function(){

  $("#bt1").click(function(){

  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});

  $("#myDiv").html(htmlobj.responseText);

  });

});

</script>

</head>

<body>

<div
id="myDiv">abcdefg</div>

<button
id="bt1" type="button">change
abcdefg</button>

</body>

</html>

2：通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換數據。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。

3：應用ajax的步驟：

a：創建XMLHttpRequest對象：variable=new XMLHttpRequest();

老版本的ie5和6使用的是ActiveXObject對象：variable=new ActiveXObject("Microsoft.XMLHTTP");

b：爲了應對所有的現代瀏覽器，必須驗證。

var xmlhttp；

if(window.XMLhttpRequest){ xmlhttp= new XMLhttpRequest();}

else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

c:如需要將請求發送到服務器，使用XMLhttpRequest對象的open()和send()方法

xmlhttp.open("get","test.txt",true);

xmlhttp.send();

d：如需獲的來自服務器的響應，需使用XMLHttpRequest對象的ResponseText（獲取字符串形式的響應數據）和ResponseXML（獲取xml形式的響應數據）屬性，如果來自服務器的數據不是xml，請使用第一個屬性responseText，

可以這樣使用：document.getElementById("id").innerHTML=responseText;

如果是xml，則需要解析，js的代碼如下：

<script
type="text/javascript">

function loadXMLDoc()

{    var xmlhttp;

     var txt,x,i;

     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=function(){

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

          { 
xmlDoc=xmlhttp.responseXML;

             txt="";

             x=xmlDoc.getElementsByTagName("title");

             for (i=0;i<x.length;i++)

                 {

                   txt=txt
+ x[i].childNodes[0].nodeValue + "<br
/>";

                 }

             document.getElementById("myDiv").innerHTML=txt;

          }

       }

    xmlhttp.open("GET","/example/xmle/books.xml",true);

    xmlhttp.send();

    }

</script>
 
 e：當請求被髮送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性

描述

onreadystatechange

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

readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status
200: "OK"
404: 未找到頁面

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 4：callback（回調） 函數是一種以參數形式傳遞給另一個函數的函數。

核心代碼：

<script>

    var xmlhttp;

    function loadXMLDoc(url,cfunc){

      if(window.XMLHttpRequest){
xmhhttp= new XMLHttpRequest();}

      else{
xmlhttp=new XMLHttpRequest("Microsoft.XMLHttp");}

      xmlhttp.onreadStatechange=cfunc;

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

      xmlhttp.send();

     }

         // 
如果您的網站上存在多個 AJAX 任務，那麼您應該爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。<br>         //  該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：<br>    function Myfunction(){

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

            if(xmlhttp.readState=="4" &&
xmlhttp.state=="200"){

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

            }

        });

     }

</script>

調用時，按鈕調用Myfunction