简单ASP.NET AJAX 客户端应用：用JS直接调用WebServices方法

[本文章引用自http://ajax.asp.net]

完成本例功能，你需要
1.Microsoft Visual Studio 2005 and the .NET Framework version 2.0.
2.The ASP.NET AJAX package installed on your computer.
3.An ASP.NET AJAX Web site.
4.Creating a Web Service with a Single Method

第一步  
建立一个 ASP.NET Web service 包含一个[WebMethod] 方法 以被客户端所调用 
To create a new Web Service
In Solution Explorer, right-click the name of the site, and then click 
Add New Item.
In the Add New Item dialog box, under Visual Studio installed templates,
select Web Service.
Name the file HelloWorldService.asmx and clear the Place code in separate file check box.
Select the language you want to use.
Click Add.
Add code to create a HelloWorld method in the Web service that returns
the current date and time. The code must take a string as an input and
return a formatted string with the current time and a message.

The following example shows a complete Web service that includes the
HelloWorld method:
CS

<% @ WebService Language = " C# "  Class = " Samples.AspNet.HelloWorldService "   %>
using  System;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  Microsoft.Web.Script.Services;

namespace  Samples.AspNet  {

 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [ScriptService]
 public class HelloWorldService  :  System.Web.Services.WebService {

   [WebMethod]
   public string HelloWorld(String query)
   {
     string inputString = Server.HtmlEncode(query);
     if(!String.IsNullOrEmpty(inputString))
     {
       return String.Format("Hello, you queried for {0}. The "
         + "current time is {1}", inputString, DateTime.Now);
     }
     else
     {
       return "The query string was null or empty";
     }
   }
 }
}

Save and close the file.
第二步 Creating a Web Page with a Remote Procedure Call
In this part of the walkthrough you will create an ASP.NET page
and add the client script needed to call the Web service you created earlier.

To create a Web Page
Add a new ASP.NET page to your project and name it AjaxScript.aspx.

note
Be sure that you clear the Place code in separate file check box.
For this walkthrough, you must create a single-file ASP.NET Web page.
Switch to Source view.
In the directive, set the Title attribute to ASP.NET AJAX Script
Walkthrough as shown in the following example:

=============================================
CS
<%@ Page Language="C#" Title="ASP.NET AJAX Script Walkthrough" %>
Copy the following markup and paste it into the file beneath the @ Page directive.
Note the addition of the <asp:ScriptManager> element,
which automatically adds the references to the required JavaScript files
 that provide ASP.NET AJAX functionality.
In this case, the element also adds a reference to the Web service file.

CS

<! 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" >
     < title ="ASP.NET AJAX Script Walkthrough"   />
     < 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  id ="Form1"  runat ="server" >
       < asp:ScriptManager  runat ="server"  ID ="scriptManager" >
       < Services >
         < asp:ServiceReference  path ="~/HelloWorldService.asmx"   />
       </ Services >
       </ asp:ScriptManager >
      < div >
       Search for
        < input  id ="SearchKey"  type ="text"   />
        < input  id ="SearchButton"  type ="button"  value ="Search"
         onclick ="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 ASP.NET AJAX client library provides the background services

and support to make the remote call work.

To write scripts to call the Web Service
In the AjaxScript.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:

CS

< 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 >

 

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.

CS

<% @ Page Language="C#" Title="ASP.NET AJAX Script Walkthrough"  %>
<! 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" >
     < title ="ASP.NET AJAX Script Walkthrough"   />
     < 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  id ="Form1"  runat ="server" >
    < asp:ScriptManager  runat ="server"  ID ="scriptManager" >
       < Services >
         < asp:ServiceReference  path ="~/HelloWorldService.asmx"   />
       </ Services >
    </ asp:ScriptManager >

      < div >
       Search for
        < input  id ="SearchKey"  type ="text"   />
        < input  id ="SearchButton"  type ="button"  value ="Search"
         onclick ="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.