dojo在ASP.NET中使用Ajax初步

    我想先介绍一下dojo中的浏览器事件,由于不同的浏览器对dom事件的支持是不同的,dojo在这方面做了统一的封装,所以使用dojo不用担心浏览器事件不兼容的问题。问题也就由此而来,由于要兼容不同的浏览器事件,dojo中的事件与某一个浏览器的事件在命名上也就有所区别(昨晚上就是卡在这了)。请先看下面的一个网址:

http://http://www.bianceng.cn/webkf/Dojo/201101/23290_5.htm

现在来看一下我们的例子:

<script type="text/javascript" language=javascript src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"

                data-dojo-config="isDebug: true, async: true">

        </script>

 引入dojo.js,1.7以后dojo将使用AMD架构,想要了解AMD的可以在网上查,这里不赘述了

 1 <script type="text/javascript" language=javascript>

 2             require(["dojo/_base/xhr", "dojo/on", "dojo/dom", "dojo/domReady!"], function (xhr, on, dom) {

 3 

 4                 function refresfContent() {

 5 

 6                     var sname = dom.byId("txtName").value;

 7                     //使用GET方式

 8                     xhr.get({

 9                         //请求页面

10                         url: "WebForm2.aspx",

11                         //参数

12                         content: { name: sname },

13                         //当执行成功时调用的方法

14                         load: function (newContent) {

15                             dom.byId("txtSuggestion").value = newContent;

16                         },

17                         //失败时调用的方法

18                         error: function () {

19                             alert("error");

20                         }

21                     });

22                     //alert(sname);

23                 }

24                 //绑定事件,在IE中按键弹起事件是“onkeyup”

25                 on(dom.byId("txtName"), "keyup", refresfContent);

26             })

27         </script>
1 <body>

2     <form id="form1" runat="server">

3     <div>

4     姓名:<input type="text" id="txtName"  /> <br />

5     建议:<input type="text" id="txtSuggestion" name="txtSuggestion" />

6     </div>

7     </form>

8 </body>

其实xhr只是一个被dojo封装了的XMLHttpRequest,使用dojo我们可以声明一个xhr的变量而不用考虑具体的浏览器,比如:

 1 if (window.XMLHttpRequest) {

 2                 XmlHttp = new XMLHttpRequest();

 3 

 4             }

 5             else if (window.ActiveXObject) {

 6                 XmlHttp = new ActiveXObject("Microsoft.XMLHTTp");

 7             }

 8             else {

 9                 alert("您的浏览器不支持XMLHTTPRequest");

10                 return;

11             }

 然后咱们看一下服务器端的代码,很简单的(借用了一下群哥的代码):

 1 protected void Page_Load(object sender, EventArgs e)

 2         {

 3            // string b = Request["callback"];

 4 

 5             

 6                     string name =Context.Request["name"];

 7                     if (name != null)

 8                     {

 9                         string result = GetSuggestion(name);

10                         Response.Write(result);

11                         Response.Flush();

12                         Response.End();//Response.End把前面的内容都输出了,阻止了后面html相关内容的输出

13                     }

14         }

15         private string GetSuggestion(string name)

16         {

17             string suggestion = string.Empty;

18             if (name != null)

19             {

20                 if (name.Length == 1)

21                 {

22                     if (name == "s")

23                     {

24                         suggestion = "qun ge";

25                     }

26                     else if (name == "z")

27                     {

28                         suggestion = "qun sao";

29                     }

30                     else

31                     {

32                         suggestion = "No suggestion";

33                     }

34                 }

35                 else

36                 {

37                     suggestion = "No Suggestion";

38                 }

39             }

40             else

41             {

42                 suggestion = "No Suggestion";

43             }

44 

45             return suggestion;

46         }

 

运行结果:

很简单的一个小例子

你可能感兴趣的:(asp.net)