ajax 基础
一、简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种用于创建快速动态网页的技术。
AJAX通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
二、xml和json的作用：在不同语言之间进行数据传递
最早使用的数据类型是 xml
劣势：
1、代码量较大
2、结构不清晰
3、解析起来麻烦
现在使用的数据类型是 json
优势：
1、结构清晰
2、类似于面向对象的解析方式
json基本格式：
{"key":"value","":"","":""}
三、ajax应用实例
ajax展示数据库所有数据：
1.body中的代码
<table style="background-color:navy;text-align:center;width:90%;margin:auto;" id="tb1"> <thead> <tr style="color:white;"> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>民族</td> </tr> </thead> <tbody> </tbody> </table> <input type="button" id="btn1" value="添加" />
2.js代码
<script type="text/javascript"> $("#btn1").click(function () { $.ajax({ url: "ajax/LoadUsers.ashx",//将数据要提交到哪个服务端 data: {},//将什么数据提交到服务端去 type: "post",//用什么样的方式将数据提交过去 dataType: "json",//返回一个什么样的数据类型 success: function (data) { //success $("#tb1 tbody").empty(); for (i in data) { var str = "<tr style=\"background-color:white;\">"; str += "<td>" + data[i].username + "</td>"; str += "<td>" + data[i].password + "</td>"; str += "<td>" + data[i].nickname + "</td>"; str += "<td>" + data[i].sex + "</td>"; str += "<td>" + data[i].birthday + "</td>"; str += "<td>" + data[i].nation + "</td>"; str += "</tr>"; $("#tb1 tbody").append(str); } },//success error: function () { alert('服务器连接失败！！！'); } });//ajax });//btn1.click </script>
在js代码中，书写url链接地址时要注意仔细；在写success中的str字符串时，应注意其中的属性名不可写错；最后可以写error来方便找错。
3.LoadUsers.ashx代码
using System; using System.Web; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; public class LoadUsers : IHttpHandler { public void ProcessRequest (HttpContext context) { int count = 0; string end = "["; using (Data0720DataContext con = new Data0720DataContext()) { var ulist = con.Users; foreach(Users u in ulist) { if (count > 0) { end += ","; } end += "{\"username\":\""+u.UserName+"\",\"password\":\""+u.PassWord+"\",\"nickname\":\""+u.NickName+"\",\"sex\":\""+u.Sex+"\",\"birthday\":\""+u.Birthday+"\",\"nation\":\""+u.Nation+"\"}"; count++; } } end += "]"; context.Response.Write(end);//将json返回出去 context.Response.End();//结束输出 } public bool IsReusable { get { return false; } } }
在此部分的内容中，应注意的是：json字符串的拼写，其中，应格外注意转义字符（\），双引号（""）以及每行最后的逗号的位置，逗号的英文状态，并且，在输出多行数据时，应注意在字符串两侧加上（[]）。
ajax实现省市区三级联动
<div> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList> </div>
<script type="text/javascript"> bind1($("#DropDownList1"), '0001', '1'); function bind1(drop, pc, aa) { $.ajax({ url: "ajax/China.ashx", data: { "pcode": pc }, type: "post", dataType: "json", success: function (data) { if (aa == '1') { drop.empty(); for (i in data) { var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>"; drop.append(str); } bind1($("#DropDownList2"), $("#DropDownList1").val(), '2'); bind1($("#DropDownList3"), $("#DropDownList2").val(), '3'); } if (aa == '2') { drop.empty(); for (i in data) { var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>"; drop.append(str); } bind1($("#DropDownList3"), $("#DropDownList2").val(), '3'); } if (aa == '3') { drop.empty(); for (i in data) { var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>"; drop.append(str); } } }, error: function () { alert('服务器连接失败！'); } }); } $("#DropDownList1").change(function () { bind1($("#DropDownList2"), $(this).val(), '2'); }); $("#DropDownList2").change(function () { bind1($("#DropDownList3"), $(this).val(), '3'); }); </script>
using System; using System.Web; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; public class China : IHttpHandler { public void ProcessRequest (HttpContext context) { string pcode = context.Request["pcode"]; System.Text.StringBuilder end = new StringBuilder(); int count = 0; end.Append("["); using (mydbDataContext con = new mydbDataContext()) { List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList(); foreach (ChinaStates c in clist) { if (count > 0) end.Append(","); end.Append("{\"code\":\"" + c.AreaCode + "\",\"name\":\"" + c.AreaName + "\"}"); count++; } } end.Append("]"); context.Response.Write(end); context.Response.End(); } public bool IsReusable { get { return false; } } }
