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

悟靜 2010-08-06

展開全文

一直在關(guān)注AjaxControlToolkit的變化，期待著隨著時間的推移這個工具包會日臻完善，不過就實際項目中應(yīng)用的效果來講，還是有點失望的。問題最多的兩個控件是ModalPopup和Slider. AjaxControlToolkit的BUG改進(jìn)顯然沒有我期望的那么快，最新版本里面是這樣說的： Version 1.0.11119.0 for ASP.NET AJAX version 1.0 and .NET Framework 2.0 (No changes from 1.0.10920) 問題總要解決，生活還在繼續(xù)，既然AjaxControlToolkit差強(qiáng)人意那就回頭看看基于Asp.net Ajax框架我們直接使用腳本可以做什么？
翻看Ajax客戶端的文檔，的確要是看完也需些時日了，不禁想起《神雕俠侶》中小龍女和楊過被李莫愁點穴困于墓室里突然看到《九陰真經(jīng)》：她轉(zhuǎn)念又想：“我縱然通了穴道，但打不過師姊，仍是無用。”當(dāng)即細(xì)看室頂經(jīng)文，要找一門即知即用的武功，一出手就將李莫愁制住，但約略瞥去，每一項皆是艱深繁復(fù)，料想就算是最易的功夫，也須數(shù)十日方能練成... ...”

是的，就如《九陰真經(jīng)》，文檔有時間一定要好好研習(xí)，如果沒有足夠的時間，最好能沿著一條脈絡(luò)抽取出自己所需；

本文簡單描述了：
1.javascript 如何調(diào)用WebService
2.javascript 如何調(diào)用服務(wù)器端方法
3.javascript 如何用POST方式向服務(wù)器端提交數(shù)據(jù)
4.javascript 如何用Get方式向服務(wù)器端提交數(shù)據(jù)

1.javascript 如何調(diào)用WebService
服務(wù)器端代碼： 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 /// Summary description for WebService
10 /// </summary>
11 [WebService(Namespace = "http:///")]
12 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
13 [ScriptService]
14 public class WebService : System.Web.Services.WebService {
15
16 public WebService () {
17
18 //Uncomment the following line if using designed components
19 //InitializeComponent();
20 }
21
22 [WebMethod]
23 public string HelloWorld(string user) {
24 return "<p style='backGround-color:red;'>"+user+ " Hello World!</p>";
25 }
26
27 }
28
29
客戶端代碼：
1 <script type="text/javascript">
2 //下面的腳本調(diào)用WebService取回數(shù)據(jù)顯示在webserviceDataDiv
3 function getDataFromWebService()
4 {
5 WebService.HelloWorld(get("Text1").value,OnGetDataFromWebServiceCompleted,null,null);
6 }
7 function OnGetDataFromWebServiceCompleted(data)
8 {
9 get("webserviceDataDiv").innerHTML=data;
10 }
11 </script>
12
13 <script type="text/javascript">
14 function getDataByServerMethod()
15 {
16 PageMethods.ShowDetailData(get('Text1').value,OnGetDataFromWebMethodCompleted);
17 }
18 function OnGetDataFromWebMethodCompleted(data)
19 {
20 get("webserviceDataDiv").innerHTML=data;
21 }
22 </script>
23
24 <input id="Text1" type="text" value="me_sa" />
25 <input id="Button3" type="button" value="GetDataFromWebService" onclick="getDataFromWebService();" />
26 <div id="webserviceDataDiv">
27 </div>如果你使用VS2008你可以得到這樣的提示：

2.javascript 如何調(diào)用服務(wù)器端方法
服務(wù)器端代碼：
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, EventArgs e)
15 {
16
17 }
18
19 [WebMethod]
20 public static string ShowDetailData(string user)
21 {
22 return user+"你好!你知道下面的文字選自哪里么？<br/>"+ "郭靖知道師父雖然摔下，并不礙事，但歐陽鋒若乘勢追擊，后著可凌厲之極，當(dāng)下叫道：“看招！”左腿微屈，右掌劃了個圓圈，平推出去，正是降龍十八掌中的“亢龍有悔”。這一招他日夕勤練不輟，初學(xué)時便已非同小可，加上這十余年苦功，實已到爐火純青之境，初推出去時看似輕描淡寫，但一遇阻力，能在剎時之間連加一十三道后勁，一道強(qiáng)似一道，重重疊疊，直是無堅不摧、無強(qiáng)不破。這是他從九陰真經(jīng)中悟出來的妙境?？v是洪七公當(dāng)年，單以這一招而論，也無如此精奧的造詣。";
23 }
24 }
25 客戶端代碼：
1 <script type="text/javascript">
2 //下面的腳本調(diào)用WebService取回數(shù)據(jù)顯示在webserviceDataDiv
3
4 <script type="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方式向服務(wù)器端提交數(shù)據(jù) 4.javascript 如何用Get方式向服務(wù)器端提交數(shù)據(jù)

客戶端：

1 <script type="text/javascript">
2 //下面的代碼使用Post和Get兩種方式向服務(wù)器提交數(shù)據(jù)
3 //這里做了一個簡單的重構(gòu)，兩種方式調(diào)用的時候只要傳遞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 //完成之后調(diào)用的參數(shù) 注意一下參數(shù)
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服務(wù)器端代碼：
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, EventArgs e)
15 {
16 string temp = "";
17 Response.Clear();
18 if (!string.IsNullOrEmpty(Request.Form["AID"]))
19 {
20 temp =DateTime.Now.ToString()+ " POST過來的數(shù)據(jù)是：" + Request.Form["AID"].ToString();
21 }
22 if (!string.IsNullOrEmpty(Request.QueryString["AID"]))
23 {
24 temp = DateTime.Now.ToString() + "GET過來的數(shù)據(jù)是：" + Request.QueryString["AID"].ToString();
25 }
26
27 Response.Write(temp);
28 Response.End();
29
30 }
31 }
32

本文來自: 網(wǎng)頁設(shè)計大本營(www.) 詳細(xì)出處參考：http://www./html/20087151126461359597.html