`
txf2004
  • 浏览: 7041191 次
  • 性别: 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传输数据

    当与服务器进行交互时,可以使用`send()`方法发送JSON数据。例如,将上面的JSON对象作为POST请求的数据发送: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api/user'); ...

    json数据jquery异步示例

    以上就是关于"json数据jquery异步示例"的相关知识点,涵盖了JSON数据的创建、传输、解析以及jQuery中的异步操作和事件处理。在实际应用中,还需要考虑性能优化、安全性等问题,确保数据交互的高效和安全。

    使用_JSON_进行数据传输

    ### 使用JSON进行数据传输 #### 引言 在异步应用程序的世界里,数据传输成为连接客户端与服务器的关键桥梁。随着互联网技术的不断发展,数据格式的选择日益丰富,其中JSON(JavaScript Object Notation)作为一种...

    使用JSON改进WEB数据传输.pdf

    在 WEB 数据传输中,JSON 可以与 AJAX 结合使用,实现异步数据传输。AJAX(Asynchronous JavaScript and XML)是一种可以实现异步数据传输的技术,可以使得 WEB 应用程序更加响应式和交互式。通过使用 JSON 和 AJAX...

    通过json进行传输数据的Js分页程序

    "通过json进行传输数据的Js分页程序"这个主题,涉及到的主要知识点包括JSON的基本概念、JSON与JavaScript的关系、JSON在数据传输中的应用以及JavaScript实现分页的原理。 首先,JSON是一种轻量级的数据交换格式,它...

    jQuery+json异步实现JSP和struts2之间的数据传递

    这个例子展示了如何通过jQuery向Struts2 Action发送异步请求,Action返回JSON数据,然后在前端解析并使用这些数据。在实际应用中,这样的数据交互方式可以实现动态加载、表单验证、页面更新等多种功能,提高用户体验...

    Json异步插入数据

    描述中的“下载后链接的数据库 自己手工改下”可能指的是在获取到JSON数据后,需要根据实际需求修改数据,然后将这些数据发送到服务器进行异步插入。这个过程可能涉及数据验证、格式转换等步骤。 综上,理解JSON...

    php-curl+ajax+json数据传输2.0版本

    总结起来,"php-curl+ajax+json数据传输2.0版本"是利用PHP-cURL解决AJAX跨域请求的一种解决方案,它结合了AJAX的异步特性、JSON的数据交换优势以及cURL的服务器端请求处理能力。这个组合可以实现高效、安全的数据...

    android使用JSON进行网络数据交换(服务端、客户端)的实现

    3. 服务器返回JSON数据,使用Gson库将其转换为自定义的Java对象。 4. 在Activity中显示这些数据,例如在一个ListView中。 通过以上步骤,你可以在Android应用中实现基于JSON的网络数据交换。了解并掌握这些知识点,...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...

    aspx后台传递Json到前台的两种接收方法推荐

    两种方法各有优劣,使用dataType: "json"的方法时,由于jQuery已经将返回的Json数据自动解析为JavaScript对象,可以更为方便地进行数据操作,减少手动解析的代码量。而使用dataType: "text"的方法,虽然需要手动解析...

    json数据传输

    在Web开发中,JSON数据传输扮演着重要角色,尤其在AJAX(Asynchronous JavaScript and XML)技术中,它是实现页面与服务器之间异步通信的关键。 在“通过ajax传输json数据小案例”中,我们将探讨如何使用AJAX发送和...

    http传输与json解析

    4. 转换数据:如果需要将JSON数据转换为Java对象,可以使用`toObject()`方法(需要配合Gson或其他库)。 在实际项目中,我们可能会遇到更复杂的情况,比如处理嵌套的JSON结构、处理网络异常、优化性能等。对于嵌套...

    json数据 处理实例

    在C#中,处理JSON数据是常见的任务,尤其在ASP.NET Web应用程序开发中。 在C#中,我们通常使用.NET框架提供的System.Text.Json或第三方库如Newtonsoft.Json(Json.NET)来处理JSON。下面我们将深入探讨这两个库在...

    android使用JSON进行网络数据交换(服务端、客户端)的实现_网页交互.zip

    1. **Java服务端**:如果你使用Spring框架,可以很容易地接收和处理JSON数据。创建一个Controller: ```java @PostMapping("/data") public ResponseEntity<String> handleData(@RequestBody JSONObject requestJson...

    asp.net json格式数据

    使用ASP.NET AJAX,可以通过XMLHttpRequest对象与服务器进行异步通信,通常接收或发送JSON数据。 - `UpdatePanel`控件是ASP.NET AJAX的一个常见组件,它可以包装在页面上需要动态更新的部分,通过JSON数据与服务器...

    android使用JSON进行网络数据交换(服务端、客户端)的实现.rar

    总结,这个压缩包的实现可能涵盖了Android客户端使用Retrofit发送网络请求、解析JSON数据,以及服务器端处理JSON请求并返回的过程。在实际项目中,还需要考虑安全性、性能优化和错误处理等多方面因素。

Global site tag (gtag.js) - Google Analytics