js（jquery）与ajax结合实现无刷新操作
一：我们先看看一个用table布局来显示数据列表，这里执行了一个简单的删除操作
前台代码：
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <%--<link href="Css/common.css" rel="stylesheet" type="text/css" />--%>
5 <script type="text/javascript">
6 function delDo(id) {
7 if (confirm("您确定要删除吗？")) {
8 window.location="Delete.ashx?id="+id;
9 }
10 }
11 function Modify(id) {
12 window.location = "Modify.aspx?id=" + id;
13 }
14
15 function Add() {
16 window.location = "Add.aspx";
17 }
18
19 </script>
20 </head>
21 <body>
22 <form id="form1" runat="server">
23 <div>
24 <center>
25 <table id="content" style=" background-color:Green; font-size:14px; height:270px; width:500px">
26 <tr><td colspan="6">用户信息</td></tr>
27 <tr>
28 <td>序号  </td>
29 <td>ID  </td>
30 <td>姓名  </td>
31 <td>年龄  </td>
32 <td>地址  </td>
33 <td>操作  </td>
34 </tr>
35 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
36 <%=sbTableContent.ToString() %>
37 </table>
38 </center>
39 </div>
40 </form>
41 </body>
42 </html>
后台代码：
namespace JobTest
{
public partial class StudentsList : System.Web.UI.Page
{
protected StringBuilder sbTableContent = new StringBuilder();
StudentInfoManager stuInfoManager = new StudentInfoManager();
protected void Page_Load(object sender, EventArgs e)
{
List<StudentInfo> list = stuInfoManager.ListAll();
int index = 1;
foreach (StudentInfo model in list)
{
sbTableContent.Append("<tr><td>"+index.ToString()+"</td>");
sbTableContent.Append("<td>" + model.ID1 + "</td>");
sbTableContent.Append("<td>" + model.Name1 + "</td>");
sbTableContent.Append("<td>" + model.Age1 + "</td>");
sbTableContent.Append("<td>" + model.Address1 + "</td>");
sbTableContent.Append("<td><a href='javascript:Modify(" + model.ID1.ToString() + ")'>修改</a> <a href='javascript:delDo(" + model.ID1.ToString() + ")'>删除</a></td></tr>");
index++;
}
sbTableContent.Append("<tr><td colspan='6'><a href='javascript:Add()'>新增</a></td></tr>");
}
}
}
我们这里是通过后台将数据实体以字符串拼接的形式来将其显示到前台页面，可以看到字符串拼接的最后一行也就是表格的最后一列 直接以超链接的形式调用js方法来执行删除操作的，点击当前行获取当前行的id，将id作为参数传给js的delDo（id）方法，最后delDo（id）方法调用一般处理程序来实现具体的数据删除的、window.location="Delete.ashx?id="+id;
二：删除操作实现了，但这里的删除之后是会有页面刷新的，所有我们会考虑到用AJAX于JS配合来实现页面的无刷新操作。下面就看看他们二者是如何配合使用的：
<script type="text/javascript">
///根据不同浏览器版本，创建xhr对象
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}
//声明变量
var xhr = false;
//在浏览器加载完所有的页面资源后创建 异步对象
window.onload = function () {
xhr = createXmlHttp();//与异步对象进行绑定
}
//点击按钮时调用此方法，使用AJAX到服务器拿数据
function delDo(id) {
//设置参数
xhr.open("GET", "delete.ashx?id=1", true);
//ajaxH.open("POST", "GetAreasByAjax.aspx", true);--POST方式提交数据，也可以是在aspx页面执行操作
//ajaxH.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");--追加响应头
// ajaxH.setRequestHeader("If-Modified-Since", "0"); //可以设置不使用缓存
//设置回调函数
xhr.onreadystatechange = watching;
//出发
xhr.send(null); //如果是post传值则使用：ajaxH.send("isAjax=1&na=123");
}
//回调函数
function watching() {
//检查 异步对象 的准备状态是否=4，如果等于4说明服务器已经将数据发回给异步对象了
if (xhr.readyState >= 4) {
if (xhr.status == 200) {//正常返回，判断服务器返回的状态码是否=200
var txt = xhr.responseText;//获得服务器返回的字符数据
document.getElementById("divMsg").innerHTML = txt;//显示到页面div中
} else {
document.getElementById("divMsg").innerHTML = "服务器出错啦！" + xhr.status;
}
}
}
</script>
三：AJAX与Jquery结合使用；我们通常在注册时会遇到填写邮箱地址，但注册又要求我们邮箱地址不能重复，那我们就通过AJAX与Jquery结合自动检测邮箱是否存在于数据库中。
1 //ajax验证郵箱是否可以注册
2 $(function () {
3 $("#<%=txtEmail.ClientID %>").blur(function () {
4 var email = $("#<%=txtEmail.ClientID %>").val();
5 if (email != "") {
6 $.post("ashx/CkEmailExist.ashx", { "email": email }, recBackByEmail);//传参方式与js是不一样的{"email":email,"xxx":xxx},多个参数用“,”隔开
7 }
8 });
9 });
10 //回调函数
11 var recBackByEmail = function (data) {
12 if (data == "errors") {
13 alert("<%=Resources.global.rgregistedEmailMsg%>");
14 $("#<%=txtEmail.ClientID %>").val("");
15 $("#<%=txtEmail.ClientID %>").focus();
16 return;
17 }
18 };
在看看一般处理程序CKEmailExist.ashx里面的操作代码：
1 <%@ WebHandler Language="C#" Class="CkEmailExist" %>
2
3 using System;
4 using System.Web;
5 using VideoChatSystem.BLCore;
6
7 public class CkEmailExist : IHttpHandler {
8
9 public void ProcessRequest (HttpContext context) {
10 context.Response.ContentType = "text/plain";
11 string email=context.Request["email"];
12 if (email != "") {
13 Member member = GlobalUtil.BLService4Web.GetMemberByEmail(email);
14 if (member != null)
15 {
16 context.Response.Write("errors");
17 }
18 else {
19 context.Response.Write("ok");
20 }
21 }
22 }
23
24 public bool IsReusable {
25 get {
26 return false;
27 }
28 }
29
30 }
