Ajax學習(5)—使用 JSON 進行資料轉送

來源:互聯網
上載者:User

   在非同步應用程式中發送和接收資訊時,可以選擇以純文字和 XML 作為資料格式。Ajax 的另一種有用的資料格式 JavaScript Object Notation(JSON),使用它更輕鬆地在應用程式中移動資料和對象。
在許多非同步應用程式中如何恰當地使用純文字和簡單的成對的名稱和數值。可以將資料群組合成下面這樣的形式:

mailto:firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

這樣就行了,不需要再做什麼了。實際上,Web 老手會意識到通過 GET 請求發送的資訊就是採用這種格式。
如果使用 XML 資料格式,就可以將資料群組合成下面的形式:

<request>
  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>brett@newInstance.com</email>
</request>

這裡的資料與前面看到的相同,但是這一次採用 XML 格式。這沒什麼了不起的;這隻是另一種資料格式,使我們能夠使用 XML 而不是純文字和成對的名稱和數值。
實際上,除非有某種限制迫使您轉向 XML,否則用不著考慮使用別的資料格式。顯然,如果要向需要 XML 格式的輸入的伺服器端程式發送資料,那麼希望使用 XML 作為資料格式。但是,在大多數情況下,對於需要嚮應用程式發送多段資訊的伺服器,XML 是更好的選擇;換句話說,XML 通常更適合用來向 Ajax 應用程式做出響應,而不是從 Ajax 應用程

序發出請求。
在使用成對的名稱和數值或 XML 時,實際上是使用 JavaScript 從應用程式中取得資料並將資料轉換成另一種資料格式。在這些情況下,JavaScript 在很大程度上作為一種資料操縱語言,用來移動和操縱來自 Web 表單的資料,並將資料轉換為一種適合發送給伺服器端程式的格式。、
但是,有時候 JavaScript 不僅僅作為格式化語言使用。在這些情況下,實際上使用 JavaScript 語言中的對象來表示資料,而不僅是將來自 Web 表單的資料放進請求中。在這些情況下,從 JavaScript 對象中提取資料,然後再將資料放進成對的名稱和數值或 XML,就有點兒多此一舉 了。這時就合適使用 JSON:JSON 允許輕鬆地將 JavaScript 對象轉換成可以隨請求發送的資料(同步或非同步都可以)。

1.JSON 可以將 JavaScript 對象中表示的一組資料轉換為字串,然後就可以在函數之間輕鬆地傳遞這個字串,或者在非同步應用程式中將字串從 Web 客戶機傳遞給伺服器端

程式。這個字串看起來有點兒古怪(稍後會看到幾個樣本),但是 JavaScript 很容易解釋它,而且 JSON 可以表示比成對的名稱和數值更複雜的結構。例如,可以表示數組和複雜的對象,而不僅僅是鍵和值的簡單列表。

(1)簡單 JSON 樣本:
按照最簡單的形式,可以用下面這樣的 JSON 表示成對的名稱和數值:
{ "firstName": "Brett" }
這個樣本非常基本,而且實際上比等效的純文字成對的名稱和數值佔用更多的空間:
firstName=Brett
但是,當將多個成對的名稱和數值串在一起時,JSON 就會體現出它的價值了。首先,可以建立包含多個成對的名稱和數值的記錄,比如:
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

從文法方面來看,這與成對的名稱和數值相比並沒有很大的優勢,但是在這種情況下 JSON 更容易使用,而且可讀性更好。例如,它明確地表示以上三個值都是同一記錄的一部分;花括弧

使這些值有了某種聯絡。

(2)值的數組:
當需要表示一組值時,JSON 不但能夠提高可讀性,而且可以減少複雜性。例如,假設您希望表示一個人名列表。在 XML 中,需要許多開始標記和結束標記;如果使用典型的成對的名稱和數值(就像在本系列前面文章中看到的那種成對的名稱和數值),那麼必須建立一種專有的資料格式,或者將鍵名稱修改為 person1-firstName 這樣的形式。
如果使用 JSON,就只需將多個帶花括弧的記錄分組在一起:

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

2.在 JavaScript 中使用 JSON:
(1)將 JSON 資料賦值給變數
例如,可以建立一個新的 JavaScript 變數,然後將 JSON 格式的資料字串直接賦值給它:

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

這非常簡單;現在 people 包含前面看到的 JSON 格式的資料。但是,這還不夠,因為訪問資料的方式似乎還不明顯。
(2)訪問資料
要想訪問 programmers 列表的第一個條目的姓氏,只需在 JavaScript 中使用下面這樣的代碼:

people.programmers[0].lastName;
 
注意,數組索引是從零開始的。所以,這行代碼首先訪問 people 變數中的資料;然後移動到稱為 programmers 的條目,再移動到第一個記錄([0]);最後,訪問 lastName 鍵的值。結果是字串值 “McLaughlin”。
下面是使用同一變數的幾個樣本。

people.authors[1].genre   // Value is "fantasy"
people.musicians[3].lastName  // Undefined. This refers to the fourth entry,and there isn't one
people.programmers.[2].firstName // Value is "Elliotte"

利用這樣的文法,可以處理任何 JSON 格式的資料,而不需要使用任何額外的 JavaScript 工具包或 API。

(3)修改 JSON 資料
正如可以用點號和括弧訪問資料,也可以按照同樣的方式輕鬆地修改資料:

people.musicians[1].lastName = "Rachmaninov";
 
在將字串轉換為 JavaScript 對象之後,就可以像這樣修改變數中的資料。
(4)轉換回字串
當然,如果不能輕鬆地將對象轉換回本文提到的文字格式設定,那麼所有資料修改都沒有太大的價值。在 JavaScript 中這種轉換也很簡單:

String newJSONtext = people.toJSONString();

這樣就行了!現在就獲得了一個可以在任何地方使用的文本字串,例如,可以將它用作 Ajax 應用程式中的請求字串。
更重要的是,可以將任何 JavaScript 對象轉換為 JSON 文本。並非只能處理原來用 JSON 字串賦值的變數。為了對名為 myObject 的對象進行轉換,只需執行相同形式的命令:
String myObjectInJSON = myObject.toJSONString();
 
這就是 JSON 與其他資料格式之間最大的差異。如果使用 JSON,只需調用一個簡單的函數,就可以獲得經過格式化的資料,可以直接使用了。對於其他資料格式,需要在未經處理資料和格式化資料之間進行轉換。即使使用 Document Object Model 這樣的 API(提供了將自己的資料結構轉換為文本的函數),也需要學習這個 API 並使用 API 的對象,而不是使用原生的 JavaScript 對象和文法。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.