Ajax小例[原]

剛看到Ajax這個名字還以為是荷甲勁旅阿賈克斯呢，搞了半天是Asynchronous JavaScript And XML的縮寫，我暈～～～。

<script language="JavaScript">

<!--

function xmlHttpTest()

{

  var url = "http://localhost:8080/application/login.do"; 

  //根據浏覽器不同，調用不同的方法來建立對象

  try

  {

      var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");

  }

  catch (e)

  {

      try

      {

          var xmlObj = new ActiveXObject("Microsoft.XMLHTTP");

      }

      catch (e)

      {

          try

          {

             var xmlObj = window.XMLHttpRequest();

          }

          catch

          {

          }

      }

  }

  //Open方法中包含了5個參數，前三個是必要的，後兩個是可選的(在伺服器需要進行身份驗證時提   供)，參數如下： 

  //http-method： HTTP的通信方式，比如GET或是 POST

  //url： 接收XML資料的伺服器的URL位址。通常在URL中要指明 ASP或CGI程式

  //async： 一個布爾辨別，說明請求是否為異步的。如果是異步通信方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器傳回消息後才去執行其他操作

  //userID: 使用者ID，用于伺服器身份驗證

  //password: 使用者密碼，用于伺服器身份驗證

  xmlObj.open("POST", url, false);       

  xmlObj.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");  //設定content type，作為表單資料發送

  //Send方法的參數類型可以是字元串、DOM樹或任意資料流，下面有專門讨論發送xml資料的例子。

  xmlObj.send("userId=5");               //發送form資料

  // 在用戶端發送資料的過程中，與伺服器端的互動狀态是不斷的發生變化的，可以通過readyState屬性獲得其互動狀态。

  // 0 (還沒開始)

  // 1 (加載中)

  // 2 (已加載)

  // 3 (資訊互動中)

  // 4 (完成)

  // 可以通過onreadystatechange屬性捕獲事件的變化，可以通過直接建立函數的方法調用，如下

  xmlObj.onreadystatechange = function()

  {

     if(xmlObj.readyState==0)

     {

         alert("還沒開始");

     }

     else if(xmlObj.readyState==1)

     {

         alert("加載中");

     }

  }

  //或者可以直接指定函數名，這個函數是沒有參數的。

  xmlObj.onreadystatechange = readyStateChanged;

  //擷取經過伺服器互動後的狀态，根據傳回狀态，進入不同的處理程式

  if (xmlObj.status == 200)  //是指伺服器處理成功！

  {    

      alert("OK");

  }

  else          //是指伺服器處理失敗！

  {  

      alert("FLASE");

  }

  var returnText = xmlObj.responseText;  //傳回的值作為字元串來處理

  var returnStream = xmlObj.responseStream;   //傳回的值作為Stream

  var returnXml = xmlObj.responseXML;  //傳回的值作為XMLDocument對象來處理，可以通過 JavaScript DOM 的相關函數處理

  //下面是對xml資料傳輸的例子：

  //對于responseXML的情況，假設我們通過調用後傳回來的xml檔案結構如下：

  // <?xml version="1.0" ?>

  // <root>

  //  I'm a test.

  // </root>

  //下面是一個簡單的處理事例：

  //    var returnXml = xmlObj.responseXML;

  // var rootNode = xmldoc.getElementsByTagName('root').item(0);

  // alert(rootNode.firstChild.data);

  //當然，我們也可以把xml資料傳送給伺服器，如下：

  try

  {

      var xmlDoc=new ActiveXObject("MSXML.DOMDocument");  //在IE上建立XML對象

  }

  catch

  {

      try

      {

          var xmlDoc=new ActiveXObject("MSXML2.DOMDocument");

      }

      catch

      {

      }

  }

  flag=xmlDoc.loadXML("");

  newNode =xmlDoc.createElement("XmlHttpTest")

  MarkNode=xmlDoc.documentElement.appendChild(newNode);

  newNode =xmlDoc.createElement("Author")

  newNode.text="Ten";

  MarkNode.appendChild(newNode)

  xmlObj.open("POST",url,false)

  xmlObj.setRequestHeader("Content-Type","text/xml")

  xmlObj.setRequestHeader("Content-Type","gb2312")

  xmlObj.send(xmlDoc);

}

function readyStateChanged()

{

  if(xmlObj.readyState==0)

  {

      alert("還沒開始");

  }

  else if(xmlObj.readyState==1)

  {

      alert("加載中");

  }

}

//-->

</script>