憶風
光是知道是不夠的，必須要加以應用；光是希望是不夠的，非去做不可。

隨筆-84 評論-56 文章-0 trackbacks-0

AJAX基礎與實踐(六)

AJAX以 JSON 發送請求數據

Ø 使用XML 向服務器發送復雜的數據結構，

Ø 通過串連接來創建XML 串并不好，

Ø 這也不是用來生成或修改XML 數據結構的健壯技術。

Ø JSQN 概述

*　JSON 是 XML 的一個替代方法，可以在www.Json.org 找到。

*　JSON 是一種文本格式，它獨立于具體語言，

*　使用了與C 系列語言(如C 、C# 、JavaScript 等)類似的約定。

*　JSON建立在以下兩種數據結構基礎上，當前幾乎所有編程語言都支持這兩種數據結構。

兩種數據結構

Ø 名/值對集合。

*　不同的語言中，它被理解為對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組（associative array）。

Ø 　值的有序表。

*　這通常實現為一個數組。

JSON的數據結構

Ø JSON對象

*　對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔。

Ø JSON數組

* 數組是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間使用“,”（逗號）分隔。

Ø 值

* 值（value）可以是雙引號括起來的字符串（string）、數值(number)、true、false、 null、對象（object）或者數組（array）。這些結構可以嵌套。

Ø 字符串（string）

* 字符串（string）是由雙引號包圍的任意數量Unicode字符的集合，使用反斜線轉義。一個字符（character）即一個單獨的字符串（character string）。

* 字符串（string）與C或者Java的字符串非常相似。

Ø 數值（number）

* 數值（number）也與C或者Java的數值非常相似。除去未曾使用的八進制與十六進制格式。除去一些編碼細節。

Ø 空白可以加入到任何符號之間。以下描述了完整的語言。

Ø 在http://www.json.org/能得到JSON。

DEMO JSON對象

Ø 我們可以以Employee對象的簡單的例子展開進行。

Ø Employee對象可能包含姓、名、員工號和職位等數據。

Ø 使用JSON，可以如下表示Employee對象實例：

var employee = {

“firstName”:”Zhou”,

“lastName”:”DaQing”,

“employeeNumber”:517,

“title”:”Accountant”

}

Ø 然后可以使用標準點記法使用對象的屬性，如下所示：

n var lastName = employee.lastName;

n var title = employee.title;

n employee.employee = 517;

JSON與XML

Ø JSON 是一個輕量級的數據互換格式。

Ø 如果用 XML 來描述同樣的employee對象，可能如下所示：

<lastName>DaQing</lastName>

<title>Accountant</title>

</employee >

Ø 顯然，JSON編碼比XML 編碼簡短。

Ø 如果在網絡上發送大量數據，可能會帶來顯著的性能差異。

Ø www.Json.org 網站列出了至少與其他編程語言的14種綁定。

Ø 這說明，不論在服務器端使用何種技術，都能通過JSON與瀏覽器通信。

JSON

Ø 因為這些結構得到了如此眾多編程語言的支持，所以JSON 可以作為異構系統之間的一種數據互換格式。

Ø 另外，由于JSON 是基于標準JavaScript 的子集，所以在所有當前Web 瀏覽器上都應該是兼容的。

DEMO AJAX以 JSON 發送請求數據

Ø DEMO

*　使用JSON 將JavaScript 對象轉換為串格式，

*　Ajax 將這個串發送到服務器，

*　服務器根據這個串創建一個對象.

Ø 撰寫“jsonExample.html”，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>JSON Example</title>

var xmlHttp;

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

function doJSON() {

var car = getCarObject();

var carAsJSON = JSON.stringify(car);

alert("Car object as JSON:"n" + carAsJSON);

var url = "JSONExample?timeStamp=" + new Date().getTime();

createXMLHttpRequest();

xmlHttp.open("POST", url, true);

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send(carAsJSON);

}

function handleStateChange() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

parseResults();

}

function parseResults() {

var responseDiv = document.getElementById("serverResponse");

if(responseDiv.hasChildNodes()) {

responseDiv.removeChild(responseDiv.childNodes[0]);

}

var responseText = document.createTextNode(xmlHttp.responseText);

responseDiv.appendChild(responseText);

}

function getCarObject() {

return new Car("Dodge","Coronet R/T",1989,"pink");

}

function Car(make, model, year, color) {

this.make = make;

this.model = model;

this.year = year;

this.color = color;

}

</script>

</head>

<body>

</form>

<h2>Server Response:</h2>

</body>

</html>

DEMO 服務器端接收JSON數據

Ø 然后撰寫“JSONExample.java”文件，內容如下：

package org.yifeng.webapp.servlet;

import org.json.JSONObject;

import org.json.JSONException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.BufferedReader;

import java.text.ParseException;

/**

* Copyright: 晟軟科技

* WebSit: http://www.shengruan.com

* Author: 憶風

* QQ: 583305005

* MSN: YiFengs@msn.com

* Email: zhdqCN@gmail.com

* CreationTime: 2008-8-26 0:49:12

* Description:

*/

public class JSONExample extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String json = readJSONStringFromRequestBody(request);

//返回輸出結果

String responseText = null;

//使用JSON綁字Ajax對象

JSONObject jsonObject = null;

try {

jsonObject = new JSONObject(json);

responseText = "You have a " + jsonObject.getInt("year") + " "

+ jsonObject.getString("make") + " " + jsonObject.getString("model")

+ " " + " that is " + jsonObject.getString("color") + " in color.";

} catch (JSONException e) {

e.printStackTrace();

}

response.setContentType("text/xml");

response.getWriter().print(responseText);

}

private String readJSONStringFromRequestBody(HttpServletRequest request) {

StringBuilder json = new StringBuilder();

String line = null;

try {

BufferedReader reader = request.getReader();

while ((line = reader.readLine()) != null) {

json.append(line);

}

} catch (IOException e) {

System.out.println("Error reading JSON stirng: " + e.toString());

}

return json.toString();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

Ø 點擊按鈕，顯示如下：

OK,看看，數據都顯示出來了吧，呵呵！！！

作者：周大慶（zhoudaqing）
網址：http://www.aygfsteel.com/yifeng
>>>轉載請注明出處！<<<

posted on 2008-08-26 02:57 憶風閱讀(302) 評論(0) 編輯收藏所屬分類: Ajax

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: AJAX基礎與實踐(六) AJAX基礎與實踐(五) AJAX基礎與實踐(四) AJAX基礎與實踐(三) AJAX基礎與實踐(二) AJAX基礎與實踐(一) jQuery中文入門指南，翻譯加實例，jQuery的起點教程