投递文章投递文章 投稿指南 RSS订阅RSS订阅

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

来源:cnBLOGs 发布时间:2007-12-10 收藏 投稿 字体:【

一直在关注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 /// Summary description for WebService
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         //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    //下面的脚本调用WebService取回数据显示在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 如何调用服务器端方法
服务器端代码:
 

 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/>"+ "郭靖知道师父虽然摔下,并不碍事,但欧阳锋若乘势追击,后着可凌厉之极,当下叫道:“看招!”左腿微屈,右掌划了个圆圈,平推出去,正是降龙十八掌中的“亢龙有悔”。这一招他日夕勤练不辍,初学时便已非同小可,加上这十余年苦功,实已到炉火纯青之境,初推出去时看似轻描淡写,但一遇阻力,能在刹时之间连加一十三道后劲,一道强似一道,重重叠叠,直是无坚不摧、无强不破。这是他从九阴真经中悟出来的妙境。纵是洪七公当年,单以这一招而论,也无如此精奥的造诣。";
23     }
24 }
25 

客户端代码:
 

 1  <script type="text/javascript">
 2    //下面的脚本调用WebService取回数据显示在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方式向服务器端提交数据 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, EventArgs e)
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://www.cnblogs.com/Files/me-sa/AjaxTest.rar

顶一下
(1)
100%
踩一下
(0)
0%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见