l 什么是json?

l Json和xml比较

l Ajax如何使用JSON

l Ajax接收json响应案例

什么是json?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,而且它是基于JavaScript 的,这样就不需要单独的工具去解析。JSON本质上来说就是字符串,只不过有格式要求。

JSON有两种结构:

u “名/值”对的集合(A collection of name/value pairs)。在不同的语言中,它被理解为对象,结构,关联数组等 。

对象是一个无序的“名/值”对集合。一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:” ;“名/值”对之间使用“,” 分隔:

如:{ "firstName": "Brett", "lastName":"McLaughlin", "email":"brett@newInstance.com" }

u 值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组

数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔:

Json和xml比较

l 可读性

JSON和XML的可读性可谓不相上下,XML略占上风。

l 可扩展性

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

l 编码难度

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

l 解码难度

XML的解析得考虑子节点父节点关系,让人头昏眼花,而JSON的解析难度几乎为零。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。

l 流行度

XML已经被业界广泛的使用,而JSON也开始崭露头角,在Ajax领域,JSON凭借自身的优势将取代XML。

Ajax如何使用JSON

  1. 服务器端返回JSON相应的文本表示,如:

{“city” : “Hefei”, “province” : “Anhui”}

  1. 客户端使用eval()函数将JSON文本转化为JavaScript对象:

注意,使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。

  1. 然后从JavaScript对象中取得相应的值:

Bean转Json

User u = new User();

u.setAge(22);

u.setUsername("hzucmj");

u.setEnabled(true);

JSONObject json = JSONObject.fromObject(u);

System.out.println(json.toString());

//结果为:{"enabled":true,"username":"hzucmj","age":22}

List转Json

User u1 = new User();

u1.setAge(22);

u1.setUsername("hzucmj");

u1.setEnabled(true);

User u2 = new User();

u2.setAge(20);

u2.setUsername("ctf");

u2.setEnabled(true);

List<Object> list = new ArrayList<Object>();

list.add(u1);

list.add(u2);

JSONArray json = JSONArray.fromObject(list);

System.out.println(json.toString());

//结果为:[{"enabled":false,"username":"ctf","age":20},{"enabled":false,"username":"","age":0}]

Map转Json

HashMap<String, Comparable> map = new HashMap<String, Comparable>();
map.put("name", "hzucmj");
map.put("age", 22);
JSONObject json = JSONObject.fromObject(map);
System.out.println(json.toString());

//结果为:{"name":"hzucmj","age":22}

Ajax接收json响应案例

需求:

使用ajax和json技术实现以下功能,通过改变下拉框值修改下面表格中的信息。

所必须的包有:

u commons-httpclient-3.1.jar

u commons-lang-2.4.jar

u commons-logging-1.1.1.jar

u json-lib-2.4-jdk15.jar

u ezmorph-1.0.6.jar

u commons-collections-3.2.1.jar

jar包网盘分享地址http://pan.baidu.com/s/1gfOs4Kj

显示页面

viewBook.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> 使用JSON响应 </title>

<style type="text/css">

select {

width:160px;

font-size:11pt;

}

</style>

</head>

<body>

<select name="category" id="category" onchange="change(this.value);" >

<option value="1" selected="selected">编程类</option>

<option value="2">小说类</option>

<option value="3">哲学类</option>

</select>

<table border="1" style="border-collapse:collapse;width:600px;margin-top:20px;">

<thead>

<tr>

<th>ID</th>

<th>书名</th>

<th>作者</th>

<th>价格</th>

</tr>

</thead>

<tbody id="book"></tbody>

</table>

<script type="text/javascript">

// 定义了XMLHttpRequest对象

var xmlrequest;

// 完成XMLHttpRequest对象的初始化

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

// DOM 2浏览器

xmlrequest = new XMLHttpRequest();

}else if (window.ActiveXObject){

// IE浏览器

try{

xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

try{

xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){}

}

}

}

// 事件处理函数,当下拉列表选择改变时,触发该事件

function change(id){

// 初始化XMLHttpRequest对象

createXMLHttpRequest();

// 设置请求响应的URL

var uri = "../jsp/second3.jsp"

// 设置处理响应的回调函数

xmlrequest.onreadystatechange = processResponse;

// 设置以POST方式发送请求,并打开连接

xmlrequest.open("POST", uri, true);

// 设置POST请求的请求头

xmlrequest.setRequestHeader("Content-Type"

, "application/x-www-form-urlencoded");

// 发送请求

xmlrequest.send("id="+id);

}

// 定义处理响应的回调函数

function processResponse(){

// 响应完成且响应正常

if (xmlrequest.readyState == 4){

if (xmlrequest.status == 200){

// 获取页面表格体内容

var bookTb = document.getElementById("book");

// 删除bookTb原有的所有行

while(bookTb.rows.length > 0){

bookTb.deleteRow(bookTb.rows.length - 1);

}

// 获取服务器的JSON响应

// 并调用eval()函数将服务器响应解析成JavaScript数组

var books = eval(xmlrequest.responseText);

// 遍历数组,每个数组元素生成一个表格行

for (var i = 0 , len = books.length ; i < len ; i++){

var tr = bookTb.insertRow(i);

// 依次创建4个单元格,并为单元格设置内容

var cell0 = tr.insertCell(0);

cell0.innerHTML = books[i].id;

var cell1 = tr.insertCell(1);

cell1.innerHTML = books[i].name;

var cell2 = tr.insertCell(2);

cell2.innerHTML = books[i].author;

var cell3 = tr.insertCell(3);

cell3.innerHTML = books[i].price;

}

}else{

//页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

//指定页面加载完成后指定change()函数

document.body.onload = change(document.getElementById("category").value);

</script>

</body>

</html>

控制器

ChooseBook.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java"  %>

<%@ page import="java.util.*,net.sf.json.JSONArray,com.inspur.pojo.*,com.inspur.service.*" %>

<%

String idStr = (String)request.getParameter("id");

int id = idStr == null ? 1 : Integer.parseInt(idStr);

List<Book> books = new BookService().getBookByCategory(id);

response.setContentType("text/html;charset=UTF-8");

out.println(JSONArray.fromObject(books));

%>

Javabean类

Book.java

public class Book{

private Integer id;

private String name;

private String author;

private double price;

// 无参数的构造器

public Book(){

}

// 初始化全部成员变量的构造器

public Book(Integer id , String name

, String author , double price){

this.id = id;

this.name = name;

this.author = author;

this.price = price;

}

//省略get/set方法

}

服务类,数据库模拟

BookService.java

public class BookService {

// 模拟内存中数据库

static Map<Integer , List<Book>> bookDb = new HashMap<Integer , List<Book>>();

static {

// 初始化bookDb对象

List<Book> list1 = new ArrayList<Book>();

List<Book> list2 = new ArrayList<Book>();

List<Book> list3 = new ArrayList<Book>();

list1.add(new Book(1 , "疯狂Java讲义" , "李刚" , 109));

list1.add(new Book(2 , "轻量级Java EE企业应用实战" , "李刚" , 99));

list1.add(new Book(3 , "疯狂Android讲义" , "李刚" , 89));

list2.add(new Book(4 , "西游记" , "吴承恩" , 23));

list2.add(new Book(5 , "水浒" , "施耐庵" , 20));

list3.add(new Book(6 , "乌合之众" , "古斯塔夫.勒庞" , 16));

list3.add(new Book(7 , "不合时宜的考察" , "尼采" , 18));

bookDb.put(1 , list1);

bookDb.put(2 , list2);

bookDb.put(3 , list3);

}

public List<Book> getBookByCategory(int categoryId) {

return bookDb.get(categoryId);

}

}

其中控制器ChooseBook.jsp可以用servlet代替:

public class ChooseBookServlet extends HttpServlet {

public void service(HttpServletRequest request , HttpServletResponse response)

throws IOException , ServletException {

String idStr = (String)request.getParameter("id");

int id = idStr == null ? 1 : Integer.parseInt(idStr);

List<Book> books = new BookService().getBookByCategory(id);

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

out.println(JSONArray.fromObject(books));

}

}

注意:servlet需要在web.xml中配置

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>org.crazyit.ajax.web.ChooseBookServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/chooseBook</url-pattern>

</servlet-mapping>

ajax接收json的更多相关文章

  1. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  2. Ajax接收json响应

    json?  Json和xml比较  Ajax如何使用JSON  Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...

  3. 原生ajax接收json字符串(简单介绍)

    什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...

  4. ajax接收json数据到js解析

    今天又学到了一点新知识,脑子记不住东西特把它记录下来! 页面ajax请求后台时一般都是返回字符串进行判断,要是返回list或者对象时该怎么办? 第一种:ajax接收到list并返回给前台 js代码: ...

  5. ajax 接收json数据的进一步了解

    var url = "../searchclasses"; $.ajax({ url: url, type: "post", dataType: "j ...

  6. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  7. ajax接受json响应(讲义)

    l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...

  8. @RequestBody接收ajax的json字符串

    在使用ajax进行请求,并传递参数时,偶尔需要把数组作为传递参数,这是就要使用@RequestBody来解决这个问题 在页面端的处理: (1)利用JSON.stringify(arr)需要把json对 ...

  9. json传值以及ajax接收

    一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合. ...

随机推荐

  1. C#操纵Excel,此工作薄包含嵌入对象,Office 2007的设定方法

    C#操纵Excel,插入OLE对象时报“此工作薄包含嵌入对象,EXCEL可能无法从这些对象中删除个人信息.”, 如网上所述,Office 2003可以通过“菜单>>工具>>选项 ...

  2. DbContext 和ObjectContext

    近日学习新知识,用到CallContext数据槽,一直使用ObjectContext 但同时又在学习EF CodeFirst,上下文定义使用的 DbContext 这时问题来了,如何把DbContex ...

  3. 7. ZooKeeper的stat结构

    ZooKeeper命名空间中的每个znode都有一个与之关联的stat结构,类似于Unix/Linux文件系统中文件的stat结构. znode的stat结构中的字段显示如下,各自的含义如下: cZx ...

  4. C#参考之sealed密封类(转)

    C# 语言参考 sealed(C# 参考) 当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承.在下面的示例中,类 B 从类 A 继承,但是任何类都不能从类 B 继承. 1     ...

  5. Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法

    找到Help Viewer程序的位置(可以使用Everything工具搜索microsoft help找到),发送到桌面快捷方式,打开此快捷方式的属性,在目标的最后添加下面那行字,然后即可通过快捷方式 ...

  6. org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.Integer

    使用hibernate时,在save方法时,报了:org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.In ...

  7. 2718:晶晶赴约会-poj

    总时间限制:  1000ms 内存限制:  65536kB 描述 晶晶的朋友贝贝约晶晶下周一起去看展览,但晶晶每周的1.3.5有课必须上课,请帮晶晶判断她能否接受贝贝的邀请,如果能输出YES:如果不能 ...

  8. Ckeditor与Ckfinder的配合使用,上传图片、水印、修改图片名字为当前日期 asp.net

    为了配置出来上传功能,并且还添加水印,修改图片的名字为日期,真的头疼了很久,现在来分享一下自己所做的,也算一点小小的成就吧,顺带帮帮很多还在弄这个的猿们.我是分别用了两种方法.先说低版本的Versio ...

  9. thinkphp5源码解析(1)数据库

    前言 tp5的数据库操作全部通过Db类完成,比较符合国人的习惯,比如简单的Db::query().Db::execute(),还有复杂的链式操作Db::where('id=1')->select ...

  10. 【微服务】之四:轻松搞定SpringCloud微服务-负载均衡Ribbon

    对于任何一个高可用高负载的系统来说,负载均衡是一个必不可少的名称.在大型分布式计算体系中,某个服务在单例的情况下,很难应对各种突发情况.因此,负载均衡是为了让系统在性能出现瓶颈或者其中一些出现状态下可 ...