`
wangtao0501
  • 浏览: 56605 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax学习(5)---使用 JSON 进行数据传输

    博客分类:
  • Ajax
阅读更多
  在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。Ajax 的另一种有用的数据格式 JavaScript Object Notation(JSON),使用它更轻松地在应用程序中移动数据和对象。
在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对。可以将数据组合成下面这样的形式:

mailto:firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

这样就行了,不需要再做什么了。实际上,Web 老手会意识到通过 GET 请求发送的信息就是采用这种格式。
如果使用 XML 数据格式,就可以将数据组合成下面的形式:

<request>
  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>brett@newInstance.com</email>
</request>

这里的数据与前面看到的相同,但是这一次采用 XML 格式。这没什么了不起的;这只是另一种数据格式,使我们能够使用 XML 而不是纯文本和名称/值对。
实际上,除非有某种限制迫使您转向 XML,否则用不着考虑使用别的数据格式。显然,如果要向需要 XML 格式的输入的服务器端程序发送数据,那么希望使用 XML 作为数据格式。但是,在大多数情况下,对于需要向应用程序发送多段信息的服务器,XML 是更好的选择;换句话说,XML 通常更适合用来向 Ajax 应用程序做出响应,而不是从 Ajax 应用程

序发出请求。
在使用名称/值对或 XML 时,实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript 在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web 表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。、
但是,有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript 语言中的对象来表示数据,而不仅是将来自 Web 表单的数据放进请求中。在这些情况下,从 JavaScript 对象中提取数据,然后再将数据放进名称/值对或 XML,就有点儿多此一举 了。这时就合适使用 JSON:JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据(同步或异步都可以)。

1.JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端

程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。

(1)简单 JSON 示例:
按照最简单的形式,可以用下面这样的 JSON 表示名称/值对:
{ "firstName": "Brett" }
这个示例非常基本,而且实际上比等效的纯文本名称/值对占用更多的空间:
firstName=Brett
但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如:
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

从语法方面来看,这与名称/值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号

使这些值有了某种联系。

(2)值的数组:
当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在 XML 中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。
如果使用 JSON,就只需将多个带花括号的记录分组在一起:

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}


2.在 JavaScript 中使用 JSON:
(1)将 JSON 数据赋值给变量
例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。
(2)访问数据
要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录([0]);最后,访问 lastName 键的值。结果是字符串值 “McLaughlin”。
下面是使用同一变量的几个示例。

people.authors[1].genre   // Value is "fantasy"
people.musicians[3].lastName  // Undefined. This refers to the fourth entry,and there isn't one
people.programmers.[2].firstName // Value is "Elliotte"

利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。

(3)修改 JSON 数据
正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

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

在将字符串转换为 JavaScript 对象之后,就可以像这样修改变量中的数据。
(4)转换回字符串
当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:

String newJSONtext = people.toJSONString();

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。
更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:
String myObjectInJSON = myObject.toJSONString();

这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

分享到:
评论

相关推荐

    Ajax中使用JSON传输数据

    JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,因其易读性、易写性和高效性,成为了Ajax通信中数据传输的首选格式。本篇文章将深入探讨在Ajax中如何使用JSON来传输数据,以及涉及到的相关工具和...

    掌握Ajax使用 JSON 进行数据传输

    掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输

    掌握 Ajax第 10 部分--使用 JSON 进行数据传输.pdf

    ### 掌握 Ajax 第 10 部分——使用 JSON 进行数据传输 #### 知识点一:理解 JSON 在 Ajax 中的作用 - **背景介绍**:随着 Web 应用程序的发展,Ajax(Asynchronous JavaScript and XML)技术成为了前端开发的重要...

    JSON介绍-Ajax数据传输形式

    介绍了AJax中传输数据的一种新形式:JSON

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

    本文将深入探讨这三者结合在“php-curl+ajax+json数据传输2.0版本”中的应用。 首先,`PHP-cURL` 是一个在PHP中使用的库,它允许开发者通过URL来传输数据,支持多种协议,如HTTP、HTTPS、FTP等。`cURL` 提供了一种...

    json-lib-2.1.jar和struts2-json-plugin-2.1.8.1.jar

    - 性能优化:针对大量JSON数据的传输进行了性能优化。 - 客户端交互:与前端JavaScript库(如jQuery)配合,实现动态更新页面内容。 3. **jQuery**: - AJAX:jQuery简化了XMLHttpRequest的使用,使得异步数据...

    PHP-JQuery-Ajax-json

    例如,用户在填写表单时,可以使用Ajax实时验证输入,利用PHP处理服务器端逻辑,而JSON则作为数据传输的桥梁,确保信息的准确传递。而提供的PHPMailer工具,则有助于完成用户注册验证、系统通知等邮件发送功能。学习...

    struts-ajax-json-struts包

    同时,前端页面需要使用JavaScript(可能是jQuery或其他库)来发起AJAX请求,并处理返回的JSON数据。 总结来说,Struts-AJAX-JSON-Struts包是一个整合了Struts框架、AJAX和JSON功能的开发工具包,旨在帮助开发者...

    掌握Ajax 学习资料pdf

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

    prototype笔记(9)----结合Prototype和JSON开发AJAX

    在AJAX请求中,通常我们用JSON来传输服务器响应的数据,因为它比XML更快且更易于处理。 3. **Ajax.Request的使用**: 创建一个AJAX请求,你可以这样做: ```javascript new Ajax.Request('url', { method: '...

    json-servlet-ajax

    1. **数据传输**:AJAX发送请求时,请求体通常携带JSON格式的数据,服务器接收到后,可以方便地反序列化为对象处理。 2. **响应数据**:服务器处理完请求后,将结果封装为JSON格式,通过HTTP响应返回给客户端。 3. *...

    使用struts2 和ajax进行传递json数据

    综上所述,Struts2和Ajax的结合使用,能够实现高效的前后端数据交互,通过JSON数据格式,使数据传输更加便捷和高效。在实际项目中,开发者应熟练掌握这两种技术的结合,以提高Web应用的用户体验。

    ajax全集--教你学会使用ajax

    - **XML和JSON**:尽管名字中含有XML,但现代Ajax更多使用JSON作为数据格式,因为JSON更轻量级且易于处理。 ### 2. Ajax实现 - **XMLHttpRequest对象**:JavaScript中的XMLHttpRequest对象负责与服务器进行通信。...

    掌握 Ajax第 11 部分--服务器端的 JSON.pdf

    为了确保JSON数据在传输过程中的安全性和完整性,文章提到了使用JavaScript的`escape()`函数对数据进行编码。这是因为JSON数据中可能包含特殊字符,如空格、引号等,如果不进行适当的编码,可能会导致浏览器或服务器...

    jQuery Ajax前后端使用JSON进行交互示例

    本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。

    jQuery xml-to-json xml转JSON插件

    XML(Extensible Markup Language)通常用于结构化数据的存储和传输,而JSON则因为其轻量级和易于解析的特性,常用于前端与服务器之间的数据交互。 jQuery库作为JavaScript的一个强大框架,简化了DOM操作、事件处理...

    AjaxJson 实例 AjaxJson

    在 AJAX 中,我们通常使用 JSON 格式作为数据传输的载体,因为它比 XML 更快、更简洁。 AjaxJson 实例通常包括以下步骤: 1. **创建 XMLHttpRequest 对象**:这是 AJAX 的基础,用于与服务器进行通信。在 ...

    ajax+json实例

    结合JSON(JavaScript Object Notation)作为数据交换格式,可以实现高效、轻量级的数据传输,尤其在.NET框架下,两者结合提供了强大的功能。 **一、AJAX基础** AJAX基于JavaScript,利用XMLHttpRequest对象作为...

    ajax与php利用json传输数据,实现局部刷新

    5. **响应的处理**:Ajax请求成功后,会触发`onreadystatechange`事件,当状态变为4(表示请求已完成)且状态码为200(表示成功)时,可以读取`responseText`或`responseJSON`获取返回的JSON数据。 6. **DOM操作**...

Global site tag (gtag.js) - Google Analytics