基于jQuery的AJAX和JSON的实例.doc
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。 我们先来看一下html模板： <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> <th> 客户ID</th> <th> 雇员ID</th> <th> 订购日期</th> <th> 发货日期</th> <th> 货主名称</th> <th> 货主地址</th> <th> 货主城市</th> <th> 更多信息</th> </tr> <tr id="template"> <td id="OrderID"> </td> <td id="CustomerID"> </td> <td id="EmployeeID"> </td> <td id="OrderDate"> </td> <td id="ShippedDate"> </td> <td id="ShippedName"> </td> <td id="ShippedAddress"> </td> <td id="ShippedCity"> </td> <td id="more"> </td> </tr> </table>一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码 $.ajax( type: "get",/使用get方法访问后台 dataType: "json",/返回json格式的数据 url: "BackHandler.ashx",/要访问的后台地址 data: "pageIndex=" + pageIndex,/要发送的数据 complete :function()$("#load").hide();,/AJAX请求完成时隐藏loading提示 success: function(msg)/msg为返回的数据，在这里做数据绑定 var data = msg.table; $.each(data, function(i, n) var row = $("#template").clone(); row.find("#OrderID").text(n.订单ID); row.find("#CustomerID").text(n.客户ID); row.find("#EmployeeID").text(n.雇员ID); row.find("#OrderDate").text(ChangeDate(n.订购日期); if(n.发货日期!= undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期); row.find("#ShippedName").text(n.货主名称); row.find("#ShippedAddress").text(n.货主地址); row.find("#ShippedCity").text(n.货主城市); row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); row.attr("id","ready");/改变绑定好数据的行的id row.appendTo("#datas");/添加到模板的容器中 );这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期);有点服务器控件做模板绑定数据的感觉。 所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head> <title>test1</title> <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> <script language="javascript" type="text/javascript" src="js/PageDate.js"></script></head><body> <div> <div> <br /> <input id="first" type="button" value=" << " /><input id="previous" type="button" value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button" value=" >> " /> <span id="pageinfo"></span> <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> <th> 客户ID</th> <th> 雇员ID</th> <th> 订购日期</th> <th> 发货日期</th> <th> 货主名称</th> <th> 货主地址</th> <th> 货主城市</th> <th> 更多信息</th> </tr> <tr id="template"> <td id="OrderID"> </td> <td id="CustomerID"> </td> <td id="EmployeeID"> </td> <td id="OrderDate"> </td> <td id="ShippedDate"> </td> <td id="ShippedName"> </td> <td id="ShippedAddress"> </td> <td id="ShippedCity"> </td> <td id="more"> </td> </tr> </table> </div> <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> LOADING. </div> <input type="hidden" id="pagecount" /> </div></body></html>PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板<ul id="datas"> <li id="template"> <span id="OrderID"> fsdfasdf </span> <span id="CustomerID"> </span> <span id="EmployeeID"> </span> <span id="OrderDate"> </span> <span id="ShippedDate"> </span> <span id="ShippedName"> </span> <span id="ShippedAddress"> </span> <span id="ShippedCity"> </span> <span id="more"> </span> </li> </ul>还 是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就不 会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板（不过我还没遇到过这样的美工，都是美工设计好了我来改成 服务器控件的模板）。 再简单说一下AJAX请求的后台，用的是Access的Northwind数据库，把订单表放到DataTable里，然后通过DataTable2JSON转化成JSON数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助。全部例子到 参考资料： ajax读取json数据 Js代码 1. 首先建立json.txt文件 2. 3. 4. "programmers": 5. "firstName": "Brett", "lastName":"McLaughlin", "email": "brettnewI" , 6. "firstName": "Jason", "lastName":"Hunter", "email": "jason" , 7. "firstName": "Elliotte", "lastName":"Harold", "email": "elharo" 8. , 9. "authors": 10. "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" , 11. "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" , 12. "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" 13. , 14. "musicians": 15. "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" , 16. "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" 17. 18. 19. 20. 通过异步调用，来读取json数据 21. 22. <html xmlns="http:/www.w3.org/1999/xhtml" > 23. <head runat="server"> 24. <script type="text/javascript"> 25. var xmlHttp; 26. function createXMLHttpRequest() 27. 28. if(window.ActiveXObject) 29. 30. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 31. 32. else if(window.XMLHttpRequest) 33. 34. xmlHttp = new XMLHttpRequest(); 35. 36. 37. function startRequest() 38. 39. createXMLHttpRequest(); 40. try 41. 42. xmlHttp.onreadystatechange = handleStateChange; 43. xmlHttp.open("GET", "Json.txt", true); 44. xmlHttp.send(null); 45. 46. catch(exception) 47. 48. alert("xmlHttp Fail"); 49. 50. 51. function handleStateChange() 52. 53. if(xmlHttp.readyState = 4) 54. 55. if (xmlHttp.status = 200 | xmlHttp.status = 0) 56. 57. var result = xmlHttp.responseText; 58. var json = eval("(" + result + ")"); 59. alert(json.programmers0.firstName);/读取json数据 60. /alert(json.sex); 61. 62. 63. 64. </script> 65. </head> 66. <body> 67. <div> 68. <input type="button" value="AjaxTest" onclick="startRequest();" /> 69. </div> 70. </body> 71. </html> Ajax与JSON的一些总结1.1.1 摘要Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：· 在不重新加载页面的情况下更新网页· 在页面已加载后从服务器请求数据· 在页面已加载后从服务器接收数据· 在后台向服务器发送数据本文目录· XMLHttpRequest的用法· Ajax同源请求· 同源策略与跨源策略· Ajax跨源请求1.1.2 正文XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和Google采纳，W3C正在标准化它。它提供了一种简单的方法来检索URL中的数据。我们要创建一个XMLHttpRequest实例，只需new一个就OK了：/ Creates a XMLHttpRequest object.var req = new XMLHttpRequest();也许有人会说：“这可不行啊！IE6不支持原始的XHR对象”，确实是这样，我们在后面将会介绍支持IE6或更老版本创建XHR对象的方法。XMLHttpRequest的用法在创建XHR对象后，接着我们要调用一个初始化方法open()，它接受五个参数具体定义如下：void open( DOMString method, /"GET", "POST", "PUT", "DELETE" DOMString url, optional boolean async, optional DOMString user, optional DOMString password);通过上面的定义我们知道open()方法的签名包含五个参数，其中有参数method和url地址是必填的，假设我们针对URL: myxhrtest.aspx发送GET请求获取数据，具体定义如下：var req = new XMLHttpRequest();req.open( "GET", "myxhrtest.aspx", false);通过上述代码会启动一个针对myxhrtest.aspx的GET请求，这里有两点要注意：一是URL相对于执行代码的当前页面（使用绝对路径）；二是调用open()方法并不会真正发送请求，而只是启动一个请求准备发送。只能向同一个域中使用相同端口和协议的URL中发送请求；如果URL与启动请求的页面有任何差别，都会引发安全错误。要真正发送请求要使用send()方法，send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，我们必须传递一个null值。在调用send()之后，请求就会被分派到服务器，完整Ajax请求代码如下：var req = new XMLHttpRequest();req.open( "GET", "myxhrtest.aspx", false);req.send(null);在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，一般来说，可以将HTTP状态代码为200作为成功标志。这时，响应主体内容会保存到responseText中。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据，Ajax的同步请求代码如下：if (req != null) req.onreadystatechange = function() if (req.status >= 200 && req.status < 300) | req.status = 304) / Do something. else alert("Request was unsuccessful: " + req.status); ; req.open("GET", "www.myxhrtest.aspx", true); req.send(null);前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：readyState值描述0未初始化；尚未调用open()方法1启动；尚未调用send()方法2已发送；但尚未收到响应3接收；已经收到部分响应数据4完成；收到全部响应数据表1 readyState属性值同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。现在我们要增加判断readyState属性值，当readyState = 4时，表示全部数据接收完成， 所以Ajax的异步请求代码如下：if (req != null) req.onreadystatechange = function() / Checks the asyn request completed or not. if (req.readyState = 4) if (req.status >= 200 && req.status < 300) | req.status = 304) / Do something. else alert("Request was unsuccessful: " + req.status); ; req.open("GET", "www.myxhrtest.aspx", true); req.send(null);Ajax同源请求现在我们对Ajax的请求实现有了初步的了解，接下来我们将通过具体的例子说明Ajax请求的应用场合和局限。在日常网络生活中，我们在浏览器的地址中输入要访问的URL并且回车，浏览器会向服务器发送请求，当服务器收到请求后，把相应的请求页面发送回浏览器，我们会发现页面大部分加载完毕，有些还没有加载完毕。总的来说，采用异步加载方式不会影响已加载完毕的页面浏览，我们可以通过Ajax实现异步加载。这里我们以AdventureWorks数据库为例，把产品表（Product）中的数据通过报表呈现给用户，我们可以通过多种方法实现该报表需求，这里我们将通过Ajax实现该功能。首先，我们要把后台数据转换为JSON格式，接下来我们定义Product表的数据库访问对象（DAO），具体的实现代码如下：/ <summary>/ The product datatable dao./ </summary>public class ProductDao / <summary> / Initializes a new instance of the <see cref="ProductDao"/> class. / </summary> public ProductDao() / <summary> / Gets or sets the product id. / </summary> public int Id get; set; / <summary> / Gets or sets the product name. / </summary> public string Name get; set; / <summary> / Gets or sets the product serial number. / </summary> public string SerialNumber get; set; / <summary> / Gets or sets the product qty. / </summary> public short Qty get; set; 前面我们定义了Product表的数据库访问对象ProductDao，它包含四个属性分别是产品的Id，名称，序列号和销售数量。接下来，让我们实现Product表的数据库操作类。/ <summary>/ Product table data access manager./ </summary>public class ProductManager / <summary> / The query sql. / </summary> private const string Query = "SELECT ProductID, Name, ProductNumber, SafetyStockLevel FROM Production.Product" / <summary> / Stores the object of <see cref="ProductDao"/> into list. / </summary> private IList<ProductDao> _products = new List<ProductDao>(); / <summary> / Gets all products in product table. / </summary> / <returns> / The list of <see cref="ProductDao"/> object. / </returns> public IList<ProductDao> GetAllProducts() using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings"SQLCONN".ToString() using (var com = new SqlCommand(Query, con) con.Open(); using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection) while (reader.Read() var product = new ProductDao Id = (int)reader"ProductID", Name = (string)reader"Name", SerialNumber = (string)reader"ProductNumber", Qty = (short)reader"SafetyStockLevel" ; _products.Add(product); return _products; 前面我们实现了Product表的数据库操作类ProductManager，它包含两个私有字段Quey和_products，还有一个获取Product表中数据的方法GetAllProducts()。通过实现ProductDao和ProductManager，而且我们提供GetAllProducts()方法，获取Product表中的数据，接下来我们要调用该方法获取数据。为了使数据通过JSON格式传递给页面，这里我们要创建一般处理程序（ASHX文件），一般处理程序适用场合：· 创建动
