Ajax與JSON的示例分析

這篇文章主要介紹了Ajax與JSON的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括安達(dá)網(wǎng)站建設(shè)、安達(dá)網(wǎng)站制作、安達(dá)網(wǎng)頁(yè)制作以及安達(dá)網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，安達(dá)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到安達(dá)省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

1.1.1 摘要
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡(jiǎn)稱(chēng)XHR），可以通過(guò)使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過(guò)DOM將數(shù)據(jù)插入到頁(yè)面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無(wú)關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式。

XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，具體作用如下：

在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)
在頁(yè)面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
在頁(yè)面已加載后從服務(wù)器接收數(shù)據(jù)
在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)

1.1.2 正文
XMLHttpRequest是一個(gè)JavaScript對(duì)象，它是由微軟設(shè)計(jì)，并且被Mozilla、Apple和Google采納，W3C正在標(biāo)準(zhǔn)化它。它提供了一種簡(jiǎn)單的方法來(lái)檢索URL中的數(shù)據(jù)。

我們要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest實(shí)例，只需new一個(gè)就OK了：

復(fù)制代碼代碼如下:

//// Creates a XMLHttpRequest object.
var req = new XMLHttpRequest();

也許有人會(huì)說(shuō)：“這可不行??！IE6不支持原始的XHR對(duì)象”，確實(shí)是這樣，我們?cè)诤竺鎸?huì)介紹支持IE6或更老版本創(chuàng)建XHR對(duì)象的方法。

XMLHttpRequest的用法
在創(chuàng)建XHR對(duì)象后，接著我們要調(diào)用一個(gè)初始化方法open()，它接受五個(gè)參數(shù)具體定義如下：

復(fù)制代碼代碼如下:

void open(
DOMString method, //"GET", "POST", "PUT", "DELETE"
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
);

通過(guò)上面的定義我們知道open()方法的簽名包含五個(gè)參數(shù)，其中有參數(shù)method和url地址是必填的，假設(shè)我們針對(duì)URL: myxhrtest.aspx發(fā)送GET請(qǐng)求獲取數(shù)據(jù)，具體定義如下：

復(fù)制代碼代碼如下:

var req = new XMLHttpRequest();
req.open(
"GET",
"myxhrtest.aspx",
false
);

通過(guò)上述代碼會(huì)啟動(dòng)一個(gè)針對(duì)myxhrtest.aspx的GET請(qǐng)求，這里有兩點(diǎn)要注意：一是URL相對(duì)于執(zhí)行代碼的當(dāng)前頁(yè)面（使用絕對(duì)路徑）；二是調(diào)用open()方法并不會(huì)真正發(fā)送請(qǐng)求，而只是啟動(dòng)一個(gè)請(qǐng)求準(zhǔn)備發(fā)送。

只能向同一個(gè)域中使用相同端口和協(xié)議的URL中發(fā)送請(qǐng)求；如果URL與啟動(dòng)請(qǐng)求的頁(yè)面有任何差別，都會(huì)引發(fā)安全錯(cuò)誤。

要真正發(fā)送請(qǐng)求要使用send()方法，send()方法接受一個(gè)參數(shù)，即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)，如果不需要通過(guò)請(qǐng)求主體發(fā)送數(shù)據(jù)，我們必須傳遞一個(gè)null值。在調(diào)用send()之后，請(qǐng)求就會(huì)被分派到服務(wù)器，完整Ajax請(qǐng)求代碼如下：

復(fù)制代碼代碼如下:

var req = new XMLHttpRequest();
req.open(
"GET",
"myxhrtest.aspx",
false
);
req.send(null);

在發(fā)送請(qǐng)求之后，我們需要檢查請(qǐng)求是否執(zhí)行成功，首先可以通過(guò)status屬性判斷，一般來(lái)說(shuō)，可以將HTTP狀態(tài)代碼為200作為成功標(biāo)志。這時(shí)，響應(yīng)主體內(nèi)容會(huì)保存到responseText中。此外，狀態(tài)代碼為304表示請(qǐng)求的資源并沒(méi)有被修改，可以直接使用瀏覽器緩存的數(shù)據(jù)，Ajax的同步請(qǐng)求代碼如下：

復(fù)制代碼代碼如下:

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的同步請(qǐng)求，如果我們發(fā)送異步請(qǐng)求，那么在請(qǐng)求過(guò)程中javascript代碼會(huì)繼續(xù)執(zhí)行，這時(shí)可以通過(guò)readyState屬性判斷請(qǐng)求的狀態(tài)，當(dāng)readyState = 4時(shí)，表示收到全部響應(yīng)數(shù)據(jù)，屬性值的定義如下：

readyState值	描述
0	未初始化；尚未調(diào)用open()方法
1	啟動(dòng)；尚未調(diào)用send()方法
2	已發(fā)送；但尚未收到響應(yīng)
3	接收；已經(jīng)收到部分響應(yīng)數(shù)據(jù)
4	完成；收到全部響應(yīng)數(shù)據(jù)

表1 readyState屬性值

同步請(qǐng)求：發(fā)生請(qǐng)求后，要等待服務(wù)器執(zhí)行完畢才繼續(xù)執(zhí)行當(dāng)前代碼。

異步請(qǐng)求：發(fā)生請(qǐng)求后，無(wú)需等到服務(wù)器執(zhí)行完畢，可以繼續(xù)執(zhí)行當(dāng)前代碼。

現(xiàn)在我們要增加判斷readyState屬性值，當(dāng)readyState = 4時(shí)，表示全部數(shù)據(jù)接收完成，所以Ajax的異步請(qǐng)求代碼如下：

復(fù)制代碼代碼如下:

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同源請(qǐng)求
現(xiàn)在我們對(duì)Ajax的請(qǐng)求實(shí)現(xiàn)有了初步的了解，接下來(lái)我們將通過(guò)具體的例子說(shuō)明Ajax請(qǐng)求的應(yīng)用場(chǎng)合和局限。

在日常網(wǎng)絡(luò)生活中，我們?cè)跒g覽器的地址中輸入要訪(fǎng)問(wèn)的URL并且回車(chē)，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求，當(dāng)服務(wù)器收到請(qǐng)求后，把相應(yīng)的請(qǐng)求頁(yè)面發(fā)送回瀏覽器，我們會(huì)發(fā)現(xiàn)頁(yè)面大部分加載完畢，有些還沒(méi)有加載完畢?？偟脕?lái)說(shuō)，采用異步加載方式不會(huì)影響已加載完畢的頁(yè)面瀏覽，我們可以通過(guò)Ajax實(shí)現(xiàn)異步加載。

這里我們以AdventureWorks數(shù)據(jù)庫(kù)為例，把產(chǎn)品表（Product）中的數(shù)據(jù)通過(guò)報(bào)表呈現(xiàn)給用戶(hù)，我們可以通過(guò)多種方法實(shí)現(xiàn)該報(bào)表需求，這里我們將通過(guò)Ajax實(shí)現(xiàn)該功能。

首先，我們要把后臺(tái)數(shù)據(jù)轉(zhuǎn)換為JSON格式，接下來(lái)我們定義Product表的數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)對(duì)象（DAO），具體的實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

/// <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ù)庫(kù)訪(fǎng)問(wèn)對(duì)象——ProductDao，它包含四個(gè)屬性分別是產(chǎn)品的Id，名稱(chēng)，序列號(hào)和銷(xiāo)售數(shù)量。

接下來(lái)，讓我們實(shí)現(xiàn)Product表的數(shù)據(jù)庫(kù)操作類(lèi)。

復(fù)制代碼代碼如下:

/// <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;
}
}

前面我們實(shí)現(xiàn)了Product表的數(shù)據(jù)庫(kù)操作類(lèi)——ProductManager，它包含兩個(gè)私有字段Quey和_products，還有一個(gè)獲取Product表中數(shù)據(jù)的方法——GetAllProducts()。

通過(guò)實(shí)現(xiàn)ProductDao和ProductManager，而且我們提供GetAllProducts()方法，獲取Product表中的數(shù)據(jù)，接下來(lái)我們要調(diào)用該方法獲取數(shù)據(jù)。

為了使數(shù)據(jù)通過(guò)JSON格式傳遞給頁(yè)面，這里我們要?jiǎng)?chuàng)建一般處理程序（ASHX文件），

一般處理程序適用場(chǎng)合：

創(chuàng)建動(dòng)態(tài)圖片
返回REST風(fēng)格的XML或JSON數(shù)據(jù)
自定義HTML

Ajax與JSON的示例分析

圖1一般處理程序

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

復(fù)制代碼代碼如下:

<%@ 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類(lèi)實(shí)現(xiàn)了IHttpHandler接口，該接口包含一個(gè)方法ProcessRequest()方法和一個(gè)屬性IsReusable。ProcessRequest()方法用于處理入站的Http請(qǐng)求。在默認(rèn)情況下，ProductInfo類(lèi)會(huì)把內(nèi)容類(lèi)型改為application/json，然后我們把數(shù)據(jù)通過(guò)JSON格式寫(xiě)入輸入流中；IsReusable屬性表示相同的處理程序是否可以用于多個(gè)請(qǐng)求，這里我們?cè)O(shè)置為false，如果為了提高性能也可以設(shè)置為true。
如下圖所示，我們通過(guò)ProductInfo類(lèi)成功地實(shí)現(xiàn)獲取數(shù)據(jù)到響應(yīng)流中，并且以JSON格式顯示出來(lái)。

Ajax與JSON的示例分析

圖2 Http請(qǐng)求
當(dāng)我們請(qǐng)求ProductInfo時(shí)，首先它會(huì)調(diào)用ProcessRequest()方法，接著調(diào)用GetAllProducts()方法從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，然后把數(shù)據(jù)通過(guò)JSON格式寫(xiě)入到響應(yīng)流中。
現(xiàn)在，我們已經(jīng)成功地把數(shù)據(jù)通過(guò)JSON格式寫(xiě)入到響應(yīng)流當(dāng)中，接著我們將通過(guò)Ajax方式請(qǐng)求數(shù)據(jù)并且把數(shù)據(jù)顯示到頁(yè)面中。
首先，我們定義方法createXHR()用來(lái)創(chuàng)建XMLHttpRequest對(duì)象，前面我們提到IE6或者更老的版本不支持XMLHttpRequest()方法來(lái)創(chuàng)建XMLHttpRequest對(duì)象，所以我們要在createXHR()方法中，增加判斷當(dāng)前瀏覽器是否IE6或更老的版本，如果是，就要通過(guò)MSXML庫(kù)的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)。因此，在IE中可能遇到三種不同版本的XHR對(duì)象（MSXML2.XMLHttp6.0，MSXML2.XMLHttp3.0和MSXML2.XMLHttp）。

復(fù)制代碼代碼如下:

// 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();
});

前面我們定義了一個(gè)比較通用的方法用來(lái)創(chuàng)建XMLHttpRequest對(duì)象，并且它支持IE6或更老版本創(chuàng)建XMLHttpRequest對(duì)象，接下來(lái)我們將通過(guò)Ajax方法請(qǐng)求數(shù)據(jù)。

復(fù)制代碼代碼如下:

由于前面我們介紹過(guò)Ajax發(fā)生請(qǐng)求的方法，所以不再重復(fù)介紹了，但我們注意到GetDataFromServer()方法中，獲取responseText數(shù)據(jù)（JSON格式），然后通過(guò)parse()方法把JSON格式數(shù)據(jù)轉(zhuǎn)換為Javascript對(duì)象，最后把數(shù)據(jù)插入到div中，頁(yè)面呈現(xiàn)效果如下：

Ajax與JSON的示例分析

圖3 Ajax請(qǐng)求結(jié)果

現(xiàn)在，我們成功地把數(shù)據(jù)輸出到頁(yè)面當(dāng)中，也許用戶(hù)還會(huì)覺(jué)得用戶(hù)體驗(yàn)不好，那么我們給就該頁(yè)面增加CSS樣式。

由于時(shí)間的關(guān)系，我們已經(jīng)把CSS樣式定義好了，具體如下：

復(fù)制代碼代碼如下:

#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;
}

我們刷新一下頁(yè)面，OK現(xiàn)在頁(yè)面效果好多了。

Ajax與JSON的示例分析

圖4 Ajax請(qǐng)求結(jié)果

同源策略與跨源策略
上面我們獲取頁(yè)面和數(shù)據(jù)都是在同源請(qǐng)求情況下，也就是說(shuō)，客戶(hù)端瀏覽器請(qǐng)求的頁(yè)面和數(shù)據(jù)都是屬于同一域名、同一端口和同協(xié)議。

同源策略：阻止從一個(gè)域上加載的腳本獲取或操作另一個(gè)域上的文檔屬性。也就是說(shuō)，受到請(qǐng)求的URL的域必須與當(dāng)前Web頁(yè)面的域相同、相同端口。這意味著瀏覽器隔離來(lái)自不同源的內(nèi)容，以防止它們之間的操作。

Ajax與JSON的示例分析

圖5同源請(qǐng)求過(guò)程

在一些情況下，我們不可以避免地要地需要從其他域名或服務(wù)器中跨域請(qǐng)求數(shù)據(jù)，但前面提到Ajax只能向同一個(gè)域中使用相同端口和協(xié)議的URL中發(fā)送請(qǐng)求；如果URL與啟動(dòng)請(qǐng)求的頁(yè)面有任何差別，都會(huì)引發(fā)安全錯(cuò)誤。

跨源策略（CORS）：是一個(gè)Web瀏覽器技術(shù)規(guī)范，它定義了一個(gè)方法讓W(xué)eb服務(wù)器允許其他域名頁(yè)面訪(fǎng)問(wèn)它的資源?？缭床呗远x了一個(gè)方法讓瀏覽器和服務(wù)器可以交互決定是否允許跨源請(qǐng)求。

Ajax與JSON的示例分析

圖6跨源請(qǐng)求過(guò)程

大家注意到同源請(qǐng)求中我們使用的是JSON格式，但在跨源請(qǐng)求中卻是使用JSONP，這時(shí)大家可能有點(diǎn)困惑，坦然我剛開(kāi)始學(xué)習(xí)的時(shí)候也是這樣的。

首先我們必須理解JSON和JSONP的區(qū)別：JSON是一種數(shù)據(jù)格式，而JSONP像是通過(guò)一個(gè)方法名來(lái)封裝JSON格式；由于瀏覽器允許跨源請(qǐng)求<script>資源，如我們的HTML頁(yè)面代碼中使用了Google的jQuery庫(kù)，當(dāng)我們Web程序發(fā)送跨源請(qǐng)求后，服務(wù)器給我們提供響應(yīng)數(shù)據(jù)，但服務(wù)器無(wú)法預(yù)知接受JSON數(shù)據(jù)的方法名，所以我們要提供一個(gè)方法名。

Ajax跨源請(qǐng)求
跨域請(qǐng)求數(shù)據(jù)解決方案主要有如下解決方法：

JSONP方式
表單POST方式
服務(wù)器代理
Html5的XDomainRequest
Flash request
在介紹JSONP方式解決跨域請(qǐng)求數(shù)據(jù)之前，首先我們看看JSONP的定義。

JSONP（JSON with Padding）是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶(hù)端，通過(guò)Javascript callback的形式實(shí)現(xiàn)跨域訪(fǎng)問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。

由于同源策略的限制，XMLHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源，為了實(shí)現(xiàn)跨域請(qǐng)求，可以通過(guò)script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請(qǐng)求。

假設(shè)博客園提供一個(gè)API接口：http://www.cnblogs.com/hotblogs/json?，供開(kāi)發(fā)者調(diào)用獲取熱門(mén)博文。

這里我們可以通過(guò)兩種方式調(diào)用該接口：

1. 用Javascript定義回調(diào)函數(shù)
其實(shí)，通過(guò)Javascript定義回調(diào)函數(shù)調(diào)用該接口比較直觀，我們只需告訴服務(wù)器接收數(shù)據(jù)的方法名就OK了，比如：

http://www.cnblogs.com/hotblogs/json? callback=myFunction

其中myFunction是我們?cè)陧?yè)面自定義的函數(shù)用來(lái)接收服務(wù)器回傳的數(shù)據(jù)，myFunction的定義如下：

復(fù)制代碼代碼如下:

// The call back function.
function myFunction(data) {
// Your code here.
}

2. 使用jQuery的Ajax方法
假設(shè)我們想在博客中增加顯示浪微博的公共微博信息，我們可以在博客中調(diào)用微博提供的API獲取跨源數(shù)據(jù)，接下來(lái)，我們將使用jQuery的Ajax方法獲取跨域數(shù)據(jù)。

首先，查看微博API文檔找到了公共微博的API接口statuses/public_timeline 獲取最新的公共微博消息，它支持JSON或XML格式數(shù)據(jù)。

參數(shù)	必選	類(lèi)型及范圍	說(shuō)明
source	true	string	申請(qǐng)應(yīng)用時(shí)分配的AppKey，調(diào)用接口時(shí)候代表應(yīng)用的唯一身份。（采用OAuth授權(quán)方式不需要此參數(shù)）
count	false	int，缺省值20，最大值200	每次返回的記錄數(shù)
count	false	int，缺省值20，最大值200	每次返回的記錄數(shù)

表2請(qǐng)求參數(shù)

上面的請(qǐng)求參數(shù)只有source（AppKey）是必須的，所以我們需要向微博申請(qǐng)AppKey，在調(diào)用API時(shí)，只需把我們的AppKey傳遞給接口就OK了。

接下來(lái)讓我們看一下微博數(shù)據(jù)組成，這里我們使用JSON viewer查看微博的數(shù)據(jù)組成，具體數(shù)據(jù)如下：

Ajax與JSON的示例分析

圖7微博JSON數(shù)據(jù)

通過(guò)上圖，我們知道微博的數(shù)據(jù)信息很豐富，它是由一些基礎(chǔ)數(shù)據(jù)類(lèi)型和復(fù)雜數(shù)據(jù)類(lèi)型user組成的，接下來(lái)我們將使用jQuery實(shí)現(xiàn)調(diào)用微博接口方法。
首先，我們定義一個(gè)全局的對(duì)象，它包含三個(gè)屬性分別是：numWeibo、appendTo和appKey，還有三個(gè)方法loadWeibo()、timeAgo()和clean()，具體定義如下：

復(fù)制代碼代碼如下:

JQWeibo = {
// The number of weibos display in the page.
// Sets the number of weibos, append class and app key.
numWeibo: 15,
appendTo: '#jsWeibo',
// The appkey you apply from weibo.
appKey: YourAppKey,
// The function to get weibo data.
loadWeibo: function() {
},
/**
* Convert the time to relative time.
* @return {string} relative time like "8 minutes ago"
*/
timeAgo: function(dateString) {
},
ify: {
clean: function(weibo) {
return this.hash(this.at(this.list(this.link(weibo))));
}
} // ify
};

上面我們定義了一個(gè)對(duì)象JQWeibo，其中l(wèi)oadWeibo()方法使用jQuery的Ajax方法向微博API發(fā)送跨源請(qǐng)求，接下來(lái)讓我們實(shí)現(xiàn)該方法吧。

復(fù)制代碼代碼如下:

// The function to get weibo data.
loadWeibo: function() {
$.ajax({
// Weibo API.
url: "http://api.t.sina.com.cn/statuses/public_timeline.json",
type: "GET",
dataType: "jsonp",
data: {
source: JQWeibo.appKey,
count: JQWeibo.numWeibo
},
// When the requet completed, then invokes success function.
success: function(data, textStatus, xhr) {
// Sets html structure.
var html =
'<div class="weibo">' +
'<a href="http://weibo.com/DOMAIN" target="_blank">USER</a>' +
'：WEIBO_TEXT<div class="time">AGO</div>';
// Appends weibos into html page.
for (var i = 0; i < data.length; i++) {
$(JQWeibo.appendTo).append(
html.replace('WEIBO_TEXT', JQWeibo.ify.clean(data[i].text))
// Uses regex and declare DOMAIN as global, if found replace all.
.replace(/DOMAIN/g, data[i].user.domain)
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQWeibo.timeAgo(data[i].created_at))
);
}
}
})
}

現(xiàn)在，我們使用$.ajax()方法向微博API發(fā)送跨源請(qǐng)求，而且我們向API傳遞了JQWeibo.appKey和JQWeibo.numWeibo，當(dāng)請(qǐng)求完成后，調(diào)用Success()方法把JSON數(shù)據(jù)插入的頁(yè)面當(dāng)中。
頁(yè)面的HTML代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Weibo Feed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/WeiboFeed.css">
</head>
<body>
<div id="jsWeibo"></div>
</body>
</html>

Ajax與JSON的示例分析
圖8 跨源數(shù)據(jù)
如上圖所示，我們使用$.ajax()方法調(diào)用公共微博接口，當(dāng)成功獲取服務(wù)器回調(diào)數(shù)據(jù)插入到我們的頁(yè)面當(dāng)中。
1.1.3 總結(jié)
本文主要介紹了Ajax在同源請(qǐng)求適用性，但在跨源請(qǐng)求中其存在的局限性，進(jìn)而介紹Ajax和JSONP在跨源請(qǐng)求下解決方法。
回答qianlifeng關(guān)于跨源請(qǐng)求的幾個(gè)問(wèn)題：
1.一般的跨源不用jsonp請(qǐng)求為什么會(huì)報(bào)錯(cuò)？和同源的不都是一個(gè)請(qǐng)求么？（可能對(duì)ajax了解不深）
答：首先跨源請(qǐng)求的解決方法不僅僅有JSON，本文中提及了其他方法，如：表單POST方式、服務(wù)器代理、Html5的XDomainRequest和Flash request等；而你提到報(bào)錯(cuò)，我覺(jué)得你首先要確認(rèn)數(shù)據(jù)格式是否正確。關(guān)于跨原請(qǐng)求和同源請(qǐng)求本文已經(jīng)給出了介紹。
2.關(guān)于“用Javascript定義回調(diào)函數(shù)”那塊看的不是很明白。傳遞當(dāng)前頁(yè)面的一個(gè)js方法給跨源服務(wù)器，為什么就能跨源請(qǐng)求了呢？（JSONP？）服務(wù)端根據(jù)這個(gè)js方法做了什么操作??？
答：首先我們理解JSON是一種數(shù)據(jù)格式，而JSONP像似通過(guò)一個(gè)方法名來(lái)封裝JSON格式；而跨源請(qǐng)求不是說(shuō)指定一個(gè)回調(diào)函數(shù)實(shí)現(xiàn)的，而是我們利用了瀏覽器允許跨源請(qǐng)求<script>資源，你也可以我的HTML代碼中使用的是Google提供的jQuery庫(kù)，這也說(shuō)明了<script>資源可以跨源請(qǐng)求。當(dāng)我們發(fā)送跨源請(qǐng)求后，服務(wù)器會(huì)返回JSONP，但服務(wù)器無(wú)法預(yù)知接受JSON數(shù)據(jù)的方法名，所有我們要把函數(shù)名告訴（傳遞）服務(wù)器。

復(fù)制代碼代碼如下:

//JSON
{"name":"JK_Rush","id":23}
//JSONP
func({"name":"JK_Rush","id":23});

3.看你新浪微博的那個(gè)例子，是jquery的ajax對(duì)跨源做了處理？能不能說(shuō)說(shuō)您提到的兩種跨源方式的區(qū)別或者不同的應(yīng)用場(chǎng)景，還是隨便都一樣？
答：是通過(guò)$.ajax()方法實(shí)現(xiàn)的，如果你想使用動(dòng)態(tài)Javascript實(shí)現(xiàn)也可以；至于兩種跨源的區(qū)別已經(jīng)在博文中指出了。
回答@On the road....關(guān)于JSON反序列化為對(duì)象的實(shí)現(xiàn)：
答：一般我們可以通過(guò)三種方法把JSON數(shù)據(jù)反序列化為對(duì)象，分別是：ASP.NET AJAX中引入的JavaScriptSerializer，WCF中引入的DataContractJsonSerializer，以及Json.NET。
假設(shè)，我們獲取到員工信息（employee）的JSON數(shù)據(jù)，它包含兩個(gè)屬性分別是id和復(fù)雜屬性name，具體如下所示：

復(fù)制代碼代碼如下:

[
{
"id": "82105",
"name": {
"lastName": "Huang",
"firstName": "JK"
}
},
{
"id": "82106",
"name": {
"lastName": "Leung",
"firstName": "Cindy"
}
}
]
string data = "[{\"id\":\"82105\",\"fullname\":{\"lastName\":\"Huang\",\"firstName\":\"JK\"}}," +
"{\"id\":\"82106\",\"fullname\":{\"lastName\":\"Leung\",\"firstName\":\"Cindy\"}}]";

根據(jù)上述JSON數(shù)據(jù)的組成，我們定義出相應(yīng)的對(duì)象模型，具體定義如下：

復(fù)制代碼代碼如下:

// The Employee model.
public class Employee
{
public int Id { get; set; }
public Name FullName { get; set; }
}
// The Name model.
public class Name
{
public string FirstName { get; set; }
public string LastName { get; set; }
}

接下來(lái)，我們將介紹使用JavaScriptSerializer，Json.NET和DataContractJsonSerializer反序列化JSON數(shù)據(jù)為對(duì)象。
JavaScriptSerializer

復(fù)制代碼代碼如下:

var serializer = new JavaScriptSerializer();
var employees= serializer.Deserialize<Employee[]>(data);Json.NET
using (var stringReader = new StringReader(data))
using (var jsonTextReader = new JsonTextReader(stringReader))
{
var serializer = new JsonSerializer();
var employees = serializer.Deserialize<Employee[]>(jsonTextReader);
}

DataContractJsonSerializer
對(duì)于使用WCF的DataContractJsonSerializer方法，我們需要在對(duì)象模型添加DataContract和DataMember屬性，具體定義如下：

復(fù)制代碼代碼如下:

[DataContract]
public class Employee
{
[DataMember(Name = "id")]
public int Id { get; set; }
[DataMember(Name = "fullname")]
public Name FullName { get; set; }
}
[DataContract]
public class Name
{
[DataMember(Name = "firstName")]
public string FirstName { get; set; }
[DataMember(Name = "lastName")]
public string LastName { get; set; }
}

接著我們使用ReadObjects()方法把JSON數(shù)據(jù)轉(zhuǎn)換為對(duì)象。

復(fù)制代碼代碼如下:

using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(data)))
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(List<Employee>));
var employee = (List<Employee>)serializer.ReadObject(ms);
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Ajax與JSON的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章題目：Ajax與JSON的示例分析
標(biāo)題鏈接：http://aaarwkj.com/article14/jejdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站改版、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

Ajax與JSON的示例分析