ASP.NET之AJAX系列(二)
于是我们寻求更好的实现方式,jquery的ajax方法配合ashx一般处理程序。jquery的好处是兼容性强(背后有一个团队专门负责开发),易用(找个api几分钟就学会了),功能强大(对原生js进行了封装,直接调用方法即可实现很多功能)。ashx一般处理程序则是ms自家的,从名字可以看出它是用来处理一些东西的(原谅我才疏学浅),而且它在执行的过程中不会对整个页面的生命周期重建,这就避免了控件树生成带来的开销问题。好了,下面我们来讲讲,这两者如何结合可以实现ajax,首先我们建立一个页面:
复制代码
<%@ page language="c#" autoeventwireup="true" codebehind="ashxajax.x.cs" inherits="webapplication1.ashxajax" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery实现ajax</title>
<script type="text/javascript" src="javascript/jquery-11.js"></script>
<script type="text/javascript">
$(function () {
$("#txtid").blur(function () {
var a = $("#txtid").val();
$.ajax({
type: "post",
url: "handler1.ashx",
data: { m: a },
success: function (result) {
var res = result.tostring();
$("#lblshow").html(res);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
昵称:<asp:textbox id="txtid" runat="server"></asp:textbox><asp:label id="lblshow" runat="server"
forecolor="red"></asp:label><br />
</p>
</form>
</body>
</html>
复制代码
在这里面我在页面头部引用了最新的jquery-1.11(好吧那个js文件名字没取好),然后在页面放入一个文本框用于输入昵称,同时在后面有个label,用于显示用户名是否被注册的消息。
接下来我们就可以用到jquery的ajax方法,在本例中,我们的需求是输入昵称后,文本框失去焦点,然后检测该昵称是否存在,于是就有了$("#txtid").blur方法。接下来失去焦点后,我们需要获取文本框的值,然后向ashx文件发起ajax请求:$.ajax({type: "post",url: "handler1.ashx",data: { m: a },success: function (result) {var res =result.tostring();$("#lblshow").html(res);}});
注意这几个参数一定要写全,首先是提交的方式,我们这里用的是post的方式。然后是url,就是我们的ashx文件的路径,接下来是参数,在这里我们传入文本框输入的昵称。最后有个success,它表示在请求成功后后续的操作,这里我们是将处理的结果用于label文字的显示。
在前端写好js后,我们来看看我们的ashx文件中的代码:
复制代码
using system;
using system.collections.generic;
using system.linq;
using system.web;
namespace webapplication1
{
/// <summary>
/// handler1 的摘要说明
/// </summary>
public class handler1 : ihttphandler
{
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
string name = context.request.params["m"].tostring();
if (userhelper.checkname(name) == false)
{
context.response.write("该昵称已被注册!");
}
else
{
context.response.write("恭喜,此昵称可以使用!");
}
}
public bool isreusable
{
get
{
return false;
}
}
}
}