如果你曾经依照微软英文 Hands-On Lab 文件练习过，有可能会如坠五云中，因为范例步骤说明切得过于零碎，故笔者将本范例稍加整理得较为易懂，但是由于原始范例功能太过简化，并且有两个小缺点：
(1) 有 Button Click 动作；
(2) 只回传系统时间不够明了。
因此对于初次接触 AJAX 或 Atlas Framework 的朋友可能会分不清这样的东西到底能干嘛？跟原来 Postback 技术好像差异不大，为了让各位了解二者之间的真正差异，我将范例稍做改写：
(1)在 Client 端的“input”控件中加入了“onkeyup”事件，以便在键盘释放后呼叫后端 Web Service 的 JavaScript 指令，以 TextBox 中输入的姓名当做参数传给 Web Service；
(2) 后端 Web Service 透过 ADO.NET 查询 Northwind 北风数据库，传回相符的使用者个人详细数据
(3)最后索性连 Button 按钮都舍弃，让您更能体会什么是 AJAX 异步技术。
本范例是用传统的 JavaScript 以异步的方式呼 Web Service，而这个 Web Service 会以 ADO.NET 查询北风数据库中的 Employees 员工数据表，并且将符合条件的员工资料回传给 Client 端画面显示。
虽然简化来讲只是在做 Client 端与 Server 端两个部分，但总共可分为三个步骤，以下是说明（建议全程以复制并贴上程序代码来进行，纯粹体验 Atlas 威力）：
Step 1：建立 Master Page
这个 Master Page 将会被前四个范例所使用到，MasterPage.master 其程序代码如下：
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<asp:contentplaceholder runat="server" ID="ScriptIncludes">
<atlas:script id="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
<atlas:script id="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
<atlas:script id="Script3" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />
<atlas:script id="Script4" runat="server" Path="~/ScriptLibrary/AtlasCore.js" />
<atlas:script id="Script5" runat="server" Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />
</asp:ContentPlaceHolder>
<link rel="stylesheet" type="text/css" href="site.css" />
<asp:contentplaceholder runat="server" ID="Head" />
</head>
<body>
<asp:contentplaceholder id="Main" runat="server">
</asp:contentplaceholder>
</body>
</html>
程序说明：
(1) 各位可以看到 Master Page 里面引入了一堆 <Atlas:Script>，其目的是为了达成浏览器（跨平台）兼容性，不必为了不同浏览器而必须撰写数套网页程序，请回想第一期文章曾谈到：「Libraries 函式库会自动处理不同浏览器的兼容性问题，免除了撰写特定浏览器的 Scripts 的必要性。」因此从这点就可以察知 Atlas Framework 不是随便说说画大饼而已，确实是依据当初所规划的蓝图在进行。
(2) 而 ScriptLibrary 则是改良过的 JavaScript 函式库，支持继承、封装、接口等诸多对象导向的特性，是 Atlas Framework 程序运作非常重要的一部分
(3) Master Page 并非是必要的，只不过是借用 Master Page 机制而达成加入 Atlas Script 及布景主题的目的。
Step 2：建立 default.aspx 内容页程序
建立使立使用 Master Page 的 default.aspx 内容页，里面主要有 Text 输入与信息显示，外加两个 JavaScript Function，以便调用 EmployeeService.asmx WEB服务，程序如下：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="教书育人毁人不倦之atlas范例一" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
<form action="">
<div>
请输入员工姓名：
<input id="inputName" type="text" onkeyup="DoSearch()"/>
</div>
</form>
<hr style="width: 300px" />
<div>
<span id="Results"></span>
</div>
<script type="text/JavaScript" src="EmployeeService.asmx/js">
</script>
<script type="text/JavaScript">
function DoSearch()
{
var SrchElem = document.getElementById("inputName");
Samples.AspNet.EmployeeService.Employee(SrchElem.value, OnRequestComplete);
}
function OnRequestComplete(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</asp:Content>
程序说明：
原先的范例中有 Button 按钮，但笔者为了让各位更真实体验到什么是 AJAX 异步技术，刻意将 Button 按钮拿掉，但在input控件中加入了onkeyup事件：
<input id="inputName" type="text" onkeyup="DoSearch()"/>
以便在键盘释放可以使用javascript调用服务。
Step 3：建立 EmployeeService.asmx WEB服务
本程序作用是将员工基本数据回传给前端，前端收到后会自动进行画面更新，而程序内是透过 ADO.NET 来查询北风数据库中 Employees 数据表的 Web Service。
<%@ WebService Language="C#" Class="Samples.AspNet.EmployeeService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
namespace Samples.AspNet {
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public string Employee(String txtFirstName)
{
SqlConnection conn = new SqlConnection("data source=.;initial catalog=Northwind;user id=sa;password=89690");
conn.Open();
SqlCommand cmd = new SqlCommand("select EmployeeID,FirstName,City,Address from Employees where FirstName like '" + txtFirstName + "%'", conn);
cmd.Parameters.Add("@FirstName", SqlDbType.NVarChar, 10).Value = txtFirstName;
SqlDataReader dr = cmd.ExecuteReader();
string txtMsg = "";
if (String.IsNullOrEmpty(txtFirstName))
{
txtMsg = "<Font Color='Blue'>请输入姓名</Font>";
}
else
{
txtMsg = "<Font Color='Red'>查无此人！</Font>";
}
int i = 0;
while (dr.Read())
{
if (i == 0)
{
txtMsg = "";
}
txtMsg += "员工代号：" + dr["EmployeeID"] + " ,";
txtMsg += "姓名：" + dr["FirstName"] + " ,";
txtMsg += "居住城市：" + dr["City"] + " ,";
txtMsg += "地址：" + dr["Address"] + " ,";
txtMsg += "<br>";
i++;
}
cmd.Dispose();
dr.Dispose();
conn.Dispose();
return txtMsg; //回传使用者详细数据
}
}
}
程序说明：
(1) 以上是一个典型的 ADO.NET 数据库程序，以 TextBox 所输入的 FirstName 当作参数向数据库查询，并将相符的结果回传给前端。
(2) 数据库账号密码请自行修改成您练习环境的数据库账号密码。
故各位可以随意输入 Nancy、Steven 或 Robert 等员工 FirstName 姓名测试一下，画面自动就会将员工基本数据回传。
图 2 default 员工基本数据查询结果
default 是建立基本的 ASP.NET Atlas 网页应用程序，基本上是在做两件事：
· 建立 Client 端展现的 ASP.NET 网页（使用 Master Page）。
· 建立 Server 端的 Web Service。
以上程序参考了微软atlas的相关资料。