Ajax與JSON的一些學習總結(jié)

//// Creates a XMLHttpRequest object. 
var req = new XMLHttpRequest(); 
 
也許有人會說：“這可不行??！IE6不支持原始的XHR對象”，確實是這樣，我們在后面將會介紹支持IE6或更老版本創(chuàng)建XHR對象的方法。 
XMLHttpRequest的用法 
在創(chuàng)建XHR對象后，接著我們要調(diào)用一個初始化方法open()，它接受五個參數(shù)具體定義如下： 
 代碼如下:

void open( 
DOMString method, //"GET", "POST", "PUT", "DELETE" 
DOMString url, 
optional boolean async, 
optional DOMString user, 
optional DOMString password 
); 
 
通過上面的定義我們知道open()方法的簽名包含五個參數(shù)，其中有參數(shù)method和url地址是必填的，假設我們針對URL: myxhrtest.aspx發(fā)送GET請求獲取數(shù)據(jù)，具體定義如下： 
 代碼如下:

var req = new XMLHttpRequest(); 
req.open( 
"GET", 
"myxhrtest.aspx", 
false 
); 
 
通過上述代碼會啟動一個針對myxhrtest.aspx的GET請求，這里有兩點要注意：一是URL相對于執(zhí)行代碼的當前頁面（使用絕對路徑）；二是調(diào)用open()方法并不會真正發(fā)送請求，而只是啟動一個請求準備發(fā)送。 
只能向同一個域中使用相同端口和協(xié)議的URL中發(fā)送請求；如果URL與啟動請求的頁面有任何差別，都會引發(fā)安全錯誤。 
要真正發(fā)送請求要使用send()方法，send()方法接受一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)，如果不需要通過請求主體發(fā)送數(shù)據(jù)，我們必須傳遞一個null值。在調(diào)用send()之后，請求就會被分派到服務器，完整Ajax請求代碼如下： 
 代碼如下:

var req = new XMLHttpRequest(); 
req.open( 
"GET", 
"myxhrtest.aspx", 
false 
); 
req.send(null); 
 
在發(fā)送請求之后，我們需要檢查請求是否執(zhí)行成功，首先可以通過status屬性判斷，一般來說，可以將HTTP狀態(tài)代碼為200作為成功標志。這時，響應主體內(nèi)容會保存到responseText中。此外，狀態(tài)代碼為304表示請求的資源并沒有被修改，可以直接使用瀏覽器緩存的數(shù)據(jù)，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的同步請求，如果我們發(fā)送異步請求，那么在請求過程中javascript代碼會繼續(xù)執(zhí)行，這時可以通過readyState屬性判斷請求的狀態(tài)，當readyState = 4時，表示收到全部響應數(shù)據(jù)，屬性值的定義如下： 





readyState值

描述


0

未初始化；尚未調(diào)用open()方法


1

啟動；尚未調(diào)用send()方法


2

已發(fā)送；但尚未收到響應


3

接收；已經(jīng)收到部分響應數(shù)據(jù)


4

完成；收到全部響應數(shù)據(jù)
表1 readyState屬性值 
同步請求：發(fā)生請求后，要等待服務器執(zhí)行完畢才繼續(xù)執(zhí)行當前代碼。 
異步請求：發(fā)生請求后，無需等到服務器執(zhí)行完畢，可以繼續(xù)執(zhí)行當前代碼。 
現(xiàn)在我們要增加判斷readyState屬性值，當readyState = 4時，表示全部數(shù)據(jù)接收完成， 所以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同源請求 
現(xiàn)在我們對Ajax的請求實現(xiàn)有了初步的了解，接下來我們將通過具體的例子說明Ajax請求的應用場合和局限。 
在日常網(wǎng)絡生活中，我們在瀏覽器的地址中輸入要訪問的URL并且回車，瀏覽器會向服務器發(fā)送請求，當服務器收到請求后，把相應的請求頁面發(fā)送回瀏覽器，我們會發(fā)現(xiàn)頁面大部分加載完畢，有些還沒有加載完畢?？偟脕碚f，采用異步加載方式不會影響已加載完畢的頁面瀏覽，我們可以通過Ajax實現(xiàn)異步加載。 
這里我們以AdventureWorks數(shù)據(jù)庫為例，把產(chǎn)品表（Product）中的數(shù)據(jù)通過報表呈現(xiàn)給用戶，我們可以通過多種方法實現(xiàn)該報表需求，這里我們將通過Ajax實現(xiàn)該功能。 
首先，我們要把后臺數(shù)據(jù)轉(zhuǎn)換為JSON格式，接下來我們定義Product表的數(shù)據(jù)庫訪問對象（DAO），具體的實現(xiàn)代碼如下： 
 代碼如下:

/// <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表的數(shù)據(jù)庫訪問對象——ProductDao，它包含四個屬性分別是產(chǎn)品的Id，名稱，序列號和銷售數(shù)量。 
接下來，讓我們實現(xiàn)Product表的數(shù)據(jù)庫操作類。 
 代碼如下:

/// <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; 
} 
} 
 
前面我們實現(xiàn)了Product表的數(shù)據(jù)庫操作類——ProductManager，它包含兩個私有字段Quey和_products，還有一個獲取Product表中數(shù)據(jù)的方法——GetAllProducts()。 
通過實現(xiàn)ProductDao和ProductManager，而且我們提供GetAllProducts()方法，獲取Product表中的數(shù)據(jù)，接下來我們要調(diào)用該方法獲取數(shù)據(jù)。 
為了使數(shù)據(jù)通過JSON格式傳遞給頁面，這里我們要創(chuàng)建一般處理程序（ASHX文件）， 
一般處理程序適用場合： 
創(chuàng)建動態(tài)圖片 
返回REST風格的XML或JSON數(shù)據(jù) 
自定義HTML 

圖1一般處理程序 
把一般處理程序文件添加到項目中時，會添加一個擴展名為.ashx的文件，現(xiàn)在我們創(chuàng)建一個一般處理程序ProductInfo，具體代碼如下： 
 代碼如下:

<%@ WebHandler Language="C#" Class="ProductInfo" %> 
using System.Runtime.Serialization.Json; 
using System.Web; 
using ASP.App_Code; 
/// <summary> 
/// The product data handler. 
/// </summary> 
public class ProductInfo : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "application/json"; 
// Creates a <see cref="ProductManager"/> 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類實現(xiàn)了IHttpHandler接口，該接口包含一個方法ProcessRequest()方法和一個屬性IsReusable。ProcessRequest()方法用于處理入站的Http請求。在默認情況下，ProductInfo類會把內(nèi)容類型改為application/json，然后我們把數(shù)據(jù)通過JSON格式寫入輸入流中；IsReusable屬性表示相同的處理程序是否可以用于多個請求，這里我們設置為false，如果為了提高性能也可以設置為true。 
如下圖所示，我們通過ProductInfo類成功地實現(xiàn)獲取數(shù)據(jù)到響應流中，并且以JSON格式顯示出來。 

圖2 Http請求 
當我們請求ProductInfo時， 首先它會調(diào)用ProcessRequest()方法，接著調(diào)用GetAllProducts()方法從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后把數(shù)據(jù)通過JSON格式寫入到響應流中。 
現(xiàn)在，我們已經(jīng)成功地把數(shù)據(jù)通過JSON格式寫入到響應流當中，接著我們將通過Ajax方式請求數(shù)據(jù)并且把數(shù)據(jù)顯示到頁面中。 
首先，我們定義方法createXHR()用來創(chuàng)建XMLHttpRequest對象，前面我們提到IE6或者更老的版本不支持XMLHttpRequest()方法來創(chuàng)建XMLHttpRequest對象，所以我們要在createXHR()方法中，增加判斷當前瀏覽器是否IE6或更老的版本，如果是，就要通過MSXML庫的一個ActiveX對象實現(xiàn)。因此，在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(); 
}); 
 
前面我們定義了一個比較通用的方法用來創(chuàng)建XMLHttpRequest對象，并且它支持IE6或更老版本創(chuàng)建XMLHttpRequest對象，接下來我們將通過Ajax方法請求數(shù)據(jù)。 
 代碼如下:

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發(fā)生請求的方法，所以不再重復介紹了，但我們注意到GetDataFromServer()方法中，獲取responseText數(shù)據(jù)（JSON格式），然后通過parse()方法把JSON格式數(shù)據(jù)轉(zhuǎn)換為Javascript對象，最后把數(shù)據(jù)插入到div中，頁面呈現(xiàn)效果如下： 

圖3 Ajax請求結(jié)果 
現(xiàn)在，我們成功地把數(shù)據(jù)

#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現(xiàn)在頁面效果好多了。 

圖4 Ajax請求結(jié)果 
同源策略與跨源策略 
上面我們獲取頁面和數(shù)據(jù)都是在同源請求情況下，也就是說，客戶端瀏覽器請求的頁面和數(shù)據(jù)都是屬于同一域名、同一端口和同協(xié)議。 
同源策略：阻止從一個域上加載的腳本獲取或操作另一個域上的文檔屬性。也就是說，受到請求的URL的域必須與當前Web頁面的域相同、相同端口。這意味著瀏覽器隔離來自不同源的內(nèi)容，以防止它們之間的操作。 

圖5同源請求過程 
在一些情況下，我們不可以避免地要地需要從其他域名或服務器中跨域請求數(shù)據(jù)，但前面提到Ajax只能向同一個域中使用相同端口和協(xié)議的URL中發(fā)送請求；如果URL與啟動請求的頁面有任何差別，都會引發(fā)安全錯誤。 
跨源策略（CORS）：是一個Web瀏覽器技術(shù)規(guī)范，它定義了一個方法讓Web服務器允許其他域名頁面訪問它的資源?？缭床呗远x了一個方法讓瀏覽器和服務器可以交互決定是否允許跨源請求。 

圖6跨源請求過程 
大家注意到同源請求中我們使用的是JSON格式，但在跨源請求中卻是使用JSONP，這時大家可能有點困惑，坦然我剛開始學習的時候也是這樣的。 
首先我們必須理解JSON和JSONP的區(qū)別：JSON是一種數(shù)據(jù)格式，而JSONP像是通過一個方法名來封裝JSON格式；由于瀏覽器允許跨源請求<script>資源，如我們的HTML頁面代碼中使用了Google的jQuery庫，當我們Web程序發(fā)送跨源請求后，服務器給我們提供響應數(shù)據(jù)，但服務器無法預知接受JSON數(shù)據(jù)的方法名，所以我們要提供一個方法名。 
Ajax跨源請求 
跨域請求數(shù)據(jù)解決方案主要有如下解決方法： 
JSONP方式 
表單POST方式 
服務器代理 
Html5的XDomainRequest 
Flash request 
在介紹JSONP方式解決跨域請求數(shù)據(jù)之前，首先我們看看JSONP的定義。 
JSONP（JSON with Padding）是一個非官方的協(xié)議，它允許在服務器端集成Script tags返回至客戶端，通過Javascript callback的形式實現(xiàn)跨域訪問（這僅僅是JSONP簡單的實現(xiàn)形式）。 
由于同源策略的限制，XMLHttpRequest只允許請求當前源（域名、協(xié)議、端口）的資源，為了實現(xiàn)跨域請求，可以通過script標簽實現(xiàn)跨域請求，然后在服務端