JSON传送与接收技巧详解_H5之家 - 中国HTML5教程资源分享第一站

在AJAX应用中，通常会利用XML作为数据传输的格式，但是XML文件格式文件庞大, 格式复杂, 传输占用带宽，服务器端和客户端都需要花费大量代码来解析XML, 不论服务器端和客户端代码变的异常复杂和不容易维护，客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码。服务器端和客户端解析XML花费资源和时间等缺点。

除了XML格式外, 还有可以使用一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作，使用了类似于C语言家族的习惯。Google的Ajax是使用就是 JSON+模板做的。

Json作为数据传输的格式有以下优点：

1. 数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

2. 易于解析这种语言, 客户端JavaScript可以简单的通过eval()进行JSON数据的读取

3. 支持多种语言, 包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等语言服务器端语言, 便于服务器端的解析

5. 因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护。

JSON具有以下这些形式：

较于XML，JSON在资料表示时更为简洁，例如一个表示账户的资料，XML中可能如下表示：

<account>
<number>123456</number>
<name>Justin</name>
<balance>1000</balance>
</account>
而使用JSON可以这么表示：var account = {
number : "123456",
name: "Justin",
balance: "1000"
};

而使用JSON可以这么表示：var account = {

number : "123456",

name: "Justin",

balance: "1000"

};

json.js 中有JSON parser与JSON stringifier，例如它扩充了对象，增加了toJSONString()函式，您可以直接如下传回对象的JSON表示法：function Account(number, name, balance) {

this.number = number;

this.name = name;

this.balance = balance;

}

var account = new Account(123456, "Justin", 1000);

alert(account.toJSONString());

您可以按下执行范例观看结果。

您可以把JSON表示法以POST发送至服务端，例如：

·HandleJSONEx-2.js

var xmlHttp;

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

else if(window.ActiveXObject) {

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

}

function prepareJSON() {

var number = document.getElementById("num").value;

var name = document.getElementById("name").value;

var balance = document.getElementById("bal").value;

var account = new Object();

account.number = number;

account.name = name;

account.balance = balance;

return account.toJSONString();

}

function handleAccount() {

var json = prepareJSON();

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

createXMLHttpRequest();

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.open("POST", url);

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

xmlHttp.send(json);

}

function handleStateChange() {

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

document.getElementById("response").innerHTML = xmlHttp.responseText;

}

这个程序使用者输入的账号信息包装为对象，并使用JSON扩充的toJSONString()将之转换为JSON格式，之后POST至伺服端，伺服端可以至 JSON in Java 下载JSON伺服端的Parser，您可以撰写以下的程序：

·JSONServlet.java

package onlyfun.caterpillar;

import java.io.*;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.*;

public class JSONServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

public JSONServlet() {

super();

}

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

String json = readJSONString(request);

JSONObject jsonObject = null;

String responseText = null;

try {

jsonObject = new JSONObject(json);

responseText = "账号 " + jsonObject.getString(&

quot;number") + "
名称 "

+ jsonObject.getString("name") + "
余额 " + jsonObject.getString("balance");

}

catch (JSONException e) {

e.printStackTrace();

}

response.setCharacterEncoding("UTF-8");

response.setContentType("text/xml");

response.getWriter().print(responseText);

}

private String readJSONString(HttpServletRequest request){

StringBuffer json = new StringBuffer();

String line = null;

try {

BufferedReader reader = request.getReader();

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

json.append(line);

}

catch(Exception e) {

System.out.println(e.toString());

}

return json.toString();

}

这个Servlet剖析JSON，并将数据取出后再传回文字响应。

如果将JSON字符串传回给客户端浏览器，则可以使用eval()将之运算为一个JavaScript对象以进行操作。