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         }

 

运行结果：

很简单的一个小例子

posted @ 2012-05-24 08:44  木的树  阅读(1278)  评论(0)  编辑  收藏  举报