Ajax基本過程

來源:互聯網
上載者:User
 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>第一個使用 Ajax 技術進行局部重新整理的樣本.</title>
   <script type="text/javascript">
    var xmlhttp;
   
    //Ajax的核心思想是: 將資料分類(可以按任何使用者需要的方式分類)然後放在不同的伺服器頁中, 這樣當使用者需要時只要載入需要的那個頁即可.
    //但這裡面還有其他的一些技術: 如非同步響應等.
    function getData()
    {
      //擷取DOM執行個體名
      var city=document.getElementById("txt").value;
     
      //第一步: 建立非同步呼叫對象: 這裡指瀏覽器為: IE瀏覽器.
      //如果是Firefox(或其他非IE)使用 new XmlHttpRequest()進行執行個體化.
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     
      //第二步: 將對象狀態與事件相關聯
      //非同步呼叫 伺服器狀態的變化, 一旦客房端開始與伺服器端進行互動, 要控制客房端的改變, 就需要判斷目前互動的狀態.
      xmlhttp.onreadystatechange=statechange; //注意: 後面的狀態函數名自訂. 但不能跟括弧. 因為是以委託(事件)的方式定義的.
     
      //第三步: 載入資料所在的伺服器頁
      //載入資料所在的伺服器, Ajax擷取資料可以從其他網站擷取, 也可以從本地的XML檔案中擷取.這裡指從另一個網站(網頁)擷取資料.
      xmlhttp.Open("POST","datapage.aspx?city=" +city,true);  //true表示非同步, false表示同步(有時會有意義)
     
      //第三步: 發送請求
      //發送一個HTTP請求.請求的資料可以是有選擇性的.即 Send(params)中可以給參數賦值來選取自己感興趣的資料.不要時使用null或空.
      //當系統調用 Send方法後, 後台與伺服器的互動才真正開始, 狀態編號就開始改變.開發人員可以狀態處理方法中, 處理網站需要的更改.
      xmlhttp.Send();
    }
   
    //狀態改變的處理函數.
    function statechange()
    {
      //判斷非同步呼叫是否已經完成
      if(xmlhttp.readystate==4)
      {
        //判斷完成的提示代碼是否是OK狀態
        if(xmlhttp.status==200)
        {
           //將返回資料作為參數,傳遞給填充方法
           alert("非同步呼叫完成.資料已經接收完成.下面將要給控制項載入擷取來的資料(即處理非同步擷取的資料)!");
          
           //第五步: 處理資料--嚴格地說這裡已不屬性Ajax範圍, 但因其返回資料對象(這裡為xmlhttp.responseText), 固列入.
           //調用下列方法將擷取的資料進行處理(此處為載入到控制項 dropdownlist中.
           FillData(xmlhttp.responseText);
          
            
       //如果是本地的xml檔案, 則應該使用下列語句:
       // document.getElementById("myText").innerHTML=xmlhttp.responseText;
        }
      }
    }
   
    //處理非同步擷取的資料的函數定義體.
    function FillData(strcity)
    {
       document.getElementById("DropDownList1").options.length=0;
      
       var indexofcity;
       var city;
       //切割傳遞來的字串
       while(strcity.length>0)
       {
       //判斷是否是最後一個字串
        indexofcity=strcity.indexOf(",");
        if(indexofcity >0)
        {
        city=strcity.substring(0,indexofcity);
        strcity=strcity.substring(indexofcity+1);
        //填充下拉框
        document.getElementById("DropDownList1").add(new Option(city,city));
        }
        else
        {
        // 如果是最後一個字串
           lastcity=strcity.substring(0,2);
           document.getElementById("DropDownList1").add(new Option(lastcity,lastcity));
           break;
        }
       };
    }
    </script>
</head>
<body>
    <form id="form1" runat="server" method="post">
    <div>
        <table style="width: 463px; height: 152px">
            <tr>
                <td colspan="2" style="font-weight: bold; color: #0000ff; text-align: center">
                    Ajax實現局部重新整理</td>
            </tr>
            <tr>
                <td style="width: 265px">
                    填寫城市名稱</td>
                <td>
                    <!--<asp:TextBox ID="TextBox1" runat="server" Width="252px"></asp:TextBox>-->
                    <input type="text"  id="txt" style="width: 245px"/>
                    </td>
            </tr>
            <tr>
                <td style="width: 265px">
                </td>
                <td>
                    <input id="Button1" style="width: 147px" type="button" value="查詢" onclick="getData()" /></td>
            </tr>
            <tr>
                <td style="width: 265px">
                    選擇地區列表</td>
                <td>
                    <asp:DropDownList ID="DropDownList1" runat="server" Width="255px">
                    </asp:DropDownList></td>
            </tr>
        </table>
   
    </div>
        <br />
        <br />
    </form>
</body>
</html>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.