介绍尽管AJAX是种客户端技术，但实际上的开发过程，它经常要调用一个服务器端的过程。通常，网站上的数据是存放在一个关系型数据库中，为了让AJAX更有用处，处理服务器端数据需要一种简单可靠的方法。幸运的是，ASP.NETAJAX提供了一种有效的基础架构来做这件事情，浏览器和服务器在Internet上可以进行AJAX通信。自然而然，WebService在数据传输和客户端/服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过ASP.NETAJAX调用ASP.NETwebservices。软件需求本文所有的范例都是使用ASP.NETAJAXRC版，而且，要在SQLServer2005(Express版即可)上有一个Northwind数据库。范例使用VisualStudio2005作为开发环境。范例场景范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过ASP.NETAJAX功能，调用一个WebService来完成职员表中的数据增、删、改、查。创建一个WebService作为开始，使用VisualStudio2005创建一个新的Web站点，注意把ASP.NETAJAX项目模板添加到新站点对话框，这个对话框包括一个"ASP.NETAJAXEnabledWebSite"模板。图1：新站点创建模板使用"ASP.NETAJAXEnabledWebSite"模板创建的新站点和用普通方法创建的站点区别如下：它的Web.config自动包括许多ASP.NETAJAX专用的配置信息。System.Web.Extensions程序集被添加到引用中。当然，我们可以更改一个普通的Web站点，以使之符合AJAX要求，但模板可以大大简化我们的工作。现在我们创建了一个新的Web站点，添加一个新的webservice并命名为EmployeeService.asmx，EmployeeService将包括5个Web方法MethodNameDescriptionGetEmployees()返回Employees表里的雇员列表。这个列表是一个Employee对象数组GetEmployee()接收EmployeeID参数返回Employee对象的详细信息Insert()给Employees表里增加一个新的雇员信息Update()更新Employees表里的某个雇员信息Delete()删除Employees表里的某个雇员信息表1：EmployeeService中的Web方法GetEmployees()和GetEmployee()方法以Employee对象的形式返回数据，因此，首先创建一个Employee类。右键单击App_Code文件夹，选择“添加新项…”，添加一个叫Employee的类，下面显示Employee类的全部代码：publicclassEmployeeINCLUDEPICTURE\d""{privateintintEmployeeID;privatestringstrFirstName;privatestringstrLastName;publicintEmployeeIDINCLUDEPICTURE\d""{getINCLUDEPICTURE\d""{returnintEmployeeID;}setINCLUDEPICTURE\d""{intEmployeeID=value;}}publicstringFirstNameINCLUDEPICTURE\d""{getINCLUDEPICTURE\d""{returnstrFirstName;}setINCLUDEPICTURE\d""{strFirstName=value;}}publicstringLastNameINCLUDEPICTURE\d""{getINCLUDEPICTURE\d""{returnstrLastName;}setINCLUDEPICTURE\d""{strLastName=value;}}}Employee类申明三个Private变量来分别存放employeeID,firstname和lastname，三个变量再封装在三个public属性中：EmployeeID,FirstName和LastName。打开web.config文件，添加<connectionStrings>部分如下：<connectionStrings><addname="connstr"connectionString="datasource=.\sqlexpress;initialcatalog=northwind;integratedsecurity=true"/></connectionStrings>这部分存放数据库链接字符串，用于指向Northwind数据库，确保修改SqlServer名称、IP地址以及验证方式以和我们的开发环境相符。现在，打开EmployeeService.cs添加如下代码：privatestringstrConn="";publicEmployeeService()INCLUDEPICTURE\d""{strConn=ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;}代码使用了ConfigurationManager类来读取配置文件中的数据库链接字符串，并存放在一个类级别的变量strConn中，这个变量将被下面的所有WebMethod所使用。现在，添加GetEmployees()webmethod：[WebMethod]publicEmployee[]GetEmployees()INCLUDEPICTURE\d""{SqlConnectioncnn=newSqlConnection(strConn);cnn.Open();SqlCommandcmd=newSqlCommand();cmd.Connection=cnn;cmd.CommandText="selectemployeeid,firstname,lastnamefromemployees";SqlDataReaderreader=cmd.ExecuteReader();List<Employee>list=newList<Employee>();while(reader.Read())INCLUDEPICTURE\d""{Employeeemp=newEmployee();emp.EmployeeID=reader.GetInt32(0);emp.FirstName=reader.GetString(1);emp.LastName=reader.GetString(2);list.Add(emp);}reader.Close();cnn.Close();returnlist.ToArray();}代码创建了SqlConnectionandSqlCommand对象，然后执行SELECT查询，以获取Employees表中EmployeeID,FirstName和LastName字段。结果通过SqlDataReader返回。然后，创建一个generic-basedEmployee数组，通过While循环，给每个Employee实例的属性赋值。当While循环完毕的时候，关闭SqlDataReader和SqlConnection。GetEmployees()方法返回的类型是Employee数组。因此，genericList使用List类中的ToArray()方法来转换成Employee数组。现在，添加一个GetEmployee()webmethod如下：[WebMethod]publicEmployeeGetEmployee(intpEmployeeId)INCLUDEPICTURE\d""{SqlConnectioncnn=newSqlConnection(strConn);cnn.Open();SqlCommandcmd=newSqlCommand();cmd.Connection=cnn;cmd.CommandText="selectemployeeid,firstname,lastnamefromemployeeswhereemployeeid=@id";SqlParameterid=newSqlParameter("@id",pEmployeeId);cmd.Parameters.Add(id);SqlDataReaderreader=cmd.ExecuteReader();Employeeemp=newEmployee();while(reader.Read())INCLUDEPICTURE\d""{emp.EmployeeID=reader.GetInt32(0);emp.FirstName=reader.GetString(1);emp.LastName=reader.GetString(2);}reader.Close();cnn.Close();returnemp;}GetEmployee()webmethod接受一个employeeID参数作为输入，代码和前面的非常相似，但这次只返回一个employee。注意，使用SqlParameter来定义传入的EmployeeID。现在，再添加Insert()、Update()和Delete()webmethods，其中，Insert()webmethod以要添加的Employee的firstname和lastname作为参数，Update()webmethod以要更新的employeeID以及新的firstname和lastname作为参数，并执行UPDATE语句，Delete()webmethod以要删除的employeeID作为参数，然后执行DELETE语句[WebMethod]publicintInsert(stringpFirstName,stringpLastName)INCLUDEPICTURE\d""{SqlConnectioncnn=newSqlConnection(strConn);cnn.Open();SqlCommandcmd=newSqlCommand();cmd.Connection=cnn;cmd.CommandText="insertintoemployees(firstname,lastname)values(@fname,@lname)";SqlParameterfname=newSqlParameter("@fname",pFirstName);SqlParameterlname=newSqlParameter("@lname",pLastName);cmd.Parameters.Add(fname);cmd.Parameters.Add(lname);inti=cmd.ExecuteNonQuery();cnn.Close();returni;}[WebMethod]publicintUpdate(intpEmployeeId,stringpFirstName,stringpLastName)INCLUDEPICTURE\d""{SqlConnectioncnn=newSqlConnection(strConn);cnn.Open();SqlCommandcmd=newSqlCommand();cmd.Connection=cnn;cmd.CommandText="updateemployeessetfirstname=@fname,lastname=@lnamewhereemployeeid=@id";SqlParameterfname=newSqlParameter("@fname",pFirstName);SqlParameterlname=newSqlParameter("@lname",pLastName);SqlParameterid=newSqlParameter("@id",pEmployeeId);cmd.Parameters.Add(fname);cmd.Parameters.Add(lname);cmd.Parameters.Add(id);inti=cmd.ExecuteNonQuery();cnn.Close();returni;}[WebMethod]publicintDelete(intpEmployeeId)INCLUDEPICTURE\d""{SqlConnectioncnn=newSqlConnection(strConn);cnn.Open();SqlCommandcmd=newSqlCommand();cmd.Connection=cnn;cmd.CommandText="deletefromemployeeswhereemployeeid=@id";SqlParameterid=newSqlParameter("@id",pEmployeeId);cmd.Parameters.Add(id);inti=cmd.ExecuteNonQuery();cnn.Close();returni;}这就完成了webservice的创建。到目前为止，还没有做任何和AJAX特性相关的任何工作，现在，时机已经成熟，我们通过下面的代码更改webservice类的定义：usingSystem.Web.Script.Services;INCLUDEPICTURE\d""INCLUDEPICTURE\d""[WebService(Namespace="")][WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)][ScriptService]publicclassEmployeeService:System.Web.Services.WebServiceINCLUDEPICTURE\d""{注意特地标明的黑体字，我们导入了System.Web.Script.Services命名空间，这个命名空间来自System.Web.Extensions程序集，这个命名空间提供了[ScriptService]属性，这将使webservice可以被来自客户端的JavaScript(如ASP.NETAJAX)调用。好了，我们开始准备从ASP.NETAJAX调用WebService了！如何调用WebService这部分，我们将创建一个Web页面作为数据输入，通过调用刚刚创建的WebService来操作Employees表。作为开始，我们先添加一个EmployeeServiceClient.aspx页面，打开工具箱，选择View>Toolbox菜单，在工具箱上，选中AJAXExtensions这样的节点（见图2）图2:增加模板后的新站点创建对话框AJAXExtensions部分显示一个Web页面上所有可以使用的ASP.NETAJAX组件。所有使用ASP.NETAJAX的页面都需要一个ScriptManager组件。打开ScriptManager属性窗口，定位Services属性，打开Service引用编辑器，如图3：图3:Service引用编辑器点击对话框底部的Add按钮，设置Path属性以指向WebService（EmployeeService.asmx）的虚拟路径，下面的标记将会产生在Web页面文件中：<asp:ScriptManagerID="ScriptManager1"runat="server"><Services><asp:ServiceReferencePath="EmployeeService.asmx"/></Services></asp:ScriptManager>对每个WebService调用，都需要在<asp:ScriptManager>部分添加一个<asp:ServiceReference>元素，此标记把要使用的webservice注册到当前webform上。图4:设计页面表单表单包括一个下拉框(<SELECT>)，用于显示所有的employeeIDs，一旦选中其中一个employeeID，employee的详细信息将显示在2个文本框中，然后可以更新这些信息。如果要添加一个employee，只需要输入firstname和lastname，然后点击“插入”按钮就可以了。同理，如果要删除一个employee，选择下拉框中的employeeID，点击“删除”按钮。在INSERT、UPDATE或者DELETE操作完成后，将会显示成功或者失败的信息。下面是所有的页面代码：<table><tr><tdcolspan="2"><asp:LabelID="Label4"runat="server"Font-Size="X-Large"Text="EmployeeManagement"></asp:Label></td></tr><tr><tdstyle="width:100px"><asp:LabelID="Label1"runat="server"Text="EmployeeID:"></asp:Label></td><tdstyle="width:100px"><selectid="Select1"></select></td></tr><tr><tdstyle="width:100px"><asp:LabelID="Label2"runat="server"Text="FirstName:"></asp:Label></td><tdstyle="width:100px"><inputid="Text1"type="text"/></td></tr><tr><tdstyle="width:100px"><asp:LabelID="Label3"runat="server"Text="LastName:"></asp:Label></td><tdstyle="width:100px"><inputid="Text2"type="text"/></td></tr><tr><tdalign="center"colspan="2"><inputid="Button3"type="button"value="Insert"/><inputid="Button4"type="button"value="Update"/><inputid="Button5"type="button"value="Delete"/></td></tr><tr><tdalign="center"colspan="2"><spanid="lblMsg"style="font-weight:bold;color:red;"></span></td></tr></table>注意：我们没有使用ASP.NET服务器端控件，如DropDownList、TextBox以及Button。取而代之的是，我们用的传统的HTML控件，如：<SELECT>以及<INPUT>。这因为我们要想通过客户端JavaScript调用webservice，而不是通过服务端代码。同理，注意底下的<SPAN>标记，这是用来显示成功或者失败的信息的。下一步，在<head>元素内增加一个<script>部分，添加一个CallWebMethod()的函数：functionCallWebMethod(methodType)INCLUDEPICTURE\d""{switch(methodType)INCLUDEPICTURE\d""{case"select":EmployeeService.GetEmployees(FillEmployeeList,ErrorHandler,TimeOutHandler);break;case"selectone":varselect=document.getElementById("Select1");varempid=select.options[select.selectedIndex].value;EmployeeService.GetEmployee(empid,DisplayEmployeeDetails,ErrorHandler,TimeOutHandler);break;case"insert":vartext1=document.getElementById("Text1");vartext2=document.getElementById("Text2");EmployeeService.Insert(text1.value,text2.value,InsertEmployee,ErrorHandler,TimeOutHandler);break;case"update":varselect=document.getElementById("Select1");varempid=select.options[select.selectedIndex].value;vartext1=document.getElementById("Text1");vartext2=document.getElementById("Text2");varemp=newEmployee();emp.EmployeeID=empid;emp.FirstName=text1.value;emp.LastName=text2.value;EmployeeService.Update(empid,text1.value,text2.value,UpdateEmployee,ErrorHandler,TimeOutHandler);break;case"delete":varselect=document.getElementById("Select1");varempid=select.options[select.selectedIndex].value;EmployeeService.Delete(empid,DeleteEmployee,ErrorHandler,TimeOutHandler);break;}}CallWebMethod()函数就是用来调用webservice的中央控制函数。这个函数接收一个字符串参数用来标识调用的方法，它包括一个switch语句来判断调用的方法，每个case块调用一个webmethod。注意webmethod是如何被调用的：ASP.NETAJAX框架自动创建一个JavaScript代理类，这个代理类和要调用的webservice有相同的名称。因此，上面代码中EmployeeService并不是真正的类，而是一个JavaScript代理类。代理类包括原始webservice中所有的WebMethod。除了原来的webmethod所包括的参数外，每个方法还包括3个额外的参数。第一个参数是一个JavaScript函数，用于当webmethod成功完成时调用的。记住：所有客户端和服务器端的AJAX通信都是异步的，因此，这个函数用来捕获webmethod的返回值。第二个参数是用于发生错误的情况下调用的JavaScript函数。最后，第三个参数是当调用WebService发生超时的情况下调用的JavaScript函数。第一种情况，case("select")，就是简单的调用GetEmployees()方法；第二种情况，case("selectone")，调用GetEmployee()方法，通过传统的JavaScript代码获取下拉框中的employeeID；同理，第三、第四、第五个Case依次调用Insert()、Update()和Delete()方法。上面的代码通过5个JavaScript函数实现相应的webmethod成功调用：FillEmployeeList(),DisplayEmployeeDetails(),InsertEmployee(),UpdateEmployee()以及DeleteEmployee()。每个函数接收一个参数作为webmethod相应的返回值。functionFillEmployeeList(result)INCLUDEPICTURE\d""{varselect=document.getElementById("Select1");for(vari=0;i<result.length;i++)INCLUDEPICTURE\d""{varoption=newOption(result[i].EmployeeID,result[i].EmployeeID);select.options.add(option);}}functionDisplayEmployeeDetails(result)INCLUDEPICTURE\d""{vartext1=document.getElementById("Text1");vartext2=document.getElementById("Text2");text1.innerText=result.FirstName;text2.innerText=result.LastName;varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="";}functionInsertEmployee(result)INCLUDEPICTURE\d""{if(result>0)INCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Employeeaddedsuccessfully!";}elseINCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Erroroccurredwhileaddingnewemployee!";}}functionUpdateEmployee(result)INCLUDEPICTURE\d""{if(result>0)INCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Employeeupdatedsuccessfully!";}elseINCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Erroroccurredwhileupdatingtheemployee!";}}functionDeleteEmployee(result)INCLUDEPICTURE\d""{if(result>0)INCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Employeedeletedsuccessfully!";}elseINCLUDEPICTURE\d""{varlblMsg=document.getElementById("lblMsg");lblMsg.innerText="Erroroccurredwhiledeletingemployee!";}}FillEmployeeList()函数以Employee对象数组作为输入参数，还记得GetEmployees()webmethod返回的Employee对象数组吧。然后对这个数组迭代处理，在每次迭代中，一个新的OPTION元素被创建并添加到下拉框中。DisplayEmployeeDetails()函数以一个Employee对象作为输入，这个Employee对象包括了一个Employee的详细信息，并显示在2个文本框中。InsertEmployee(),UpdateEmployee()和DeleteEmployee()函数以一个整型的数值标明INSERT,UPDATE和DELETE操作所影响的记录数，一个大于0的数值标明操作成功，并在<SPAN>标记内显示一个成功的信息；否则，显示一个错误信息。当页面第一次加载时，需要用现有的employeeID给下拉框赋值，这得通过调用一个特定的名为pageLoad()的函数中实现：functionpageLoad()INCLUDEPICTURE\d""{CallWebMethod("select");}pageLoad()函数在客户端浏览器页面加载时自动调用，最后，错误处理（errorhandler）和超时处理（timeouthandler）函数如下：functionErrorHandler(result)INCLUDEPICTURE\d""{varmsg=result.get_exceptionType()+"\r\n";msg+=result.get_message()+"\r\n";msg+=result.get_stackTrace();alert(msg);}functionTimeOutHandler(result)INCLUDEPICTURE\d""{alert("Timeout:"+result);}TimeOutHandler()函数在任何webmethod调用发生超时的情况下调用。它仅仅显示了一个Alert给用户。ErrorHandler()函数在有错误发生的情况下调用，其输入result参数提供了3个方法：get_exceptionType()、get_message()以及get_stackTrace()。这三个方法分别返回异常类型（typeofexception）、详细错误信息和堆栈跟踪（stacktrace）。这里ErrorHandler()函数也仅仅显示了一个alert给终端用户。测试网页现在，我们已经实现了webservice和客户端应用程序。测试一下吧！运行网页，试着增加、更新、删除一个employee看看，图5显示更新一个employee后的效果：图5:更新Employee后的页面效果要想测试错误处理函数，把初始化数据库链接字符串改成一个空值，然后运行网页看看，这次，就会显示一个警报（alert），如图6：图6:链接字符串错误报警调用外部WebServices这个例子中，EmployeeService也是Web站点的一部分。有时候，我们的程序也许需要调用根本就没有部署在我们的域的webservices。ASP.NETAJAX内部需要依赖XMLHTTP对象，而由于安全原因，是不能和部署在其它外部站点进行通信的。这就意味着上面所说的技术对外部的webservices调用无效。不幸的是，ASP.NETAJAX关于此问题还没有直接的解决方案（至少在RC版本）。然而，微软发布了一个仍在CTP阶段的“Bridge”技术，我们可以使用此技术来调用一个部署在本地的封装（Wrapper）的类，然后在这个类中来调用外部的实际的WebService。在当前的RC版本中，我们可以在我们的WebSite中创建一个WrapperWebService，以它来调用最初的WebService。然后在客户端程序中通过调用WrapperWebService实现通信。下面显示必要的步骤：1.在web站点中添加一个web引用，指向外部的Webservice；2.创建一个本地Webservice；3.在新创建的Webservice中，提供封装的webmethod，这些方法调用外部的WebMethod；4.用本文中所说的方法在客户端应用程序中调用本地新添加的webService。调用ASP.NETWebServices的基础架构ASP.NETAJAX提供了完整的架构以从客户端JavaScript调用ASP.NETwebservices。我们可以轻松地用AJAX把服务器端数据集成进用户响应的Web页面中。而我们所需要做的就是仅仅用[ScriptService]属性来标识webService。ASP.NETAJAX框架会为我们的webservice自动生成JavaScript代理，然后通过使用代理来调用webmethods。