Ajax初體驗(一)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax(Asynchronous JavaScript and XML),按我的理解,就是非同步執行的JavaScript and XML,它的核心是XMLHttpRequest,是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它帶給使用者的體驗就是頁面無重新整理。最簡單的應用象Gmail中，發信時輸入對方郵件地址時，出現的友好提示。

Ajax的網站：
http://www.schwarz-interactive.de/
ajax的google上的中文討論群組:
http://groups.google.com/group/AjaxCn
E文的：
http://groups.google.com/group/ajaxpro

接下來我做這樣一個程式，在一個文字框中輸入字元，文字框下邊就提示最和它匹配的內容。效果類似Gmail的輸入郵件地址時，下邊出現的提示。在這兒，提示內容提取Sql server 2000的Northwind庫customers表Country欄位的內容。在資料未載入完成前，顯示Loading...這樣的提示。

1.先下載http://www.schwarz-interactive.de/download/5.11.4.2.zip
解壓後有AjaxPro.dll，AjaxPro.2.dll檔案，AjaxPro.2.dll應該是for .net 2.0的。
我用的是vs2003.net所以用AjaxPro.dll。
2.把AjaxPro.dll複製到web應用程式的bin目錄，在項目中添加對AjaxPro.dll的引用
3.web.config的<system.web>節中加入：
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
意思是將ajaxpro路徑下的副檔名為.ashx的檔案的HTTP POST和HTTP GET請求映射到類AjaxPro.AjaxHandlerFactory，該類在檔案AjaxPro.dll中的程式集AjaxPro中。httpHandlers元素說明詳見msdn>>

4.添加一個web表單test.aspx，切換到cs檔案,添加引用:

using System;
using System.Data;
using System.Data.SqlClient;

using AjaxPro;

5.Page_Load中註冊:

private void Page_Load(object sender, System.EventArgs e)
    {
                 Utility.RegisterTypeForAjax(typeof(test));
    }

此處test是Page_Load所在類的完整的命名空間(namespace test)。

6.從Sql server 2000的Northwind庫裡面customers表中提出Country欄位的內容。
代碼如下：

[AjaxMethod]
        public string getData( string inputString )
        {
            System.Threading.Thread.Sleep(1000); //進程睡眠(延時)1秒
            string temp = "";
            if (inputString != "")
            {
                string sqlStr = "SELECT Country FROM Customers where Country like '%" +inputString+"%'";
                SqlConnection conn = new SqlConnection(@"server=.;database=NorthWind;User ID=sa;password=123;Persist Security Info=true;");
                SqlCommand cmd = new SqlCommand(sqlStr,conn);
                conn.Open();
                SqlDataReader myReader = cmd.ExecuteReader();
                try
                {
                    while (myReader.Read())
                    {
                        temp += myReader.GetString(0).ToLower().Replace(inputString.ToLower(),"<font color=red>"+inputString+"</font>")+"<br>" ; //把匹配的內容替換為紅色顯示
                    }
                }
                finally
                {
                    myReader.Close();
                    conn.Close();
                }
            }
            return temp;
        }

注意：在該方法前要加 [AjaxMethod]，還有
System.Threading.Thread.Sleep(1000);
為了看到loading的效果，我有意讓進程延時1秒。

7. 進入test.aspx的html編輯檢視，<form>中加入如下代碼：

<div id="loadinfo" style="visibility:hidden;position:absolute;left:168px;top:19px;background-color:Red;color:White;font-family: Verdana;font-size: 12px;">Loading</div>
<INPUT type="text" id="txtInput" onKeyUp="javascript:doTest2();void(0);">

<div id="Layer1" style="position:absolute; left:10px; top:38px; width:150px; height:102px; z-index:1; background-color: #ECF5FF; border: 1px solid #666666; visibility: hidden;overflow: auto;"></div>

8.在test.aspx的<head>區加入以下代碼：

其中test.test.onLoading是namespace.class.onLoading的格式，onLoading是ajax內定這麼寫的。參數b是一個bool值,當請求的類正在執行時，結果為true，否則為false。用一個三元運算式控制loading層(id為loadinfo)的顯示和隱藏。
test.test.getData中,getData應該與後台代碼中取資料的類名一致，但是注意一點，結果的返回用doTest2_callback函數的參數res按收。
在doTest2_callback(res)中，把獲得的資料顯示到Layer1層。這兒，當返回的內容為空白時，Layer1層不顯示。

9.完成後的完整代碼 Ajaxtest.rar

10，編譯運行程式。輸入內容看一下效果。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More