第一个Atlas程序－异步调用Webservice-优快云博客

本文介绍如何使用Atlas脚本管理器简化ASP.NET AJAX应用开发。通过示例演示如何创建客户端脚本调用Web服务，并展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		
<%@ Page Language="C#" Title="Atlas Script Walkthrough"  %>

		
<%@ Page Language="VB" Title="Atlas Script Walkthrough"  %>

Copy the following markup and paste it into the file beneath the @Page directive.

Note the addition of the <atlas:ScriptManager> element, which automatically adds the references to the required JavaScript files that provide 'Atlas' functionality. In this case, the element also adds a reference to the Web service file.

<!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 id="Head1" runat="server">
   <atlas:ScriptManager runat="server" ID="scriptManager">
   <services>
   <atlas:servicereference path="~/HelloWorldService.asmx" />
   </services>
   </atlas:ScriptManager>
   <style type="text/css">
   body { font: 11pt Trebuchet MS;
   font-color: #000000;
   padding-top: 72px;
   text-align: center }
  
   .text { font: 8pt Trebuchet MS }
   </style>
  
  </head>
  <body>
  <form runat="server">
   <div>
   Search for
   <input id="SearchKey" type="text" />
   <input id="SearchButton" type="button" value="Search"
   οnclick="DoSearch()" />
   </div>
  </form>
  <hr style="width: 300px" />
  <div>
  <span id="Results"></span>
  </div> </body>
</html>

Save the file, but do not close it yet.

Now you will add client-side script that calls the remote Web service you created. The 'Atlas' client library provides the background services and support to make the remote call work.

To write scripts to call the Web service

In the AtlasScript.aspx page, following the <div> element created in the previous task, paste the following code to call the Web service and display the results in the page:

<script type="text/javascript">

function DoSearch()
 {
 var SrchElem = document.getElementById("SearchKey");
 //异步调用Web服务，传递两个事件的回调函数：完成之后(也可以有OnTimeOut处理)
 HelloWorldService.HelloWorld(SrchElem.value, OnRequestComplete); 
 }

 //得到返回值.这个result是个objext类型的，可以传递一个类的实例过去,比如DataTable。
 function OnRequestComplete(result)
 {
 var RsltElem = document.getElementById("Results");
 RsltElem.innerHTML = result;
 }
</script>

The DoSearch function calls the remote method in the Web service, passing the value that the user enters in the text box, and passing the name of a callback function. The callback function is necessary because you are making an asynchronous call to the Web service, and you must provide a mechanism for the Web service to notify the client when the call returns. The name of the local callback function (OnRequestComplete) is arbitrary, but for the remote call to work, it must match the name of the callback function in the page. You can optionally provide a third parameter that contains the name of a function to be called if the server request times out while trying to call the remote method.

The OnRequestComplete function is called when the asynchronous call is completed. The function takes the result parameter, which is used to pass the return value of the Web service call. In the example, you display the value of the result parameter as the innerHTML property of the <span> element.

Make sure that the code following the @Page directive looks like the following example, and then save and close the file.

<!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 id="Head1" runat="server">
  <atlas:ScriptManager runat="server" ID="scriptManager">
  <services>
  <atlas:servicereference path="~/HelloWorldService.asmx" />
  </services>
  </atlas:ScriptManager>
  <style type="text/css">
  body { font: 11pt Trebuchet MS;
  font-color: #000000;
  padding-top: 72px;
  text-align: center }
 
  .text { font: 8pt Trebuchet MS }
  </style>
 
 </head>
 <body>
 <form runat="server">
  <div>
  Search for
  <input id="SearchKey" type="text" />
  <input id="SearchButton" type="button" 
    value="Search" 
  οnclick="DoSearch()" />
  </div>
 </form>
 <hr style="width: 300px" />
 <div>
  <span id="Results"></span>
 </div>
 <script type="text/javascript">
 
  function DoSearch()
  {
  var SrchElem = document.getElementById("SearchKey");
  Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value,
  OnRequestComplete);
  }
 
  function OnRequestComplete(result)
  {
  var RsltElem = document.getElementById("Results");
  RsltElem.innerHTML = result;
  }
 
 </script>
 </body>
</html>

You can now test your page.

To test the page

Run the AtlasScript.aspx page.
Type some text into the search box, and then click the Search button. The text is returned from the HelloWorld method in the Web service and displayed in the page.

来源：http://atlas.asp.net/docs/Walkthroughs/GetStarted/Basic.aspx