IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例
案例需求：客户端发送AJAX请求服务器端获取用户信息的数据。
案例实现：
在服务器端要将Java对象转换成JSON字符串，如果使用拼接JSON字符串的方式非常繁琐，并且非常容易出错，所以一般会借助第三方Jar包来辅助我们把Java对象编程JSON字符串。
在服务器端将单个Java对象转换成JSON字符串使用JSONObject类的静态方法：formObject (Object object)，该方法返回一个JSONObject对象，调用该对象的toString()方法即可完成转换。
在客户端将JSON字符串转换为JavaScript对象，常用的方法有如下几种：
● 使用eval函数：
var jsonStr = '{"id":1,"name":"张三"}';
var obj = eval( " ( " + str + " ) " );
● 使用JSON.parse函数
var jsonStr = '{"id":1,"name":"张三"}';
var obj = JSON.parse(str);
可以发现使用JSON.parse函数可以更方便的将JSON字符串转换为JavaScript对象，这也是推荐的方式。
下面的案例将演示如何使用Ajax从服务器端查询一个用户信息并使用json-lib.jar工具包将用户对象转换为JSON字符串然后返回到客户端。
首先新建一个动态的Web工程，工程名为xdl_ajax_demo，项目构建成功后在lib目录下添加json-lib.jar以及它的依赖包：
● commons-beanutils.jar
● commons-collections.jar
● common-logging.jar
● common-lang.jar
● ezmorph.jar
● json-lib.jar
然后再新建com.xdl.bean包并在包下定义一个User类，用来封装用户数据，包括以下属性：
name：姓名
age：年龄
gender：性别
salary：薪水
User类的详细代码如下：
package com.xdl.bean;
public class User {
private String name; //姓名
private int age; //年龄
private String gender; //性别
private double salary; //薪水
/**
* 构造器
* @param name
* @param age
* @param gender
* @param salary
*/
public User(String name, int age, String gender, double salary) {
this.name = name;
this.age = age;
this.gender = gender;
this.salary = salary;
}
/**
* 无参构造器
*/
public User(){
}
//Get and Set方法
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
接下来新建com.xdl.servlet包并在包下定义一个GetUserInfoServlet类，可以返回User对象的JSON字符串数据。详细代码如下：
package com.xdl.servlet;
import com.xdl.bean.User;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/getUserInfo")
public class GetUserInfoServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
User user = new User("三十画生",26,"男",5000.0);
String jsonStr = JSONObject.fromObject(user).toString();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(jsonStr);
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
编写HTML页面user.html，使用Ajax发送请求，把返回的用户信息JSON字符串经过解析后显示到页面上。详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getUserInfo(){
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xhr.open('get','getUserInfo',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var userInfo = xhr.responseText;
userInfo = JSON.parse(userInfo);
document.getElementById("name").innerHTML =
'name:' + userInfo.name;
document.getElementById("age").innerHTML =
'age:' + userInfo.age;
document.getElementById("gender").innerHTML =
'gender:' + userInfo.gender;
document.getElementById("salary").innerHTML =
'salary:' + userInfo.salary;
}
};
xhr.send(null);
}
</script>
</head>
<body>
<button type="button" onclick="getUserInfo()">获取用户信息</button>
<h2 id="name"></h2>
<h2 id="age"></h2>
<h2 id="gender"></h2>
<h2 id="salary"></h2>
</body>
</html>
最后启动Tomcat服务器，然后打开浏览器并输入http://localhost:8080/xdl_ajax_ demo/user.html，浏览器将显示如图4所示的页面。
此时点击获取用户信息按钮，网页将发送Ajax请求获取用户信息，最后浏览器将显示如图5所示的页面，表示浏览器已经获取到服务器端返回的JSON格式的用户数据，并且已经成功解析。
图4 user.html
图5 页面成功接收并解析服务端返回的用户信息
案例需求：在上一个案例中，是客户端发送AJAX请求，服务端返回所有用户信息。
案例实现：
在服务器端将Java集合转换为JSON字符串需要使用JSONArray类的静态方法：formObject(Object object)，该方法返回一个JSONArray对象，调用该对象的toString()方法即可完成转换。
下面将在之前xdl_ajax_demo项目的基础上进行，演示了如何使用Ajax从服务器端查询一个用户信息列表并使用json-lib.jar工具包将用户列表对象转换为JSON字符串然后返回到客户端。
首先在com.xdl.servlet包下定义GetUserInfoListServlet类，可以返回User对象集合的JSON字符串数据。详细代码如下：
package com.xdl.servlet;
import com.xdl.bean.User;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/getUserInfoList")
public class GetUserInfoListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
User user1 = new User("三十画生",26,"男",5000.0);
User user2 = new User("二十画生",24,"女",15000.0);
List<User> userList = new ArrayList<>();
userList.add(user1);
userList.add(user2);
String jsonStr = JSONArray.fromObject(userList).toString();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(jsonStr);
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
编写HTML页面userlist.html，使用Ajax发送请求，把返回的用户信息列表的JSON字符串经过解析后显示到页面上。详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getUserInfoList(){
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xhr.open('get','getUserInfoList',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var userInfoList = xhr.responseText;
userInfoList = JSON.parse(userInfoList);
var userInfoListTable =
document.getElementById("userInfo List");
userInfoListTable.innerText = '';
var rowHead = userInfoListTable.insertRow();
rowHead.insertCell().innerHTML = 'NAME';
rowHead.insertCell().innerHTML = 'AGE';
rowHead.insertCell().innerHTML = 'GENDER';
rowHead.insertCell().innerHTML = 'SALARY';
for(var i = 0;i<userInfoList.length;i++){
var userInfo = userInfoList[i];
var row = userInfoListTable.insertRow();
row.insertCell().innerHTML = userInfo.name;
row.insertCell().innerHTML = userInfo.age;
row.insertCell().innerHTML = userInfo.gender;
row.insertCell().innerHTML = userInfo.salary;
}
}
}
xhr.send(null);
}
</script>
</head>
<body>
<button type="button" onclick="getUserInfoList()">获取用户信息列表</button>
<table id="userInfoList"></table>
</body>
</html>
最后启动Tomcat服务器，然后打开浏览器并输入http://localhost:8080/xdl_ajax_ demo/userlist.html，浏览器将显示如图6所示的页面。
此时点击获取用户信息列表按钮，网页将发送Ajax请求获取用户信息列表，最后浏览器将显示如下图7所示的页面，表示浏览器已经获取到服务器端返回的JSON格式的用户列表数据，并且已经成功解析。
图6 userlist.html
图7 页面成功接收并解析服务端返回的用户信息列表
IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例的更多相关文章
- IT兄弟连 JavaWeb教程 EL与JSTL表达式经典案例
案例需求:使用MVC模式编写一个程序,当发起一个deptList.do请求时,在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中转发到deptlist.jsp,使用JST ...
- IT兄弟连 JavaWeb教程 JSP内置对象经典案例
案例需求:使用MVC模式编写一个程序当发起一个deptList.do请求时在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中,然后转发到deptlist.jsp,使用js ...
- IT兄弟连 JavaWeb教程 AJAX的技术构成
Ajax并不是新的技术,而是之前技术的整合,其中包括JavaScript.HTML.CSS.DOM.XMLHttpRequest.XML和JSON是构成Ajax技术体系技术基石. JavaScript ...
- IT兄弟连 JavaWeb教程 AJAX常见问题
1 中文乱码问题 ● POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...
- IT兄弟连 JavaWeb教程 AJAX中参数传递问题
使用Ajax发送GET请求并需要传递参数时,直接在URL地址后拼接参数,格式如下: xhr.open('get','请求路径?参数名1=参数值1&参数名2=参数值2...',true); 使用 ...
- IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题
Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术,Ajax ...
- IT兄弟连 JavaWeb教程 EL与JSTL表达式经典面试题
1．简述EL表达式的作用 EL表达式的作用可分为以下三类 访问Bean的属性. 输出简单的运算结果. 获取请求参数值. 2．JSP标签的作用?如何定义? JSP标签可以分离JSP页面的内容和逻辑,业务 ...
- IT兄弟连 JavaWeb教程 JSP内置对象经典面试题
1．请说明cookie.request.session.application的作用域和声明周期? 并说明它们适用与什么场景? request的生命周期是一次请求.可以用于JSP表单提交数据. ses ...
- Java基础-处理json字符串解析案例
Java基础-处理json字符串解析案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名开发人员,想必大家或多或少都有接触到XML文件,XML全称为“extensible ...
随机推荐
- 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛 G 旋转矩阵 【模拟】
链接:https://www.nowcoder.com/acm/contest/90/G 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...
- 深入浅出，JS原型链的工作原理
前言:原型链,即原型链条.它是由原型.原型的原型.原型的原型的原型...这一规则组合成的,经常被应用于继承. 原型的作用在JS中,每个对象都有自己的原型.当我们访问对象的属性和方法时,JS会先访问对象 ...
- 排序List集合
这两天写代码过程中遇到一个需求,需要按照某个字段排序List集合,自己实现了一半,发现网上有个更好的版本,就采用了这个,记录下来. 使用这个工具类要注意一个就是 如果你按照age 字段排序,那么age ...
- springboot简单介绍
1.springboot简单介绍 微服务架构 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程. 该框架使用了特定的方 ...
- make和rest用法
位置(position):下一个要读取或写入的数据的索引.缓冲区的位置不能为负,并且不能大于其限制(limit). 标记(mark)与重置(reset):标记是一个索引,通过Buffer中的mark( ...
- PYTHON 爬虫笔记九:利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集（实战项目二）
利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集 目标站点分析 今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方 ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- 通过阿里云域名动态解析 IP 地址
这两天在家里用树莓派折腾了一个家用服务器,主要用来做 mac 的 Time Machine ,还有就是当做下载机和 nas ,想着平时上班时间家里没人用网络,空着也是空着,就可以利用空闲带宽下个美剧啥 ...
- openfire性能测试
使用TSung对Jabber服务器openfire进行压力测试 http://blog.csdn.net/spider_zhcl/article/details/6073920 Tsung负载测试Ti ...
- mvc 让伪静态变得简单
IIS 部署后访问*.* config 配置: <modules runAllManagedModulesForAllRequests="true"> < ...