ajax 异步调用方法

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.1//EN "   " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
     < title > Untitled Page </ title >

     < script language = " javascript " >
        function Dosearch()
         ... {
           // debugger
           //PageMethods 是ajax 调用本页面的专用名称
            var srcElem = document.getElementById("searchKey")
            PageMethods.doSearch(srcElem.value,onQueryComplete);
        }
        
        function onQueryComplete(result)
         ... {
            var rsltElem = document.getElementById("results")
            rsltElem.innerHTML = result; 
        }
        
        function ServiceDosearch()
         ... {
           // debugger 调用WebService 中的方法。
           // WebService 文件名
            var srcElem = $get('txtSearchKey')
            WebService.HelloWorld(srcElem.value,onCompleted);
        }
        
        function onCompleted(result)
         ... {
            var rsltElem = document.getElementById("ServiceResult")
            rsltElem.innerHTML = result; 
            
        }
     </ script >

</ head >
< body >
     < form id = " form1 "  runat = " server " >
         < font face = " 宋体 "  size = " 6 " > AJAX 调用本页代码 </ font >
       
         < asp:ScriptManager ID = " ScriptManager2 "  runat = server  >
             < Services >
                 < asp:ServiceReference Path = " WebService.asmx "   />
             </ Services >
         </ asp:ScriptManager >
      
         < div >
            Search  for
             < input id = " searchKey "  type = " text "   />
             < input id = " searchButton "  type = " button "  value = " 查询 "  onclick = " Dosearch(); "   />
         </ div >
         < hr  />
         < div >
             < span id = " results " ></ span >
         </ div >
         < hr color = red  />
         < font face = " 宋体 "  size = " 6 " > AJAX 调用WebService代码 </ font >
          
        
          < div >
            Search  for
             < input id = " txtSearchKey "  type = " text "   />
             < input id = " Button1 "  type = " button "  value = " 查询 "  onclick = " ServiceDosearch(); "   />
         </ div >
         < hr  />
         < div >
             < span id = " ServiceResult " ></ span >
         </ div >
     </ form >
</ body >
</ html >

WebService.cs  文件

using  System;
using  System.Web;
using  System.Collections;
using  System.Web.Services;
using  System.Web.Services.Protocols;


/**/ /// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public   class  WebService : System.Web.Services.WebService  ... {

    public WebService () ...{

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string HelloWorld(string query) ...{
        return Server.HtmlDecode(query) + DateTime.Now.ToString();
    }
    
}

Default.aspx.cs(本页面后台) 文件：

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  _Default : System.Web.UI.Page 
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }

    [System.Web.Services.WebMethod]
    public static string doSearch(string query)
    ...{
        string input = query;
        return input + DateTime.Now;
    }
}