jQuery AJAX和JSON例子.doc

基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。 我们先来看一下html模板： 订单ID客户ID雇员ID订购日期发货日期货主名称货主地址货主城市更多信息一定要注意的就是里面所有的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为返回的数据，在这里做数据绑定vardata=msg.table;$.each(data,function(i,n)varrow=$(#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( More);row.attr(id,ready);/改变绑定好数据的行的idrow.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代码如下：test1 inputid=firsttype=buttonvalue=inputid=previoustype=buttonvalue=/ 订单ID客户ID雇员ID订购日期发货日期货主名称货主地址货主城市更多信息LOADING.PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板fsdfasdf还 是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就不 会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板（不过我还没遇到过这样的美工，都是美工设计好了我来改成 服务器控件的模板）。 再简单说一下AJAX请求的后台，用的是Access的Northwind数据库，把订单表放到DataTable里，然后通过DataTable2JSON转化成JSON数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助。全部例子到/fredlau/JSON.rar下载 参考资料： /fredlau/JSON.pdf ajax读取json数据 Js代码 1. 首先建立json.txt文件 2. 3. 4. programmers: 5. firstName:Brett,lastName:McLaughlin,email:brettnewI, 6. firstName:Jason,lastName:Hunter,email:, 7. firstName:Elliotte,lastName:Harold,email: 8. , 9. authors: 10. firstName:Isaac,lastName:Asimov,genre:sciencefiction, 11. firstName:Tad,lastName:Williams,genre:fantasy, 12. firstName:Frank,lastName:Peretti,genre:christianfiction 13. , 14. musicians: 15. firstName:Eric,lastName:Clapton,instrument:guitar, 16. firstName:Sergei,lastName:Rachmaninoff,instrument:piano 17. 18. 19. 20. 通过异步调用，来读取json数据 21. 22. 23. 24. 25. varxmlHttp; 26. functioncreateXMLHttpRequest() 27. 28. if(window.ActiveXObject) 29. 30. xmlHttp=newActiveXObject(Microsoft.XMLHTTP); 31. 32. elseif(window.XMLHttpRequest) 33. 34. xmlHttp=newXMLHttpRequest(); 35. 36. 37. functionstartRequest() 38. 39. createXMLHttpRequest(); 40. try41. 42. xmlHttp.onreadystatechange=handleStateChange; 43. xmlHttp.open(GET,Json.txt,true); 44. xmlHttp.send(null); 45. 46. catch(exception) 47. 48. alert(xmlHttpFail); 49. 50. 51. functionhandleStateChange() 52. 53. if(xmlHttp.readyState=4) 54. 55. if(xmlHttp.status=200|xmlHttp.status=0) 56. 57. varresult=xmlHttp.responseText; 58. varjson=eval(+result+); 59. alert(grammers0.firstName);/读取json数据 60. /alert(json.sex); 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 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 = 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），具体的实现代码如下：/ / The product datatable dao./ public class ProductDao / / Initializes a new instance of the class. / public ProductDao() / / Gets or sets the product id. / public int Id get; set; / / Gets or sets the product name. / public string Name get; set; / / Gets or sets the product serial number. / public string SerialNumber get; set; / / Gets or sets the product qty. / public short Qty get; set; 前面我们定义了Product表的数据库访问对象ProductDao，它包含四个属性分别是产品的Id，名称，序列号和销售数量。接下来，让我们实现Product表的数据库操作类。/ / Product table data access manager./ public class ProductManager / / The query sql. / private const string Query = SELECT ProductID, Name, ProductNumber, SafetyStockLevel FROM Production.Product; / / Stores the object of into list. / private IList _products = new List(); / / Gets all products in product table. / / / The list of object. / public IList GetAllProducts() using (var con = new SqlConnection(ConfigurationManager.ConnectionStringsSQLCONN.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)readerProductID, Name = (string)readerName, SerialNumber = (string)readerProductNumber, Qty = (short)readerSafetyStockLevel ; _products.Add(product); return _products; 前面我们实现了Product表的数据库操作类ProductManager，它包含两个私有字段Quey和_products，还有一个获取Product表中数据的方法GetAllProducts()。通过实现ProductDao和ProductManager，而且我们提供GetAllProducts()方法，获取Product表中的数据，接下来我们要调用该方法获取数据。为了使数据通过JSON格式传递给页面，这里我们要创建一般处理程序（ASHX文件），一般处理程序适用场合： 创建动态图片 返回REST风格的XML或JSON数据 自定义HTML图1一般处理程序把一般处理程序文件添加到项目中时，会添加一个扩展名为.ashx的文件，现在我们创建一个一般处理程序ProductInfo，具体代码如下：using System.Runtime.Serialization.Json;using System.Web;using ASP.App_Code;/ / The product data handler./ public class ProductInfo : IHttpHandler public void ProcessRequest (HttpContext context) context.Response.ContentType = application/json; / Creates a oject. var manager = new ProductManager(); / Invokes the GetAllProducts method. var products = manager.GetAllProducts(); / Serializes data to json format. var json = new DataContractJsonSerializer(products.GetType(); json.WriteObject(context.Response.OutputStream, products); / Whether can resuable by other handler or not. public bool IsReusable get return false; 大家注意到ProductInfo类实现了IHttpHandler接口，该接口包含一个方法ProcessRequest()方法和一个属性IsReusable。ProcessRequest()方法用于处理入站的Http请求。在默认情况下，ProductInfo类会把内容类型改为application/json，然后我们把数据通过JSON格式写入输入流中；IsReusable属性表示相同的处理程序是否可以用于多个请求，这里我们设置为false，如果为了提高性能也可以设置为true。如下图所示，我们通过ProductInfo类成功地实现获取数据到响应流中，并且以JSON格式显示出来。图2 Http请求当我们请求ProductInfo时， 首先它会调用ProcessRequest()方法，接着调用GetAllProducts()方法从数据库中获取数据，然后把数据通过JSON格式写入到响应流中。现在，我们已经成功地把数据通过JSON格式写入到响应流当中，接着我们将通过Ajax方式请求数据并且把数据显示到页面中。首先，我们定义方法createXHR()用来创建XMLHttpRequest对象，前面我们提到IE6或者更老的版本不支持XMLHttpRequest()方法来创建XMLHttpRequest对象，所以我们要在createXHR()方法中，增加判断当前浏览器是否IE6或更老的版本，如果是，就要通过MSXML库的一个ActiveX对象实现。因此，在IE中可能遇到三种不同版本的XHR对象（MSXML2.XMLHttp6.0，MSXML2.XMLHttp3.0和MSXML2.XMLHttp）。/ Creates a XMLHttpRequest object bases on web broswer.function createXHR() / Checks whether support XMLHttpRequest or not. if (typeof XMLHttpRequest != undefined) return new XMLHttpRequest(); / IE6 and elder version. else if (typeof ActiveXObject != undefined) if (typeof arguments.callee.activeXString != string) var versions = MSXML2.XMLHttp6.0, MSXML2.XMLHttp3.0, MSXML2.XMLHttp; for (var i = 0; i = 200 & req.status 300) | req.status = 304) /alert(req.responseText); var jsonTextDiv = document.getElementById(jsonText); / Deserializes JavaScript Object Notation (JSON) text to produce a JavaScript value. var data = JSON.parse(req.res