AJax 技術是目前網頁流行的趨勢，在工作上也時常運用此技術．那什麼是 AJax 呢？節錄一段 WIKI 上的 AJax 文章如下： AJAX 全稱為「Asynchronous JavaScript and XML」（非同步JavaScript和XML），是一種創建互動式網頁應用的網頁開發技術。根據Ajax提出者Jesse James Garrett　建議，它：

  • 使用XHTML+CSS來表示資訊；
  • 使用JavaScript操作DOM（Document Object Model）進行動態顯示及互動；
  • 使用XML和XSLT進行資料交換及相關操作；
  • 使用XMLHttpRequest物件與Web伺服器進行非同步資料交換；
  • 使用JavaScript將所有的東西繫結在一起。
  • 使用SOAP以XML的格式來傳送方法名和方法參數。

 　　對架構有興趣的網友再自行細讀．接下來我們要以實作來瞭解AJax的運作，在實作之前再說明一下， JavaScript要放在網頁中的兩種模式：

第一種：JavaScript 嵌入 HTML 中的作法，有下列兩種模式

A: <script type="text/javascript"> .code </script>
B: <script type="text/javascript" src="url"></script>

建議使用 B 為宜，因為這樣程式碼分離，閱讀及 Debug 都較為方便．

第二種：搭配 XHTML，若是搭配嚴謹的XHTML格式則必須使用 cdata 將 JavaScript 用註解格式封裝 

<script type="“text/javascript”">
<![CDATA[//>
<!— Javascript Code here … //-->
<!]]>
</script>

AJAX 處理的順序大致可以分成下列五個步驟

1.Create the object : XMLHttpRequest
2.Set the readystatechange event trigger
3.Open the Request
4.Send the Request
5.Check the readyState property

整個架構圖如下：

AjaxConcept.png  

 　　下面就舉實例來說明 AJax 這五個步驟，在這個實例中需要兩個檔案 AJax.html & HelloAjax.txt，透過 AJax.html 是來取得網站內 HelloAjax.txt 檔案裡的資料。  

AJax.html 檔案

<html>
<head>
<script type='text/javascript'>  
var myXmlHttp;
function createXmlHttpObj(){
   if(window.XMLHttpRequest) {
      myXmlHttp = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
      myXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }
}

function handleStateChange(){
   var txtresp;
   var xmlresp;
   if(myXmlHttp.readyState == 4) {
      if(myXmlHttp.status == 200) {
    //以純文字方式取回伺服器回傳資料
   txtresp = myXmlHttp.responseText;
   //以 XML 方式取回伺服器回傳資料
    xmlresp = myXmlHttp.responseXML;
   //5.Check the readyState property
    if (txtresp) {
    document.getElementById("myTxtResp").innerHTML = txtresp;
      }     
     }  
 }
}
function sendRequest(){
 // 1.Create the object : XMLHttpRequest   
 createXmlHttpObj();  
 if(myXmlHttp) {      
  // 2.Set the readystatechange event trigger      
  myXmlHttp.onreadystatechange = handleStateChange;      
  // 3.Open the Request      
  myXmlHttp.open('get', 'HelloAjax.txt');      
  // 4.Send the Request      
  myXmlHttp.send(null);  
 }else {
   alert("您的瀏覽器不支援這個Ajax程式的功能");
 }
}
</script>
</head>
<body>
    <input value="click me(介紹 AJax 的功能)" onclick="sendRequest();" type="button"><br>
    <a href="#" onClick="sendRequest();" >click me(介紹 AJax 的功能)</a>
    <div id="myTxtResp"></div>
</body>
</html>

HelloAjax.txt 檔案

Hello AJax
這是由 AJax 技術取得伺服器後端 HelloAjax.txt 的檔案資料
arrow
arrow
    文章標籤
    Ajax java script
    全站熱搜

    MIS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄