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 頁面成功接收並解析服務端返回的