1、ajax是什么？：AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）；
在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。
2、ashx - 一般处理程序
3、在不同的语言之间传递数据
xml - 可扩展的标记语言
json - 数据格式
对象格式："{"key":"value","key":"value"}"
数组格式："[{"key":"value"},{},{}]"
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="js/jquery-1.7.1.min.js"></script> <title></title> </head> <body> <input type="text" id="txt1" placeholder="请输入用户名" /> <span id="txt1_msg"></span> </body> </html> <script type="text/javascript"> $("#txt1").keyup(function () { var s = $(this).val(); if (s.length < 6) { $("#txt1_msg").text("用户名不可以小于6位！"); return; } $.ajax({ url: "Handler.ashx", data:{"uname":s}, type: "post", dataType: "json", success: function (msg) { if (msg.has == 'false') { $("#txt1_msg").text("恭喜！用户名可用"); $("#txt1_msg").css('color','green'); } else { $("#txt1_msg").text("用户名已被占用！！"); $("#txt1_msg").css('color', 'red'); } } }); }); </script>
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Linq; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string end = "{"has":"false"}"; string s=context.Request["uname"]; using(DataClassesDataContext con=new DataClassesDataContext()) { users u= con.users.Where(r=>r.username==s).FirstOrDefault(); if(u!=null) { end = "{"has":"true"}"; } } context.Response.Write(end); context.Response.End(); } public bool IsReusable { get { return false; } } }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="js/jquery-1.7.1.min.js"></script> <title></title> </head> <body> <input type="button" value="加载数据" id="btn1"/> <input type="button" value="添加用户" id="btn2"/> <input type="button" value="修改" id="btn3" /> <input type="button" value="删除" id="btn4" /> <table id="tb1" style="100%; text-align:center;background-color:navy;" > <thead> <tr style="color:white;"> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>民族</td> </tr> </thead> <tbody id="tbody1"> </tbody> </table> </body> </html> <script type="text/javascript"> $("#btn1").click(function () { $.ajax({ url: "Handler2.ashx", data: {}, type: "post", dataType: "json", async:false, success: function (msg) { $("#tbody1").html(""); //alert(msg.length); for (var i = 0; i < msg.length; i++) { var str=" <tr style="background-color:white;">" str+=" <td>"+msg[i].username+"</td>"; str+=" <td>"+msg[i].password+"</td>"; str+="<td>"+msg[i].nickname+"</td>"; str+="<td>"+msg[i].sex+"</td>"; str+="<td>"+msg[i].birthday+"</td>"; str += "<td>" + msg[i].nation + "</td>"; str += " </tr>"; $("#tbody1").append(str); } }, error: function () { alert("err"); }, beforeSend: function () { $("#btn1").attr("disabled", "disabled"); $("#btn1").val("加载中......"); }, complete: function () { $("#btn1").removeAttr("disabled"); $("#btn1").val("加载数据"); } }); }); $("#btn2").click(function () { }); </script>
<%@ WebHandler Language="C#" Class="Handler2" %> using System; using System.Web; using System.Collections.Generic; using System.Linq; using System.Text; public class Handler2 : IHttpHandler { public void ProcessRequest (HttpContext context) { System.Threading.Thread.Sleep(2000); StringBuilder str = new StringBuilder(); str.Append("["); //string end = "["; using(DataClassesDataContext con=new DataClassesDataContext()) { List<users> ulist = con.users.ToList(); int count = 0; foreach(users u in ulist) { if (count > 0) { str.Append(","); } //end += "{"username":""+u.username+"","password":""+u.password+"","nickname":""+u.nickname+"","sex":""+u.sex+"","birthday":""+u.birthday+"","nation":""+u.nation+""}"; str.Append("{"username":"" + u.username + "","password":"" + u.password + "","nickname":"" + u.nickname + "","sex":"" + u.sex + "","birthday":"" + u.birthday + "","nation":"" + u.nation + ""}"); count++; } } //end += "]"; str.Append("]"); context.Response.Write(str); context.Response.End(); } public bool IsReusable { get { return false; } } }