Asp.net Ajax:我可以用javascript做些什么？

一直在关注AjaxControlToolkit的变化，期待着随着时间的推移这个工具包会日臻完善，不过就实际项目中应用的效果来讲，还是有点失望的。问题最多的两个控件是ModalPopup和Slider. AjaxControlToolkit的BUG改进显然没有我期望的那么快，最新版本里面是这样说的： Version 1.0.11119.0 for ASP.NET AJAX version 1.0 and .NET Framework 2.0 (No changes from 1.0.10920) 问题总要解决，生活还在继续，既然AjaxControlToolkit差强人意 那就回头看看基于Asp.net Ajax框架我们直接使用脚本可以做什么？

翻看Ajax客户端的文档，的确要是看完也需些时日了，不禁想起《神雕侠侣》中小龙女和杨过被李莫愁点穴困于墓室里突然看到《九阴真经》： 她转念又想：“我纵然通了穴道，但打不过师姊，仍是无用。”当即细看室顶经文，要找一门即知即用的武功，一出手就将李莫愁制住，但约略瞥去，每一项皆是艰深繁复，料想就算是最易的功夫，也须数十日方能练成... ...”

是的，就如《九阴真经》，文档有时间一定要好好研习，如果没有足够的时间，最好能沿着一条脉络抽取出自己所需；

本文简单描述了：

1.javascript 如何调用WebService
2.javascript 如何调用服务器端方法
3.javascript 如何用POST方式向服务器端提交数据
4.javascript 如何用Get方式向服务器端提交数据

1.javascript 如何调用WebService
服务器端代码：

1 using System;
2 using System.Collections;
3 using System.Web;
4 using System.Web.Services;
5 using System.Web.Services.Protocols;
6 using System.Web.Script.Services;
7
8 /// <summary>
9 /// SummarydescriptionforWebService
10 /// </summary>
11 [WebService(Namespace = " http://tempuri.org/ " )]
12 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
13 [ScriptService]
14 public class WebService:System.Web.Services.WebService{
15
16 public WebService(){
17
18 // Uncommentthefollowinglineifusingdesignedcomponents
19 // InitializeComponent();
20 }
21
22 [WebMethod]
23 public string HelloWorld( string user){
24 return " <pstyle='backGround-color:red;'> " + user + " HelloWorld!</p> " ;
25 }
26
27 }
28
29

客户端代码：

1<scripttype="text/javascript">
2//下面的脚本调用WebService取回数据显示在webserviceDataDiv
3function getDataFromWebService()
4 {
5WebService.HelloWorld($get("Text1").value,OnGetDataFromWebServiceCompleted,null,null );
6 }
7function OnGetDataFromWebServiceCompleted(data)
8 {
9$get("webserviceDataDiv").innerHTML= data;
10 }
11</script>
12
13<scripttype="text/javascript">
14function getDataByServerMethod()
15 {
16 PageMethods.ShowDetailData($get('Text1').value,OnGetDataFromWebMethodCompleted);
17 }
18function OnGetDataFromWebMethodCompleted(data)
19 {
20$get("webserviceDataDiv").innerHTML= data;
21 }
22</script>
23
24<inputid="Text1"type="text"value="me_sa"/>
25<inputid="Button3"type="button"value="GetDataFromWebService"onclick="getDataFromWebService();"/>
26<divid="webserviceDataDiv">
27</div>

如果你使用VS2008你可以得到这样的提示：

2.javascript 如何调用服务器端方法
服务器端代码：

1 using System;
2 using System.Configuration;
3 using System.Data;
4 using System.Web;
5 using System.Web.Security;
6 using System.Web.UI;
7 using System.Web.UI.HtmlControls;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.Services;
11
12 public partial class _Default:System.Web.UI.Page
13 {
14 protected void Page_Load( object sender,EventArgse)
15 {
16
17 }
18
19 [WebMethod]
20 public static string ShowDetailData( string user)
21 {
22 return user + " 你好!你知道下面的文字选自哪里么？<br/> " + " 郭靖知道师父虽然摔下，并不碍事，但欧阳锋若乘势追击，后着可凌厉之极，当下叫道：“看招！”左腿微屈，右掌划了个圆圈，平推出去，正是降龙十八掌中的“亢龙有悔”。这一招他日夕勤练不辍，初学时便已非同小可，加上这十余年苦功，实已到炉火纯青之境，初推出去时看似轻描淡写，但一遇阻力，能在刹时之间连加一十三道后劲，一道强似一道，重重叠叠，直是无坚不摧、无强不破。这是他从九阴真经中悟出来的妙境。纵是洪七公当年，单以这一招而论，也无如此精奥的造诣。 " ;
23 }
24 }
25

客户端代码：

1 < script type ="text/javascript" >
2 // 下面的脚本调用WebService取回数据显示在webserviceDataDiv
3
4 < scripttype = " text/javascript " >
5 function getDataByServerMethod()
6 {
7 PageMethods.ShowDetailData($get('Text1').value,OnGetDataFromWebMethodCompleted);
8 }
9 function OnGetDataFromWebMethodCompleted(data)
10 {
11 $get( " webserviceDataDiv " ).innerHTML = data;
12 }
13 </ script >
14
15 < input id ="Text1" type ="text" value ="me_sa" />
16 < input id ="Button3" type ="button" value ="GetDataFromWebService" onclick ="getDataFromWebService();" />
17 < input id ="Button4" type ="button" value ="getDataByServerMethod" onclick ="getDataByServerMethod();" />
18 < div id ="webserviceDataDiv" >
19 </ div >

3.javascript 如何用POST方式向服务器端提交数据 4.javascript 如何用Get方式向服务器端提交数据

客户端：

1 < script type ="text/javascript" >
2 // 下面的代码使用Post和Get两种方式向服务器提交数据
3 // 这里做了一个简单的重构，两种方式调用的时候只要传递HttpVerb就可以了
4 function getData(verb)
5 {
6 var webRequest = new Sys.Net.WebRequest();
7 if (verb == " POST " )
8 {
9 webRequest.set_url( " ProcessRequest.aspx " );
10 }
11 else
12 {
13 webRequest.set_url( " ProcessRequest.aspx?AID= " + $get( " aidTextbox " ).value);
14 }
15 webRequest.add_completed(OnCompleted);
16
17 webRequest.set_httpVerb(verb);
18 var requestBody = " AID= " + $get( " aidTextbox " ).value;
19 webRequest.set_body(requestBody);
20 webRequest.get_headers()[ " Conten_Length " ] = requestBody.length;
21 webRequest.invoke();
22 }
23 function getDataByPost()
24 {
25 getData( " POST " );
26 }
27 function getDataByGet()
28 {
29 getData( " Get " );
30 }
31 // 完成之后调用的参数注意一下参数
32 function OnCompleted(executor,eventArgs)
33 {
34 if (executor.get_responseAvailable())
35 {
36 $get( " data " ).innerHTML = executor.get_responseData();
37 }
38 }
39 </ script >
40
41 < div id ="data" >
42 </ div >
43 < input id ="aidTextbox" type ="text" value ="me_sa" />
44 < input id ="Button1" type ="button" value ="Post" onclick ="javascript:getDataByPost();" />
45 < input id ="Button2" type ="button" value ="Get" onclick ="javascript:getDataByGet();" />

ProcessRequest.aspx服务器端代码：

1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.HtmlControls;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.WebControls.WebParts;
11
12 public partial class ProcessRequest:System.Web.UI.Page
13 {
14 protected void Page_Load( object sender,EventArgse)
15 {
16 string temp = "" ;
17 Response.Clear();
18 if ( ! string .IsNullOrEmpty(Request.Form[ " AID " ]))
19 {
20 temp = DateTime.Now.ToString() + " POST过来的数据是： " + Request.Form[ " AID " ].ToString();
21 }
22 if ( ! string .IsNullOrEmpty(Request.QueryString[ " AID " ]))
23 {
24 temp = DateTime.Now.ToString() + " GET过来的数据是： " + Request.QueryString[ " AID " ].ToString();
25 }
26
27 Response.Write(temp);
28 Response.End();
29
30 }
31 }
32

就说这么多，代码下载地址： http://files.cnblogs.com/me-sa/AjaxTest.rar