第一個Ajax程式的編寫

     一直都覺得Ajax這個技術很神奇，至少名字挺起來炫，於是我花了點時間粗略學習了下，下面是我的一些記錄，僅供初學者看看。

    什麼是Ajax？如果還沒有接觸過，請訪問此網站：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html。

    Ajax程式在VS 2008中如何編寫？以一個匯率轉換為例，開啟Vs 2008，建立個網站，增加一個aspx或者html頁面即可開始動手（本人用的html）。

首先在html中增加一段js代碼，寫一個函數：

View Code

     function btnHuiLv_Click()        

    {    

var amout = document.getElementById("amount").value;

var moneytype = document.getElementById("moneytype").value;

var url = "HuiLv.ashx?amount="+amount+"&moneytype="+moneytype;

       sendAjax(url);      

    }       

function sendAjaxMsg(url)

    {

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // 建立XMLHTTP對象,該用法只適用於IE核心瀏覽器

if(!xmlhttp)

      {

            alert("建立xmlhttp對象異常");

return false;            

      }

// 準備向伺服器的example.ashx發出post請求，若參數不變，瀏覽器會從緩衝中讀取資料，從而影響Ajax效果，所以以目前時間為參數
      xmlhttp.open("POST",url,false); 

      xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState == 4)// 伺服器返回了 
           {                    

if(xmlhttp.status == 200) // 200成功了，404網頁不存在，204 伺服器成功處理了請求，但沒有返回任何內容。
                {          

var returnValue  = xmlhttp.responseText;// responseText為伺服器返回的文本                    

// 下面做的時將伺服器返回的資訊顯示到網頁

                    ....  ....

                }

else

               {

                    alert("AJAX伺服器返回出錯！");  

                }  

          }

     }

     xmlhttp.send(); 

  }

html.body中的內容有：

View Code

  <div>實現AJAX效果</div>    

<input id="amount" type="text" />    

<select id="moneytype">    

<option value="1">美元</option> 

<option value="2">日元</option>  

<option value="3">港幣</option>    

</select>    

<input id="Button1" type="button" value="tryAjax" onclick="btnHuiLv_Click()" />

<input id="money" type="text" />

 HuiLv.ashx中的關鍵代碼：

View Code

        String amount = context.Request["amount"];
string type = context.Request["moneytype"];
int iAccount = Convert.ToInt32(amount);
if (type == "1")// 美元
        {
            context.Response.Write(iAccount / 7);
        }
else if (type == "2") // 日元
        {
            context.Response.Write(iAccount * 10);
        }
else // 港幣
        {
            context.Response.Write(iAccount * 1.5);
        }

     現在基本上實現了Ajax效果，你會看到你的瀏覽沒有重新整理然而卻與伺服器互動了資訊。

     以上Ajax效果只在IE瀏覽器裡測試，其他瀏覽器不相容ActiveXObject方式。若要做到相容各主流瀏覽器，只需在js裡加一些判斷

即可。

     例如：

        var xmlHttpRequest; 
//  判斷是否把XMLHttpRequest實現為一個本地javascript對象 
        if(window.XMLHttpRequest){ 
        xmlHttpRequest = new XMLHttpRequest(); 
        }else if(window.ActiveXObject){  //  判斷是否支援ActiveX控制項 
        try{ 
//  通過執行個體化ActiveXObject的一個新執行個體來建立XMLHttpRequest對象 
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  //  msxml3以上版本 
        }catch(e){ 
try{ 
//  通過執行個體化ActiveXObject的一個新執行個體來建立XMLHttpRequest對象 
              xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");  //  msxml3以下版本 
              }catch(e){} 
        } 
        } 
if ( !xmlHttpRequest ) { 
          alert("建立Ajax對象失敗，您將無法正常瀏覽網頁"); 
        } 
return xmlHttpRequest; (此代碼摘自 http://commandos.blog.51cto.com/154976/115723)

到此，相信您已經有能力獨立完成Ajax了。