標籤：style blog http java color 使用
我們在Web開發中經常會接觸到Ajax技術，同時Ajax技術也有很多種實現方式，那麼，我們今天從第一種方式說起：ASP.NET原生控制項實現Ajax。
ASP.NET原生控制項用於Ajax技術的主要是UpdatePanel和ScriptManager，前者顧名思義，是一個可以用於盛放內容的容器，用於實現頁面的局部更新，在使用的時候直接將需要更新的內容放入即可。後者用於調用一些服務和指令碼：例如我們本次Demo中使用JavaScript調用WebService服務。
本次Demo主要包含一個頁面，一個Web服務（WebService）和一個資料通用操作類（userHelper）來實現頁面無重新整理檢測註冊時暱稱是否存在的功能。
首先，我們需要建立一個Web頁面（此處選用WebForm），大致代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %><!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>註冊</title> <script type="text/javascript"> function check() { var Name = document.getElementById("txtName").value; if (Name == "") { alert("暱稱不可為空！"); } else { WebApplication1.WebService1.CheckName(Name, callbackCheck); function callbackCheck(result) { if (result == false) { document.getElementById("checkFont").innerHTML = "<span>該暱稱已存在！請重新輸入！</span>"; } else { document.getElementById("checkFont").innerHTML = "<span>恭喜！該暱稱可以使用！</span>"; } } } } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="scriptManager"> <Services> <asp:ServiceReference Path="~/WebService1.asmx" /> </Services> </asp:ScriptManager> <asp:UpdatePanel ID="Upnl" runat="server" UpdateMode="Always"> <ContentTemplate> <div> 暱稱：<asp:TextBox ID="txtName" runat="server"></asp:TextBox><div id="checkFont"> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnCheck" /> <asp:PostBackTrigger ControlID="btnReFresh" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="btnCheck" runat="server" OnClientClick="check();" Text="檢測暱稱" /> <asp:Button ID="btnReFresh" runat="server" Text="重新整理頁面" /> </form></body></html>
我在這個頁面中放入了一個ScriptManager，同時引用了一個WebService，然後將需要更新的部分放入了UpdatePanel。此外還有兩個Button，第一個用於檢測暱稱，第二個用於重新整理頁面。大家看過代碼之後會發現我在UpdatePanel設定時加入了一個Triggers，那麼這個是幹什麼的呢？擷取或設定觸發對 UpdatePanel 控制項進行更新的回傳控制項事件。可以看到，我將檢測暱稱的Button設定為AsyncPostBackTrigger模式，此為點擊按鈕時不重新整理整個頁面，只重新整理UpdatePanel中的內容，而第二個按鈕設為PostBackTrigger模式，則會重新整理整個頁面。
在第一個檢測暱稱的按鈕點擊時會調用一個js方法：check()，在check()函數中，我們首先去擷取TextBox中使用者輸入的名稱，然後將名稱傳入js調用的WebService方法中進行操作，得到結果後再根據結果去設定div要顯示的內容，如果存在則傳回值為false。這裡有一個js回呼函數的概念：回呼函數用於在非同步作業中擴充第一個函數的功能，我們此處是為了在返回結果之後設定div的innerHTML的值。如果不使用回呼函數而直接使用同步的話，可能會不執行函數的內容。
接下來是WebService，在建立WebService時，需要注意將[System.Web.Script.Services.ScriptService]這行代碼的注釋取消掉，VS2010中建立後會提示使用ASP.NET
Ajax從指令碼中調用此Web服務時就需要這樣，否則會調用不到該方法。WebService中代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace WebApplication1{ /// <summary> /// WebService1 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。 [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public bool CheckName(string Name) { return userHelper.CheckName(Name); } }}
我們此處調用的CheckName方法，源自於資料通用類中的CheckName方法，userHelper中實現方法代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;using System.Data.SqlClient;namespace WebApplication1{ public class userHelper { public static bool CheckName(string Name) { string Con = @"Data Source=205ZHANGXK\SQLEXPRESS;Initial Catalog=MyQQ;Connect Timeout=30;Trusted_Connection=true"; using (SqlConnection sqlCon = new SqlConnection(Con)) { string Sql = "select count(*) from users where NickName=‘" + Name + "‘"; sqlCon.Open(); SqlCommand cmd = sqlCon.CreateCommand(); cmd.CommandText = Sql; int res = int.Parse(cmd.ExecuteScalar().ToString()); if (res == 1) { return false; } else { return true; } } } }}
我在操作時串連了本地的資料庫MyQQ，該方法實現即為尋找名稱，然後返回受影響的行數並返回結果。下面我們開始調試代碼：
我們可以看到資料庫中已經存在如下11條暱稱，在運行時我們輸入“豆豆”並點擊檢測暱稱按鈕，會發現代碼進入到WebSerivce中：
此時說明js指令碼調用WebService方法已經成功，接下來會執行通用操作類中的方法：
和我們意料之中相同，“豆豆”這個暱稱已經在資料庫存在，接下來我們看看最終的結果：
在頁面上已經出現了我們預期的結果，我們再來試試輸入另外一個不存在的暱稱：
也已經達到了我們預期的效果。由於局部重新整理的圖不太容易截到，這裡就無法為大家呈現了。我們大家都知道伺服器端Button在點擊時都會出現響應回傳，因此點擊另外一個重新整理頁面的按鈕，頁面會有明顯的閃爍（整個頁面全部重新整理），這也體現了Ajax技術帶來的優勢，提升了使用者的體驗度。
我們通過一個簡單的Demo重現了ASP.NET 原生控制項實現Ajax的功能，這也體現了ASP.NET本身封裝的強大之處，同時使用起來也很方便。但是由於ScriptManager和UpdatePanel控制項本身為伺服器端控制項，在一定程度上會產生一些垃圾代碼，而且在請求時會產生整個頁面的控制項樹，因此在大量使用的情況下會導致資源的佔用率很高，這也是它本身的缺點。下次我會為大家帶來Ajax的另一種實現方式：JQuery內建的ajax()方法結合ashx一般處理常式實現，這是一種輕量級的實現方式。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
