JSON 是适用于 Ajax 应用程序的一种有效格式,原因是它使 JavaScript 对象和字符串值之间得以快速转换。由于 Ajax 应用程序非常适合将纯文本发送给服务器端程序并对应地接收纯文本,相比不能生成文本的 API,能生成文本的 API 自然更可取;而且,JSON 让您能够处理本地 JavaScript 对象,而无需为如何表示这些对象多费心思。
XML 也可以提供文本方面的类似益处,但用于将 JavaScript 对象转换成 XML 的几个现有 API 没有 JSON API 成熟;有时,您必须在创建和处理 JavaScript 对象时格外谨慎以确保所进行的处理能与所选用的 XML 会话 API 协作。但对于 JSON,情况就大不相同:它能处理几乎所有可能的对象类型,并会返回给您一个非常好的 JSON 数据表示。
因此,JSON 的最大价值在于可以将 JavaScript 真的作为 JavaScript 而非数据格式语言进行处理。您所学到的所有有关使用 JavaScript 对象的技巧都可以应用到代码中,而无需为如何将这些对象转变成文本而多费心思。这之后,可以进行如下所示的简单 JSON 方法调用:
String myObjectInJSON = myObject.toJSONString();
现在就可以将结果文本发送给服务器了。
*将 JSON 发给服务器
----通过 GET 以名称/值对发送 JSON
将 JSON 数据发给服务器的最简单方法是将其转换成文本,然后以名称/值对的值的方式进行发送。请务必注意,JSON 格式的数据是相当长的一个对象,看起来可能会如清单 1 所示:
清单 1. JSON 格式的简单 JavaScript 对象
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" } ] }
如果要以名称/值对将其发送到服务器端,应该如下所示:
var url = "organizePeople.aspx?people=" + people.toJSONString();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
存在一个问题:在 JSON 数据中会有空格和各种字符,Web 浏览器往往要尝试对其继续编译。要确保这些字符不会在服务器上(或者在将数据发送给服务器的过程中)引起混乱,需要在 JavaScript escape() 函数中做如下添加:
var url = "organizePeople.aspx?people=" + escape(people.toJSONString());
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
该函数可以处理空格、斜线和其他任何可能影响浏览器的内容,并将它们转换成 Web 可用字符(比如,空格会被转换成 %20,浏览器并不会将其视为空格处理,而是不做更改,将其直接传递到服务器)。之后,服务器会(通常自动)再把它们转换回它们传输后的本来 “面目”。
这种做法的缺点有两个:
在使用 GET 请求发送大块数据时,对 URL 字符串有长度限制。虽然这个限制很宽泛,但对象的 JSON 字符串表示的长度可能超出您的想象,尤其是在使用极其复杂的对象时更是如此。
在跨网络以纯文本发送所有数据的时候,发送数据面临的不安全性超出了您的处理能力。
简言之,以上是 GET 请求的两个限制,而不是简单的两个与 JSON 数据相关的事情。在想要发送用户名和姓之外的更多内容,比如表单中的选择时,二者可能会需要多加注意。若要处理任何机密或极长的内容,可以使用 POST 请求。
----利用 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());
使用 POST 而非 GET 打开,Content-Type 头被设置为让服务器预知它能得到何种数据。在这种情况下,即为 application/x-www-form-urlencoded,它让服务器知道现在发送的是文本,正如它从常规的 HTML 表单中得到的一样。
另一个简单提示是 URL 的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存,而是会在此方法每次被调用后重新创建和重发;此 URL 会由于时间戳的不同而稍微有些不同。这种技巧常被用于确保到脚本的 POST 每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。
*在服务器上解释 JSON
处理 JSON 的两步骤:
针对编写服务器端程序所用的语言,找到相应的 JSON 解析器/工具箱/帮助器 API。
使用 JSON 解析器/工具箱/帮助器 API 取得来自客户机的请求数据并将数据转变成脚本能理解的东西。
寻找 JSON 解析器或工具箱最好的资源是 JSON 站点(有关链接,请参阅参考资料)。在这里,除了可以了解此格式本身的方方面面之外,还可以通过各种链接找到 JSON 的各种工具和解析器,从 ASP 到 Erlang,到 Pike,再到 Ruby,应有尽有。您只需针对自己编写脚本所用的语言下载相应的工具箱即可。为了让服务器端脚本和程序能够使用此工具箱,可以根据情况对其进行选择、扩展或安装(如果在服务器端使用的是 C#、PHP 或 Lisp,则可变性更大)。
分享到:
相关推荐
它允许前端和后台进行异步通信,使得用户界面可以局部更新,提高了网页的交互性和响应性。 2. **XPages和Dojo Toolkit**:在Lotus Domino 8.5及以上版本中,引入了XPages作为新的开发框架,它内置了对AJAX的支持。...
"AJAX和PHP:构建响应式Web应用程序:第5章:AJAX聊天和JSON" 这个标题表明我们正在讨论一个关于使用AJAX和PHP技术开发响应式Web应用的教程,特别关注第五章的内容,该章涉及构建一个实时的聊天功能,并深入探讨了...
通过学习和实践这个“Ajax开发的简易聊天室”项目,你将对Ajax技术有更深入的理解,并能掌握构建实时Web应用的基本技能。同时,这个项目也可以帮助你锻炼前后端通信、数据处理以及用户体验优化等方面的能力。
3. **服务器端脚本**:可能为ASP.NET或其他服务器端技术,负责处理来自Ajax请求的数据,并返回响应。 学习Ajax,你需要理解以下几个核心概念: - **异步通信**:Ajax的核心特性是异步,即页面不会因为后台数据处理...
《JSP+Ajax网站开发典型实例》第二部分的压缩包包含了一系列有关Web应用程序开发的实践教程,主要聚焦于使用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(Ajax)技术。这一组合在现代Web应用中广泛...
总结来说,这个项目展示了如何利用C# ASP.NET框架和AJAX技术,构建一个动态的、响应式的会员注册页面,提升了用户体验,同时展示了前后端交互的基本流程。通过学习这个案例,开发者可以深入理解Web开发中的异步数据...
微信小程序提供`wx.request`方法进行网络请求,支持HTTPS协议,常用于获取服务器端的数据,如JSONP、AJAX等。 7. API接口: 微信小程序提供了丰富的API,包括地图、支付、位置、分享、推送等功能,开发者可以充分...
这篇博客文章“利用ajax.dll进行Ajax的开发”可能详细介绍了如何使用一个特定的DLL(动态链接库)文件——ajax.dll来实现Ajax功能。 首先,我们需要理解DLL文件的角色。DLL是Windows操作系统中的一个重要组成部分,...
10. **JSON格式**:为了提高数据交换的效率和兼容性,常将JS对象转换成JSON格式(`JSON.stringify()`)再发送,服务器端使用`json_decode()`解析。 通过以上知识点,开发者可以实现JS变量通过AJAX无刷新地传递给PHP...
- 集成Ajax:在网页中用JavaScript编写Ajax函数,发送请求到CGI脚本并接收响应。 - 数据交换格式:可能使用JSON或XML将SQL查询结果从CGI脚本传递回Ajax。 - 安全性考虑:确保CGI脚本能正确过滤和处理用户输入的...
- 使用AJAX技术与服务器端进行异步通信,实现无刷新更新页面内容。 ### 总结 通过以上分析可以看出,这个JSP页面中的JavaScript脚本主要实现了利用dhtmlXGrid组件来构建一个功能丰富的动态表格。它不仅包含了基本的...
而JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,也经常在Ajax中用于数据传输。 此外,本教程还可能涵盖了关于Ajax的其他相关知识点,如DOM(文档对象模型)操作、事件处理、以及安全性的考虑...
在.NET中,可以使用OutputCache、SqlCacheDependency等技术对Ajax响应进行缓存,减少数据库查询,降低服务器压力。 5. **Converter.aspx** 在Ajax请求中,数据转换是常见的需求。C#提供了丰富的数据类型转换方法,...
- 利用事件处理和脚本实现动态交互功能,如搜索、筛选和排序。 6. **PB的环境参数设置**: - 了解PB的全局设置,如代码编辑器选项、运行时行为等。 - 通过设置环境变量,调整应用程序的行为,例如内存分配、错误...
在线投票系统是一个基于Web的应用程序,本项目使用了JSP技术进行前端页面的开发,Servlet作为后端控制层,Ajax实现异步数据交互,而MySQL则作为数据存储库。下面将详细阐述这些关键技术及其在项目中的应用。 1. JSP...
Sencha Touch 是一款用于构建移动Web应用的JavaScript框架,它提供了丰富的组件和API,使得开发者可以轻松创建交互式、响应式的触控应用。在“sencha的ajax+formpanel+google地图”这个主题中,我们将深入探讨如何...
- 这种操作方式大大提升了用户体验,使用户感觉网页更加流畅和响应迅速。 7. 错误处理: - 示例代码中还包含了AJAX请求的error函数,用于处理请求失败的情况,如网络问题或服务器错误。 - 当发生错误时,同样会...
$.getJSON()是jQuery中用来简化AJAX请求的函数之一,专门用于处理JSON格式的响应数据。它本质上也是发起一个HTTP GET请求,只不过在请求中会接收一个JSON格式的数据。当结合跨域请求时,$.getJSON()会配合JSONP模式...
10. AJAX异步通信:为了提升用户体验,可能会使用AJAX进行页面部分更新,这需要了解XMLHttpRequest对象和JSON数据格式。 11. 版本控制:了解如何使用Git或其他版本控制系统来管理源代码,这对于协作开发和版本回溯...
在Ajax与PHP结合使用时,PHP通常位于服务器端处理数据请求,并通过echo输出或json_encode编码响应给前端。在本例中,PHP根据传入的省份参数动态返回对应的城市列表。 知识点四:HTML页面中下拉选择框联动实现 通过...