`
txf2004
  • 浏览: 6863905 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用 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格式的数据的传输和解析,即完成了数据的异步传输。
分享到:
评论

相关推荐

    Ajax中使用JSON传输数据

    json.js and json.jar 博文链接:https://terran-li2008.iteye.com/blog/199088

    用jquery解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里...

    Ajax异步请求&Json数据格式配套学习资料

    Ajax(ASynchronous JavaScript And XML):是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术, Json(JavaScript Object Notation) :现在多用于存储和...进行数据的传输,SON 比 XML 更小、更快,更易解析。

    java+servlet+json+ajax异步调用

    jsp+servlet+ajax使用json作为数据传输介质完成 1.用户名是否存在的验证 2.根据姓名获取该对象使用gson将对象转换成json后返回给客户端并显示,完成修改功能时经常使用 3.gson将集合转换成json(数组格式)后返回给...

    Android异步加载网络数据(PHP做服务端返回的json格式)

    服务端用的是PHP写的。返回的是json格式的数据 echo json_encode(array('data'=>array("hasnext"=>0,"info"=>$rows))); $rows是查询数据库出来的数组

    基于jquery异步传输json数据格式实例代码

    主要介绍了jquery异步传输json数据格式实例代码,有需要的朋友可以参考一下

    json必备jar包

    一些在web、android端使用json,ajax异步传输数据必备的jar包,内部包含fastjson.jar,gson.jar,ezmorph.jar等。希望对各位有用。

    JSON基础教程.

    通过AJAX异步减少网络内容传输,而JSON则可以把传输内容缩减到纯数据;然后利用jQuery内置的AJAX功能直接获得JSON格式的数据;在客户端直接绑定到数据控件里面,从而达到最优。

    Json数据异步绑定到界面的Table并且自动刷新原理及代码

    做Winform习惯了,大家都习惯设置datasource这样的写法。... 首先来看一下我的一般处理程序,在这个里面,我自己实现的是从数据库中查出datatable,然后转换成json传输给客户端 代码如下: /// <summary

    C++开发网络通信传输实例 完整源码

    数据传输格式:在数据传输过程中,可以使用常见的数据传输格式,如JSON、XML等。将要传输的数据按照特定格式进行编码和解码,以确保数据能够正确地在客户端和服务器之间传输和解析。 异步通信和多线程:为了提高...

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级...掌握 Ajax第 10 部分--使用 JSON 进行数据传输 掌握 Ajax第 11 部分--服务器端的 JSON

    AJAX 学习资料WORD文档

    第 1 部分: Ajax 入门简介 2 第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 ...第 10 部分: 使用 JSON 进行数据传输 100 第 11 部分: 服务器端的 JSON 105

    3种json解析方法包括服务器端和客户端

    json数据创建和解析 有json ,gson ,fastgson 三种方法 用异步任务实现 数据的传输 适合初学者

    Ajax基础实例PPT

    Ajax基础 使用Ajax发送异步请求 在请求和响应中使用XML 使用JSON进行数据传输

    AJAX 异步传输数据的问题

    要异步传输的数据: Xml代码 …. ”basic:JavaScript” script=”index> …. Ajax异步传输代码: Js代码 代码如下:var postData = “input=”+ escape(inputJSON) +”&script=”+escape(xml)+ “&feedGeneral=” + ...

    ajax教程(ajax基础,实例)

    Ajax基础 使用Ajax发送异步请求 在请求和响应中使用XML 使用JSON进行数据传输

    ajax技术开发培训ppt

    Ajax基础 使用Ajax发送异步请求 在请求和响应中使用XML 使用JSON进行数据传输

    json的所需jar包以及js文件

    json在异步加载传输的使用,通过ajax跟数据库交互而不影响前台的操作。 返回的数据是被封装成JSON对象。可用用途如:动态获取列表、即时修改页面数据等等

    Ajax详解

    内容简要给大家说明一下:Ajax简介、使用Javascript和Ajax发出异步请求、Ajax中的高级请求响应、利用Dom进行Web响应、操作dom、建立基于Dom的Web应用程序、在请求和响应中使用XML、使用Json进行数据传输、...

Global site tag (gtag.js) - Google Analytics