我想先介绍一下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的可以在网上查,这里不赘述了
<script type="text/javascript" language=javascript>
require(["dojo/_base/xhr", "dojo/on", "dojo/dom", "dojo/domReady!"], function (xhr, on, dom) {
function refresfContent() {
var sname = dom.byId("txtName").value;
//使用GET方式
xhr.get({
//请求页面
url: "WebForm2.aspx",
//参数
content: { name: sname },
//当执行成功时调用的方法
load: function (newContent) {
dom.byId("txtSuggestion").value = newContent;
},
//失败时调用的方法
error: function () {
alert("error");
}
});
//alert(sname);
}
//绑定事件,在IE中按键弹起事件是“onkeyup”
on(dom.byId("txtName"), "keyup", refresfContent);
})
</script>
<body>
<form id="form1" runat="server">
<div>
姓名:<input type="text" id="txtName" /> <br />
建议:<input type="text" id="txtSuggestion" name="txtSuggestion" />
</div>
</form>
</body>
其实xhr只是一个被dojo封装了的XMLHttpRequest,使用dojo我们可以声明一个xhr的变量而不用考虑具体的浏览器,比如:
if (window.XMLHttpRequest) {
XmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XmlHttp = new ActiveXObject("Microsoft.XMLHTTp");
}
else {
alert("您的浏览器不支持XMLHTTPRequest");
return;
}
然后咱们看一下服务器端的代码,很简单的(借用了一下群哥的代码):
protected void Page_Load(object sender, EventArgs e)
{
// string b = Request["callback"];
string name =Context.Request["name"];
if (name != null)
{
string result = GetSuggestion(name);
Response.Write(result);
Response.Flush();
Response.End();//Response.End把前面的内容都输出了,阻止了后面html相关内容的输出
}
}
private string GetSuggestion(string name)
{
string suggestion = string.Empty;
if (name != null)
{
if (name.Length == 1)
{
if (name == "s")
{
suggestion = "qun ge";
}
else if (name == "z")
{
suggestion = "qun sao";
}
else
{
suggestion = "No suggestion";
}
}
else
{
suggestion = "No Suggestion";
}
}
else
{
suggestion = "No Suggestion";
}
return suggestion;
}
时间: 2024-10-30 02:10:29