使用 JSON 进行数据的异步传输

 

JSON（JavaScript Object Notation）允许轻松地将 JavaScript 对象转换成可以随请求发送的数据（同步或异步都可以）。本文首先介绍JSON的数据格式，接着介绍如何在 JavaScript 中使用 JSON，重点介绍一下如何使用JSON完成数据的异步传输。

 

1． JSON的数据格式

a)         按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：

{ "firstName": "Brett" }

 

b)        可以创建包含多个名称/值对的记录，比如：

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

 

c)         可以创建值的数组

{ "people": [

 { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

 { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }

]}

 

d)        当然，可以使用相同的语法表示多个值（每个值包含多个记录）：

{ "programmers": [

 { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

 { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }

 ],

"authors": [

 { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

 { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }

],

"musicians": [

 { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }

]

}

 

注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。

 

2． 在 JavaScript 中使用 JSON

JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。 

2.1   将 JSON 数据赋值给变量

例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

var people =

 { "programmers": [

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }

   ],

 "authors": [

    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }

   ],

 "musicians": [

    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }

   ]

 }

 

2.2   访问数据

将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：

people.programmers[0].lastName;

注意，数组索引是从零开始的。

 

2.3   修改 JSON 数据

正如访问数据，可以按照同样的方式修改数据：

people.musicians[1].lastName = "Rachmaninov";

 

2.4   转换回字符串

a)         在 JavaScript 中这种转换也很简单：

String  newJSONtext  =  people.toJSONString();

 

b)        可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：

String  myObjectInJSON  =  myObject.toJSONString();

 

说明：将转换回的字符串作为Ajax调用的字符串，完成异步传输。

小结：如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

 

3． 服务器端的 JSON

3.1   将 JSON 发给服务器

a)         通过 GET 以名称/值对发送 JSON

在 JSON 数据中会有空格和各种字符，Web 浏览器往往要尝试对其继续编译。要确保这些字符不会在服务器上（或者在将数据发送给服务器的过程中）引起混乱，需要在JavaScript 的escape()函数中做如下添加：

var url = "organizePeople.php?people=" + escape(people.toJSONString());

request.open("GET", url, true);

request.onreadystatechange = updatePage;

request.send(null);

 

b)         利用 POST 请求发送 JSON 数据

当决定使用 POST 请求将 JSON 数据发送给服务器时，并不需要对代码进行大量更改，如下所示：

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

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

request.onreadystatechange = updatePage;

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

request.send(people.toJSONString());

 

注意：赋值时格式必须是var msg=eval('(' + req.responseText + ')');

 

3.2   在服务器上解释 JSON

a)       处理 JSON 的两步骤。

 针对编写服务器端程序所用的语言，找到相应的 JSON 解析器/工具箱/帮助器 API。

 使用 JSON 解析器/工具箱/帮助器 API 取得来自客户机的请求数据并将数据转变成脚本能理解的东西。 

b)      寻找 JSON 解析器

寻找 JSON 解析器或工具箱最好的资源是 JSON 站点。如果使用的是 Java servlet，json.org 上的 org.json 包就是个不错的选择。在这种情况下，可以从 JSON Web 站点下载 json.zip 并将其中包含的源文件添加到项目构建目录。编译完这些文件后，一切就就绪了。对于所支持的其他语言，同样可以使用相同的步骤；使用何种语言取决于您对该语言的精通程度，最好使用您所熟悉的语言。

c)       使用 JSON 解析器

一旦获得了程序可用的资源，剩下的事就是找到合适的方法进行调用。如果在 servlet 中使用的是 org.json 包，则会使用如下代码：

public void doPost(HttpServletRequest request, HttpServletResponse response)

 throws ServletException, IOException {

 StringBuffer jb = new StringBuffer();

 String line = null;

 try {

    BufferedReader reader = request.getReader();

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

      jb.append(line);

 } catch (Exception e) { //report an error }

 try {

    JSONObject jsonObject = new JSONObject(jb.toString());

 } catch (ParseException e) {

    // crash and burn

    throw new IOException("Error parsing JSON request string");

 }

 // Work with the data using methods like...

 // int someInt = jsonObject.getInt("intParamName");

 // String someString = jsonObject.getString("stringParamName");

 // JSONObject nestedObj = jsonObject.getJSONObject("nestedObjName");

 // JSONArray arr = jsonObject.getJSONArray("arrayParamName");

 // etc...

}

 

4． 总结

通过对JSON数据格式和使用方法的了解，完成在服务器端的JSON格式的数据的传输和解析，即完成了数据的异步传输。