前言：这节课讲解关于Ajax的相关内容。
内容：
1.当点击页面中的一个按钮提交数据或请求数据的时候，整个页面的信息都会提交（不管信息是否是提交或者请求的数据，页面中所有的数据都提交），这样耗用的时间将会较只提交或请求所需要的部分页面信息多很多，使页面响应变慢。这种情况下，我们可以使用Ajax解决这一问题。
2.客户端控件（就是HTML页面中的<input type="button" value="登录" id="btnLogin"/>）没有办法直接和数据库交互，服务端控件（<asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />）是可以直接和数据库交互的。客户端控件与数据库进行交互的话先通过js，再通过ajax与后台进行交互。一般情况下很少用服务端控件，服务端控件的效率非常低，因为它是将整个页面都提交的，一般都是用客户端空间+ajax的方法。
3.ajax就是后台处理程序，所以可以添加一个“一般处理程序”，后缀名是：.ashx。
4.ajax中传的值的格式：{"username":username,"pwd":pwd}。这种格式称为json格式，{"key":value}，key必须要有引号。
5.context是上下文对象（里面包含两个内容：Response,Request）。
6.代码：
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/Login.js"></script> 8 </head> 9 <body> 10 <table> 11 <tr><td>用户名：</td><td><input type="text" id="txtUserName"/></td></tr> 12 <tr><td>密码：</td><td><input type="password" id="txtPwd"/></td></tr> 13 <tr><td><input type="button" value="登录" id="btnLogin"/></td></tr> 14 </table> 15 </body> 16 </html>
JS代码：
1 $(function() { 2 $("#btnLogin").click(function() { 3 var username = $.trim($("#txtUserName").val()); 4 var pwd = $.trim($("#txtPwd").val()); 5 if (username==""||pwd=="") { 6 alert("用户名或者密码不能为空"); 7 } else { 8 //三个参数：后台页面，传的值（其格式称为json格式），data是后台处理的结果 9 $.post("/ajax/Login.ashx", { "username": username, "pwd": pwd }, function(data) { 10 alert(data); 11 }); 12 } 13 }); 14 });
ajax代码：
1 using System.Data; 2 using System.Data.SqlClient; 3 using System.Web; 4 using sqlHelper; 5 6 namespace ADO.NET1.ajax 7 { 8 /// <summary> 9 /// Login 的摘要说明 10 /// </summary> 11 public class Login : IHttpHandler 12 { 13 //简称PR方法，context是上下文对象（里面包含两个内容：Response,Request） 14 public void ProcessRequest(HttpContext context) 15 { 16 string username = context.Request.Form["username"].ToString(); 17 string pwd = context.Request.Form["pwd"].ToString(); 18 19 string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd"; 20 SqlParameter[] para = new SqlParameter[] 21 {new SqlParameter("@UserName", SqlDbType.NVarChar, 50), new SqlParameter("@Pwd", SqlDbType.NVarChar, 50)}; 22 para[0].Value = username; 23 para[1].Value = pwd; 24 if (SqlHelper.Exists(strSql, para)) //判断sql语句里面的结果是否存在 25 { 26 context.Response.Write("登陆成功"); 27 } 28 else 29 { 30 context.Response.Write("用户名或者密码错误"); 31 } 32 } 33 34 public bool IsReusable 35 { 36 get 37 { 38 return false; 39 } 40 } 41 } 42 }
7.服务端一般返回的是一个json格式，可以获取多个内容。百度地图就是一个典型的ajax应用，局部刷新。
8.json转js数组：也可以使用json.parse()。
1 var data = eval('(' + data + ')');
9.搜索例子。
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/Login.js"></script> 8 <style type="text/css"> 9 #txtSel { 10 width: 300px; 11 height: 20px; 12 } 13 14 #dcon { 15 width: 300px; 16 border: solid 1px #ccc; 17 display: none; 18 } 19 20 #dcon ul { 21 list-style-type: none; 22 padding: 0px; 23 margin: 0px; 24 font-family: "微软雅黑"; 25 } 26 </style> 27 </head> 28 <body> 29 <input type="text" id="txtSel" /> 30 <div id="dcon"></div> 31 </body> 32 </html>
js代码：
1 $(function(){ 2 $("#txtSel").keyup(function () { 3 var title = $.trim($("#txtSel").val()); 4 if (title == "") { 5 $("#dcon").hide(); 6 } 7 else { 8 $.post("/ajax/LoginAjax.ashx?cmd=sel", { "title": title }, function (data) { 9 data = eval('(' + data + ')'); 10 if (data.Success) { 11 $("#dcon").show(); 12 $("#dcon").html(data.Infor); 13 } 14 else { 15 $("#dcon").show(); 16 $("#dcon").html(data.Infor); 17 } 18 }); 19 } 20 }); 21 });
ajax代码：
1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Data.SqlClient; 5 using System.Web; 6 using System.Text; 7 using System.Web.Script.Serialization; 8 namespace vip20151029.ajax 9 { 10 /// <summary> 11 /// LoginAjax 的摘要说明 12 /// </summary> 13 public class LoginAjax : IHttpHandler 14 { 15 HttpContext context; 16 Dictionary<string, object> dt = new Dictionary<string, object>(); 17 JavaScriptSerializer jss = new JavaScriptSerializer(); 18 string strReturn = ""; 19 public void ProcessRequest(HttpContext context) 20 { 21 this.context = context; 22 string cmd = context.Request.QueryString["cmd"].ToString(); 23 switch (cmd) 24 { 25 case "login": 26 strReturn = Login(); 27 break; 28 case "sel": 29 strReturn = SelTitle(); 30 break; 31 } 32 context.Response.Write(strReturn); 33 34 } 35 public string SelTitle() 36 { 37 string title = context.Request.Form["title"].ToString(); 38 string strSql = "select top 10 title from RNews where Title like '%'+@title+'%'"; 39 SqlParameter[] para = new SqlParameter[] { new SqlParameter("@title", SqlDbType.NVarChar, 50) }; 40 para[0].Value = title; 41 StringBuilder sb = new StringBuilder(); 42 SqlDataReader read = SqlHelper.ExecuteReader(SqlHelper.connectionString, CommandType.Text, strSql, para); 43 if (read.HasRows) 44 { 45 sb.Append("<ul>"); 46 while (read.Read()) 47 { 48 sb.Append(string.Format("<li>{0}</li>", read["title"].ToString())); 49 } 50 sb.Append("</ul>"); 51 dt.Add("Success", true); 52 dt.Add("Infor", sb.ToString()); 53 } 54 else 55 { 56 dt.Add("Success", false); 57 dt.Add("Infor", "没有数据"); 58 } 59 return jss.Serialize(dt); 60 } 61 public string Login() 62 { 63 string username = context.Request.Form["username"].ToString(); 64 string pwd = context.Request.Form["pwd"].ToString(); 65 string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd"; 66 SqlParameter[] para = new SqlParameter[] { new SqlParameter("@UserName", SqlDbType.NVarChar, 50), new SqlParameter("@Pwd", SqlDbType.NVarChar, 50) }; 67 para[0].Value = username; 68 para[1].Value = pwd; 69 if (SqlHelper.Exists(strSql, para))//判断sql语句里面的结果是否存在 70 { 71 dt.Add("Success", true); 72 dt.Add("Infor", "登录成功"); 73 } 74 else 75 { 76 dt.Add("Success", false); 77 dt.Add("Infor", "登录失败"); 78 } 79 return jss.Serialize(dt); 80 } 81 public bool IsReusable 82 { 83 get 84 { 85 return false; 86 } 87 } 88 } 89 }
10.在js里获取cookie，需要使用插件：cookies.jquery.js。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/cookies.jquery.js"></script> 8 <script type="text/javascript"> 9 $(function () { 10 $("#setCookie").click(function () { 11 $.cookie("username", "admin1", { expires: 7, path: "/" }); 12 }); 13 $("#getCookie").click(function () { 14 alert($.cookie("username")); 15 }); 16 $("#reCookie").click(function () { 17 $.cookie("username", null); 18 }); 19 }); 20 </script> 21 </head> 22 <body> 23 <input type="button" value="存储cookie" id="setCookie" /> 24 <input type="button" value="获取cookie" id="getCookie" /> 25 <input type="button" value="清空cookie" id="reCookie" /> 26 </body> 27 </html>
后记：做网页的原则：1.建立base.css和base.js来存放公共信息（比如每个页面的上部和下部）。2.对于具体的每个页面，单独建立js或者css文件，不要共用，否则不好维护。