Ajax接收json响应
- json？
- Json和xml比较
- Ajax如何使用JSON
- Ajax接收json响应案例
什么是json？
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的，这样就不需要单独的工具去解析。JSON本质上来说就是字符串，只不过有格式要求。
JSON有两种结构：
- “名/值”对的集合（A collection of name/value pairs）。在不同的语言中，它被理解为对象，结构，关联数组等 。
对象是一个无序的“名/值”对集合。一个对象以“{”开始，“}”结束。每个“名称”后跟一个“:” ；“名/值”对之间使用“,” 分隔：
如：{ "firstName": "Brett", "lastName":"McLaughlin", "email":"brett@newInstance.com" }
- 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组
数组是值（value）的有序集合。一个数组以“[”开始，“]”结束。值之间使用“,”分隔：
Json和xml比较
- 可读性
JSON和XML的可读性可谓不相上下，XML略占上风。
- 可扩展性
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
- 编码难度
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
- 解码难度
XML的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度几乎为零。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。
- 流行度
XML已经被业界广泛的使用，而JSON也开始崭露头角，在Ajax领域，JSON凭借自身的优势将取代XML。
Ajax如何使用JSON
1. 服务器端返回JSON相应的文本表示，如：
{“city” : “Hefei”, “province” : “Anhui”}
2. 客户端使用eval()函数将JSON文本转化为JavaScript对象：
注意，使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。
3. 然后从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技术实现以下功能，通过改变下拉框值修改下面表格中的信息。
所必须的包有：
- commons-lang-2.4.jar
- commons-logging-1.1.1.jar
- json-lib-2.4-jdk15.jar
- ezmorph-1.0.6.jar
- commons-collections-3.2.1.jar
- commons-beanutils-1.8.0.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/ChooseBook.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响应的更多相关文章
- ajax接受json响应（讲义）
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- ajax接收json
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- ajax接受json响应
一.显示页面(ajax_xml.html) body部分 <!-- 支持多选的列表框 --> <select name="first" id="firs ...
- 原生ajax接收json字符串(简单介绍)
什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...
- ajax接收json数据到js解析
今天又学到了一点新知识,脑子记不住东西特把它记录下来! 页面ajax请求后台时一般都是返回字符串进行判断,要是返回list或者对象时该怎么办? 第一种:ajax接收到list并返回给前台 js代码: ...
- ajax 接收json数据的进一步了解
var url = "../searchclasses"; $.ajax({ url: url, type: "post", dataType: "j ...
- Ajax接收Json数据，调用template模板循环渲染页面的方法
一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...
- Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法
平时研究代码时,经常会遇到AJAX的相关用法,做项目时才真正体会到Ajax的强大之处(与服务器数据交互如此之便捷,更新DOM节点而不用刷新整个页面),以及运用的频繁程度.今天整理了一下自己之前没搞清楚 ...
随机推荐
- @RequestParam，@PathVariable等注解区别
一.@RequestParam和@PathVariable的区别 1.@RequestParam是从uri中request后面的参数串来取得参数的 2.@PathVariable是从uri模板中取得参 ...
- 打破传统天价SAP培训，开创SAP师徒之路，经验丰富的老顾问带徒弟 qq群150104068
SAP领航社区,开设了一个导师性质的师徒圈子,类似大学导师带研究生,导师给学生安排课题.分配任务.分享资料,让学生自学提高.我们的教学方法是以自学为主.辅导为辅助,在实践中积累经验掌握原理.主要方向A ...
- Android与JS互相调用以及注意
近期项目中常常使用Html5而Android与JS调用常常会用到,这里记录一下,測试系统5.0以上. 这里先贴一下源代码 Activity: package jwzhangjie.com.webvie ...
- luogu1908 逆序对 树状数组
题目大意:对于给定的一段正整数序列,逆序对就是序列中ai>aj且i<j的有序对.求一段序列的逆序对数. 对于一个数组T,其一个点的值为值与该点下标相等的A序列中点的个数.对T维护一个树状数 ...
- 利用SQLite在android上实现增删改查
利用SQLite在android上实现增删改查 方法: 一.直接利用database.execSQL()方法输入完整sql语句进行操作 这种方法适用于复杂的sql语句,比如多表查询等等 这里适合于增删 ...
- Oracle 10G 中的"回收站"
在Oracle 10g数据库中,引入了一个回收站(Recycle Bin)的数据库对象. 回收站,从原理上来说就是一个数据字典表,放置用户Drop掉的数据库对象信息.用户进行Drop操作的对象并没有被 ...
- wampserver配置多站点
1.打开C:\wamp\bin\apache\apache2.2.22\conf\httpd.conf(因安装的路径而异),查找listen 80 下面加上listen 8080 2.然后加上 < ...
- AUTOCAD2013 以上利用ACCORECONSOLE+ SCR后台批量清理图纸
无意中浏览到南胜大神的博客,https://www.cnblogs.com/NanShengBlogs/p/10957489.html 受此启发,特意改装此方法用于批量清理图纸,效果极佳. 详细介绍详 ...
- mysql.connector 事务总结
mysql.connector事务总结: connection.autocommit = 0 (默认值) 事务处理 使用 connection.commit()方法 #!/usr/bin/env py ...
- 使用一行代码解决IE浏览器兼容问题
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html&g ...