做了这么多,你已经能更顺手地使用JavaScript了,也许在考虑把更多的模型信息放在浏览器上。不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。
JSON概述
XML的一个替代方法是JSON,可以在www.json.org找到。JSON是一种文本格式,它独立于具体语言,但是使用了与C系列语言(如C、C#、JavaScript等)类似的约定。JSON建立在以下两种数据结构基础上,当前几乎所有编程语言都支持这两种数据结构:
l
名/值对集合。在当前编程语言中,这实现为一个对象、记录或字典。
l
值的有序表,这通常实现为一个数组。
因为这些结构得到了如此众多编程语言的支持,所以JSON是一个理想的选择,可以作为异构系统之间的一种数据互换格式。另外,由于JSON是基于标准JavaScript的子集,所以在所有当前Web浏览器上都应该是兼容的。
JSON对象是名/值对的无序集合。对象以
{ 开始,以 } 结束,名/值对用冒号分隔。JSON数组是一个有序的值集合,以[
开始,以 ] 结束,数组中的值用逗号分隔。值可以是串(用双引号引起)、数值、true或false、对象,或者是数组,因此结构可以嵌套。图3-6以图形方式很好地描述了JSON对象的标记。
图3-6JSON对象结构的图形化表示(摘自www.json.org)
请考虑employee对象的简单例子。employee对象可能包含名、姓、员工号和职位等数据。使用JSON,可以如下表示employee对象实例:
var employee = {
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}
然后可以使用标准点记法使用对象的属性,如下所示:
var lastName = employee.lastName; //Access the last name
var title = employee.title; //Access the title
employee.employeeNumber = 456; //Change the employee number
JSON有一点很引以为豪,这就是它是一个轻量级的数据互换格式。如果用XML来描述同样的employee对象,可能如下所示:
<employee>
<firstName>John</firstName>
<lastName>Doe</lastName>
<employeeNumber>123</employeeNumber>
<title>Accountant</title>
</employee>
显然,JSON编码比XML编码简短。JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差异。
www.json.org网站列出了至少与其他编程语言的14种绑定,这说明,不论在服务器端使用何种技术,都能通过JSON与浏览器通信。
使用JSON的示例
(此例子需要
如果你要用json-lib,那你就必须下载json-lib-2.0-jdk15.jar,还必需下面5个jar
jakarta commons-lang, jakarta commons-beanutils, jakarta commons-collections
jakarta commons-logging ,ezmorph 缺少任何一个都是不行的,试过了- -!!
前面4个在apache.org下载,最后一个在http://ezmorph.sourceforge.net/下载
下面红色字体都是分歧部分,就看你是用什么了,经本人测试没问题。
)
下面是一个简单的例子,展示了如何使用JSON将JavaScript对象转换为串格式,并使用Ajax技术将这个串发送到服务器,然后服务器根据这个串创建一个对象。这个例子中没有业务逻辑,也几乎没有用户交互,它强调的是客户端和服务器端的JSON技术。图3-7显示了一个“字符串化的”Car对象。
图3-7“字符串化的”Car对象
因为这个例子几乎与前面的POST例子完全相同,所以我们只关注JSON特定的技术。点击表单上的按钮将调用doJSON函数。这个函数首先调用getCarObject函数来返回一个新的Car对象实例,然后使用JSON
JavaScript库(可以从www.json.org免费得到)将Car对象转换为JSON串,再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的Car对象发送到服务器。
因为有可以免费得到的JSON-Java绑定库,所以编写Java servlet来为JSON请求提供服务相当简单。更妙的是,由于对每种服务器端技术都有相应的JSON绑定,所以可以使用任何服务器端技术实现这个例子。
JSONExample
servlet的doPost方法为JSON请求提供服务。它首先调用readJSONStr-
ingFromRequestBody方法从请求体获得JSON串,然后创建JSONObject的一个实例,向JSONObject构造函数提供JSON串。JSONObject在对象创建时自动解析JSON串。一旦创建了JSONObject,就可以使用各个get方法来获得你感兴趣的对象属性。
这里使用getString和getInt方法来获取year、make、model和color属性。这些属性连接起来构成一个串返回给浏览器,并在页面上显示。图3-8显示了读取JSON对象之后的服务器响应。
代码清单3-11显示了jsonExample.html,代码清单3-12显示了JSONExample.java。
代码清单3-11jsonExample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON Example</title>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doJSON() {
var car = getCarObject();
//Use the JSON JavaScript library to stringify the Car object
//var carAsJSON = JSON.stringify(car); 老版本的json.js的用法
var carAsJSON = car.toJSONString();
alert("Car object as JSON:/n " + carAsJSON);
var url = "JSONExample?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlHttp.send(carAsJSON);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
parseResults();
}
}
}
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
function getCarObject() {
return new Car("Dodge", "Coronet R/T", 1968, "yellow");
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
</script>
</head>
<body>
<br/><br/>
<form action="#">
<input type="button" value="Click here to send JSON data to the server"
onclick="doJSON();"/>
</form>
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
代码清单3-12JSONExample.java
package ajaxbook.chap3;
import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
//import net.sf.json.*;
public class JSONExample extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String json = readJSONStringFromRequestBody(request);
//Use the JSON-Java binding library to create a JSON object in Java
JSONObject jsonObject = null;
try {
//如果是用json-lib的话,前面引进的包改为
//import net.sf.json.*; //这里改为
//jsonObject = JSONObject.fromObject(json);
//fromObject(object)是static的。也可以用fromString(string)的,但官方是不建议用fromString的。
jsonObject = new JSONObject(json);
}
catch(ParseException pe) {
System.out.println("ParseException: " + pe.toString());
}
String responseText = "You have a " + jsonObject.getInt("year") + " "
+ jsonObject.getString("make") + " " + jsonObject.getString("model")
+ " " + " that is " + jsonObject.getString("color") + " in color.";
response.setContentType("text/xml");
response.getWriter().print(responseText);
}
private String readJSONStringFromRequestBody(HttpServletRequest request){
StringBuffer json = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
json.append(line);
}
}
catch(Exception e) {
System.out.println("Error reading JSON string: " + e.toString());
}
return json.toString();
}
}
分享到:
相关推荐
如需了解最流行的前端框架,与后台交互的ajax+json,那么这将是一个很好的一个实例。大家也可以去我的博客,查看此介绍!
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
AjaxJson 实例 讲解 最基本的用法 给初学者 有很大帮助 这是 本人老师的实例 呵呵
php+ajax+json的简单实例,包含了json的重要语句,有了这个你学习json就容易多了!
MVC3+Json+Ajax操作实例源码 源码描述: 该源码的目的是开发一个应用程序,用到了MVC3,JQuery,json脚本 为简单起见,这个例子用静态列表用来代替数据库。 源码你可以学习到: 如何使用jQuery JavaScript的confirm或...
jquery_ajax_json简单实例jquery_ajax_json简单实例
主要是用到jquery的ajax,java中的hibernate4的调用mysql数据和struts2地址重定向,并把数据转换成json数据,经过html页面中的javascript调用后台数据,有添加,修改,删除,查询等简单功能,适用于有ajax初学者,...
主要为大家详细介绍了js结合json实现ajax简单实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ajax实例应用,json实现的许多功能
java生成json数据 ajax请求数据并解析json
ajax请求复杂的json数据实例,下载看看下载看看下载看看
php基于jquery的ajax技术传递json数据简单实例.docx
ajax,jQuery 例子大全,json例子,入门到精通的都在里面。 还有javascript帮助文档
ajax与json的组合使用,一个简单的例子
json struts2 ajax实例代码
ajax和beego前后端json格式数据交互实例
如果想用json对象来返回ajax的对象 用json真是太方便啦 大家下载后就直接引入工程就能实用 本人用后觉得非常好
这是前台用jsp页面,并应用jquery、easyui、ajax、struts2技术,以json数据格式传输的一个登录例子
jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上图演示所示,可无刷新添加一个分类、在动画弹出的对话框中输入分类名称即可实现保存,同进还可无...
关于Ajax的学习,通过对本例的学习,会发现ajax对json的引用,对ajax的机制也有很大的帮助