案例需求:客户端发送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字符串经典案例的更多相关文章

  1. IT兄弟连 JavaWeb教程 EL与JSTL表达式经典案例

    案例需求:使用MVC模式编写一个程序,当发起一个deptList.do请求时,在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中转发到deptlist.jsp,使用JST ...

  2. IT兄弟连 JavaWeb教程 JSP内置对象经典案例

    案例需求:使用MVC模式编写一个程序当发起一个deptList.do请求时在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中,然后转发到deptlist.jsp,使用js ...

  3. IT兄弟连 JavaWeb教程 AJAX的技术构成

    Ajax并不是新的技术,而是之前技术的整合,其中包括JavaScript.HTML.CSS.DOM.XMLHttpRequest.XML和JSON是构成Ajax技术体系技术基石. JavaScript ...

  4. IT兄弟连 JavaWeb教程 AJAX常见问题

    1  中文乱码问题 ●  POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...

  5. IT兄弟连 JavaWeb教程 AJAX中参数传递问题

    使用Ajax发送GET请求并需要传递参数时,直接在URL地址后拼接参数,格式如下: xhr.open('get','请求路径?参数名1=参数值1&参数名2=参数值2...',true); 使用 ...

  6. IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题

    Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术,Ajax ...

  7. IT兄弟连 JavaWeb教程 EL与JSTL表达式经典面试题

    1.简述EL表达式的作用 EL表达式的作用可分为以下三类 访问Bean的属性. 输出简单的运算结果. 获取请求参数值. 2.JSP标签的作用?如何定义? JSP标签可以分离JSP页面的内容和逻辑,业务 ...

  8. IT兄弟连 JavaWeb教程 JSP内置对象经典面试题

    1.请说明cookie.request.session.application的作用域和声明周期? 并说明它们适用与什么场景? request的生命周期是一次请求.可以用于JSP表单提交数据. ses ...

  9. Java基础-处理json字符串解析案例

    Java基础-处理json字符串解析案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名开发人员,想必大家或多或少都有接触到XML文件,XML全称为“extensible ...

随机推荐

  1. Java for LeetCode 111 Minimum Depth of Binary Tree

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  2. MVC常见错误记录

    1 找到了多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间来搜索匹配此请求的 根项目下的RouteCon ...

  3. RStudio安装package时出现错误

    cannot open URL 'http://www.stats.ox.ac.uk/pub/RWin/src/contrib/PACKAGES' 提示是打不开链接,你切换为国内的源试试Rstudio ...

  4. HTML5响应式模版Mocha

    HTML5响应式模版Mocha,经典,html5,蓝色,扁平,HTML5响应式模版Mocha是一款宽屏大气的HTML5网站展示模板. http://www.huiyi8.com/moban/

  5. hdu1085Holding Bin-Laden Captive!组合问题

    题目连接 题目意思:有单位价值为1 2 5的三种硬币,分别给出他们的数量,求用这些硬币不能组成的最小的价值 解题思路:普通的母函数 普通的母函数: 利用母函数的思想可以解决很多组合问题,下面举例说明: ...

  6. vs中解决方案、项目、类及ATL的理解

    解决方案,是对所有要完成工作的统称,一般叫Solution. 项目,也叫工程,是将解决方案分成若干个模块进行处理,一般叫做Project.添加项目就是添加工程.解决方案是所有项目的总和. 一个项目里面 ...

  7. linux进程学习-进程描述符,控制块

    从数据结构的角度,进程用task_struct结构来描述,称为“进程描述符 (Process Descriptor)”或者“进程控制块(Process Control Block, PCB)”,其包含 ...

  8. java自定义类型 作为HashMap中的Key值 (Pair<V,K>为例)

    由于是自定义类型,所以HashMap中的equals()方法和hashCode()方法都需要自定义覆盖. 不然内容相同的对象对应的hashCode会不同,无法发挥算法的正常功能,覆盖equals方法, ...

  9. 【C++】*p++ = *p不同环境下操作不同

    实测,Ubuntu16.04,gcc 5.3.0&5.4.0(编译选项选择C++11和不选择新标准结果相同) #include<iostream> using namespace ...

  10. 数据结构与算法(5)----->二叉树

    1.  概念 二叉树节点的结构: class Node{ int value; // value表示二叉树的节点值 Node left; Node right; // left和right表示二叉树的 ...