基于jQuery的AJAX和JSON的实例

loverqiao 贡献于2013-08-21

作者 ms  创建于2012-09-03 00:54:00   修改者ms  修改于2012-09-03 01:02:00字数22312

文档摘要: 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
关键词:

基于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为返回的数据,在这里做数据绑定                 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(" More");                                         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代码如下:     test1               
         
                           " />                                                                                          订单ID                                              客户ID                                              雇员ID                                              订购日期                                              发货日期                                              货主名称                                              货主地址                                              货主城市                                              更多信息                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                     LOADING....         
             
PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板                                                               fsdfasdf                                                                                                                                                                                                                                                                                                                                                                                                    还 是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不 会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成 服务器控件的模板)。     再简单说一下AJAX请求的后台,用的是Access的Northwind数据库,把订单表放到DataTable里,然后通过DataTable2JSON转化成JSON数据格式传回来就完了,不过后台用了一些分页和缓存的方法,希望对初学者有一些帮助。 全部例子到http://files.cnblogs.com/fredlau/JSON.rar下载     参考资料: http://files.cnblogs.com/fredlau/JSON.pdf ajax读取json数据 Js代码   1. 首先建立json.txt文件    2.    3. {    4. "programmers": [    5. { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },    6. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },    7. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }    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.    23.    24.    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.programmers[0].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 < 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),具体的实现代码如下: /// /// 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.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文件),   一般处理程序适用场合: · 创建动态图片 · 返回REST风格的XML或JSON数据 · 自定义HTML 图1一般处理程序   把一般处理程序文件添加到项目中时,会添加一个扩展名为.ashx的文件,现在我们创建一个一般处理程序ProductInfo,具体代码如下: <%@ WebHandler Language="C#" Class="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 < versions.length; i++) { try { var xhr = new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; return xhr; } catch (ex) { throw new Error(ex.toString()); } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available"); } } return null; } $(document).ready(function() { GetDataFromServer(); });   前面我们定义了一个比较通用的方法用来创建XMLHttpRequest对象,并且它支持IE6或更老版本创建XMLHttpRequest对象,接下来我们将通过Ajax方法请求数据。 function GetDataFromServer() { // Creates a XMLHttpRequest object. var req = new createXHR(); if (req != null) { req.onreadystatechange = function() { if (req.readyState == 4) { if ((req.status >= 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.responseText); for (var i = 0; i < data.length; i++) { var item = data[i]; var div = document.createElement("div"); div.setAttribute("class", "dataItem"); // Inserts data into the html. div.innerHTML = item.Name + " sold " + item.Qty + "; Product number: " + item.SerialNumber; jsonTextDiv.appendChild(div); } } else { alert("Request was unsuccessful: " + req.status); } } }; // Sends a asyn request. req.open("GET", "ProductInfo.ashx", true); req.send(null); } }   由于前面我们介绍过Ajax发生请求的方法,所以不再重复介绍了,但我们注意到GetDataFromServer()方法中,获取responseText数据(JSON格式),然后通过parse()方法把JSON格式数据转换为Javascript对象,最后把数据插入到div中,页面呈现效果如下: 图3 Ajax请求结果   现在,我们成功地把数据输出到页面当中,也许用户还会觉得用户体验不好,那么我们给就该页面增加CSS样式。   由于时间的关系,我们已经把CSS样式定义好了,具体如下: #header { width: 100%; margin-left: 10px; margin-right: 10px; background-color:#480082; color: #FFFFFF; } body { margin-left: 40px; margin-right: 40px; } div#jsonText { background-color: #d9d9d9; -webkit-border-radius: 6px; border-radius: 6px; margin: 10px 0px 0px 0px; padding: 0px; border: 1px solid #d9d9d9; } div.dataItem { font-family: Verdana, Helvetica, sans-serif; color: #434343; padding: 10px; } div.dataItem:nth-child(2n) { background-color: #fafafa; } div.dataItem:first-child { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } div.dataItem:last-child { -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }   我们刷新一下页面,OK现在页面效果好多了。 图4 Ajax请求结果   同源策略与跨源策略   上面我们获取页面和数据都是在同源请求情况下,也就是说,客户端浏览器请求的页面和数据都是属于同一域名、同一端口和同协议。   同源策略:阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的URL的域必须与当前Web页面的域相同、相同端口。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。 图5同源请求过程   在一些情况下,我们不可以避免地要地需要从其他域名或服务器中跨域请求数据,但前面提到Ajax只能向同一个域中使用相同端口和协议的URL中发送请求;如果URL与启动请求的页面有任何差别,都会引发安全错误。   跨源策略(CORS):是一个Web浏览器技术规范,它定义了一个方法让Web服务器允许其他域名页面访问它的资源。跨源策略定义了一个方法让浏览器和服务器可以交互决定是否允许跨源请求。 图6跨源请求过程   大家注意到同源请求中我们使用的是JSON格式,但在跨源请求中却是使用JSONP,这时大家可能有点困惑,坦然我刚开始学习的时候也是这样的。   首先我们必须理解JSON和JSONP的区别:JSON是一种数据格式,而JSONP像是通过一个方法名来封装JSON格式;由于浏览器允许跨源请求
图8 跨源数据   如上图所示,我们使用$.ajax()方法调用公共微博接口,当成功获取服务器回调数据插入到我们的页面当中。   1.1.3 总结   本文主要介绍了Ajax在同源请求适用性,但在跨源请求中其存在的局限性,进而介绍Ajax和JSONP在跨源请求下解决方法。   回答qianlifeng关于跨源请求的几个问题:   1. 一般的跨源不用jsonp请求为什么会报错?和同源的不都是一个请求么?(可能对ajax了解不深)   答:首先跨源请求的解决方法不仅仅有JSON,本文中提及了其他方法,如:表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等;而你提到报错,我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。   2. 关于“用Javascript定义回调函数”那块看的不是很明白。传递当前页面的一个js方法给跨源服务器,为什么就能跨源请求了呢?(JSONP?) 服务端根据这个js方法做了什么操作啊?   答:首先我们理解JSON是一种数据格式,而JSONP像似通过一个方法名来封装JSON格式;而跨源请求不是说指定一个回调函数实现的,而是我们利用了浏览器允许跨源请求
点击
接收后台数据
hello
无标题页
点 击
接收后台数据
hello

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档