客户端代码   1 <script type="text/javascript">
  2 function ShowDiv(divid)
  3 {
  4    if (document.layers)
  5    {document.layers[divid].visibility="show";}
  6    else
  7    {document.getElementById(divid).style.visibility="visible";}
  8 }
  9
10 function HideDiv(divid)
11 {
12    if (document.layers)
13    {document.layers[divid].visibility="hide";}
14    else
15    {document.getElementById(divid).style.visibility="hidden";}
16 }
17
18 function BodyLoad()
19 {
20     HideDiv("searchresults");
21     // set focus to the input box
22     document.form1.keyword.focus();
23
24 }
25
26 function ClearResults()
27 {
28     // remove existing rows in results table
29     var resultsdiv = document.getElementById("searchresults");
30     var counter = resultsdiv.childNodes.length;
31     for (var i = counter -1; i >= 0; i--)
32     {
33         resultsdiv.removeChild(resultsdiv.childNodes[i]);
34     }
35 }
36
37 function LoadResults(searchterm)
38 {
39     if (searchterm.length == 0)
40     {
41         // if the input box is empty let's dump all the rows from the results table
42         ClearResults();
43         HideDiv("searchresults");
44         return;
45     }
46
47     // fetch results from server side
48     // this is our actual ajax call
49     Anthem_InvokePageMethod('RetrieveRows',[searchterm] , LoadResultsCallback);
50
51
52 }
53 function LoadResultsCallback(result)
54 {
55     // the xmlhttprequest will return to this function.
56
57     ShowDiv("searchresults");
58     ClearResults();
59
60     // callback results from Ajax call
61     // we'll assign the inbound DataTable
62     // to the items variable
63     var items = result.value;
64
65     var count = items.Tables.stores.Rows.length;
66
67     // we'll create a table object in the DOM
68     var divResults = document.getElementById("searchresults");
69     var tblTable = document.createElement("table");
70     var tablebody = document.createElement("tbody");
71     var tablerow, tablecell, tablenode;
72
73     // loop through each of the rows in the DataTable
74     for (var i = 0; i < count; i++)
75     {
76         var currenttext = items.Tables.stores.Rows[i].Name;
77
78         // we'll create each table row and append it to the
79         // table body
80         tablerow = document.createElement("tr");
81         tablecell = document.createElement("td");
82             // build the cell attributes and functions
83             tablecell.onmouseover = function(){this.className='mouseOver';};
84             tablecell.onmouseout = function(){this.className='mouseOut';};
85             tablecell.setAttribute("border", "0");
86             tablecell.onclick = function(){ReplaceInput(this);};
87         tablenode = document.createTextNode(currenttext);
88         tablecell.appendChild(tablenode);
89         tablerow.appendChild(tablecell);
90         tablebody.appendChild(tablerow);
91     }
92
93     // add the table body to the table
94     tblTable.appendChild(tablebody);
95     // add the table to the div tag
96     divResults.appendChild(tblTable);
97 }
98
99 function ReplaceInput(tablecell)
100 {
101     // swap Input box value with the value selected by
102     // the users mouse click
103     var inputbox = document.getElementById("keyword");
104     inputbox.value = tablecell.firstChild.nodeValue;
105     ClearResults();
106     HideDiv("searchresults");
107 }
108
109         </script>
110     </head>
111     <body onload="BodyLoad();">
112         <form id="form1" method="post" runat="server">
113             <p><strong style="FONT-SIZE: 24pt">AJAX.NET</strong><br />
114                 <strong>Google Suggest Demo:</strong></p>
115             <input name="keyword" onkeyup="LoadResults(this.value)" style="WIDTH:500px" autocomplete="off" />
116             <div align="left" class="box" id="searchresults" style="WIDTH:500px;BACKGROUND-COLOR:#ccccff">
117             </div>
118         </form>
119     </body>
120 </html>

服务器端代码 1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.Data.SqlClient;
12
13
14 public partial class SearchPage_DataSets : System.Web.UI.Page
15 {
16     protected void Page_Load(object sender, EventArgs e)
17     {
18         // We need to register this page with Ajax class, so that it is
19         // Ajax.Net Aware.
20         Anthem.Manager.Register(this);
21
22     }
23
24
25     [Anthem.Method]
26     public DataSet RetrieveRows(string searchterm)
27     {
28         //SQL 2005
29
30         SqlConnection conn = new SqlConnection(
31             "Data Source=B2FC96ADD7DC472\\GEOVINDU;Initial Catalog=AdventureWorks;Integrated Security=SSPI");
32         DataTable dtReturn = new DataTable();
33
34         conn.Open();
35         // Go get the top 10 store names from AdventureWorks that are like users search criteria
36         SqlCommand cmd = new SqlCommand("Select Top 10 Name from sales.store where Name like @searchterm Order By Name", conn);
37         SqlParameter param = new SqlParameter();
38         param.ParameterName = "@searchterm";
39         searchterm.Trim().Replace("'", "''");
40         searchterm += "%";
41         param.Value = searchterm;
42         cmd.Parameters.Add(param);
43         SqlDataAdapter adpt = new SqlDataAdapter(cmd);
44         DataSet dsCustomers = new DataSet();
45         adpt.Fill(dsCustomers, "stores");
46
47         conn.Close();
48
49
50         // send the DataTable back to the CallBack function
51         return dsCustomers;
52     }
53
54 }