ajax接受json响应(讲义)
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
- 服务器端返回JSON相应的文本表示,如:
{“city” : “Hefei”, “province” : “Anhui”}
- 客户端使用eval()函数将JSON文本转化为JavaScript对象:
注意,使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。
- 然后从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.innerHT ML = 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响应
一.显示页面(ajax_xml.html) body部分 <!-- 支持多选的列表框 --> <select name="first" id="firs ...
- Ajax接收json响应
json? Json和xml比较 Ajax如何使用JSON Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...
- MVC字符串转json,ajax接受json返回值
#region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...
- ajax接收json
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- ajax+jquery+JSON笔记
ajax (asynchronous javascript and xml -- 基于javascript和xml的异同步通讯技术) 特征: 异步通讯 异步的请求-响应模式 1.传统的 ...
- springMVC学习之接受JSON参数
今天在springmvc使用rest模式异步提交,后台接受json字符.发现好多问题,感觉和spring3.0使用习惯上多少有点区别.因此把4.0的异步提交和方式记录下来. 前台页面代码如下: < ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
随机推荐
- NFC (Near Filed Communication)
NFC的用途:近场通信(Near Field Communication,NFC),又称近距离无线通信,是一种短距离的高频无线通信技术,允许电子设备之间进行非接触式点对点数据传输(在十厘米内)交换数据 ...
- windows下配置php + mysql环境
一.php服务器环境:apache + php安装与配置 1.下载apache.(httpd.apache.com) apache官网只提供源码,编译文件会有跳转到别的网站的下载地址. 如需VC9或V ...
- C语言函数与程序结构
title : C语言函数与程序结构 tags : C语言作用域规则 , 外部变量 ,静态变量 ,寄存器变量,宏定义 grammar_cjkRuby: true --- 外部变量 变量声明用于说明变量 ...
- [转载] 高性能IO模型浅析
转载自http://www.cnblogs.com/fanzhidongyzby/p/4098546.html 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(B ...
- [转载] 常用 Java 静态代码分析工具的分析与比较
转载自http://www.oschina.net/question/129540_23043 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代 ...
- python相关资料
http://blog.jobbole.com/59535/ http://www.nryoung.org/blog/2013/2/28/python-threading/ http://blog.j ...
- 使用swiper简单的h5下滑翻页效果,
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- linux下高可用LVS搭建及配置方法
一,安装与配置ipvsadm ipvsadm --help #查询是否安装成功 二,配置Director Server服务器 1. ifconifg eth0:0 183.61.87.4 ...
- Dynamics 365创建电子邮箱字段包含值的联系人同时更改负责人的方法。
摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复267或者20171129可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...
- 【jQuery插件】使用cropper实现简单的头像裁剪并上传
插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...