Ajax with JSON


Trong bài này mình hướng dẫn các bạn việc thao tác data JSON thông qua Ajax

Chuẩn bị chúng ta down thư viện hổ trợ cho JAVA .

http://www.json.org/java/json.zip

Documentation
http://www.json.org/java/

Hổ trợ tốt hơn các bạn có thể quan tâm tới GSON của google. http://code.google.com/p/goodle-gson/

Hì mình dùng json.org củng chỉ mục đích là bik cách hoạt động (JSON trong android)

Now…Bây giờ chúng ta chuẩn bị một Servlet sử dụng JSON nào.

  • Thiết lập response header : Pragma vs Cache-Control (như các bài trước)
  • Thiết lập Content-Type : response.setContentType(“text/javascript”);
  • Vài cách để chuyển đổi Object (Bean) vào trong JSONObject
  1. JSONObject result1 = new JSONObject(bean); 
  2. JSONArray result2 = new JSONArray(arrayOfBeans, false);
  3. JSONObject result3 = new JSONObject( map);
  • => Out put ra kết quả response.getWriter.print(result);

Ví dụ chúng ta tạo ra 1 JSONObject in Servlet như sau :

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		// Create an product
		Product p1 = new Product("1001", "Iphone-4S", 1500);

		// Convert product to JSONObject
		JSONObject joProduct = new JSONObject(p1);
		out.print(joProduct);
	}

Kết quả chúng ta thấy như sau :

d1

Đối với JSONArray .

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		// Create an product
		Product p1 = new Product("1001", "Iphone-4S", 1500);

		Product p2 = new Product("1002", "Iphone-5S", 2500);

		// Convert product to JSONObject
		//JSONObject joProduct = new JSONObject(p1);

		//out.print(joProduct);
		List<Product> productList = new ArrayList<Product>();
		productList.add(p1);
		productList.add(p2);
		JSONArray jaProduct = new JSONArray(productList,false);
		out.print(jaProduct);

	}

Kết quả sẻ như sau :

d1

Khi sử dụng JSONArray cần chú ý các thông tin sau :

  1. new JSONArray(javaArrayOrCollection) : Loại này chỉ dùng cho loại primitives, Strings, JSONObjects
  2. new JSONArray(javaArrayOrCollection, false) : Tạo ra mảng JSON không bao gồm super class (inheritance)
  3. new JSONArray(javaArrayOrCollection, true) : Tạo ra mảng JSON bao gồm super class (inheritance)

Chúng ta sẻ hiện thực một Servlet trả về 1 JSON với điều kiện dựa vào ID của Product

Class Product.java

package com.ajax.demo;

public class Product{
	private String id;
	private String name;
	private double price;

	public Product() {
	}
	public Product(String id, String name, double price) {
		this.id = id;
		this.name = name;
		this.price = price;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public double getPrice() {
		return price;
	}
	public void setPrice(double price) {
		this.price = price;
	}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		Product p1 = new Product("1001", "Iphone-4S", 1500);
		Product p2 = new Product("1002", "Iphone-5S", 2500);

		String idProduct = request.getParameter("idProduct");

		if(idProduct.equalsIgnoreCase("1001")){
			JSONObject joProduct = new JSONObject(p1);
			out.print(joProduct);
		}else if (idProduct.equalsIgnoreCase("1002")){
			JSONObject joProduct = new JSONObject(p2);
			out.print(joProduct);
		}else{
			out.print("null");
		}
}

Client HTML của chúng ta như sau :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="Scripts/ShowMessage.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div align="left">
		<table border="1" bgcolor="#eeeeee">
			<tr>
				<th><big>Ajax: Simple Message</big></th>
			</tr>
		</table>
		<p />
		Nhập ID Product : <input type="text" name="idProduct" id="idProduct">
		<input type="button" value="Show Message" onclick='sendRequest("ProductServlet","idProduct","myDiv")' />
		<div id="myDiv"></div>
	</div>
</body>
</html>

ShowMessage.js của mình : Truyền theo method POST data là idProduct

//Creating a new XMLHttpRequest object base on Web browser
function getRequestObject() {
	if (window.ActiveXObject) {
		return(new ActiveXObject("Microsoft.XMLHTTP"));
	} else if (window.XMLHttpRequest) {
		return(new XMLHttpRequest());
	} else {
		return(null);
	}
}

function sendRequest(serverSite,idUserInput,tagHTML) {
	var request = getRequestObject();
	//==========================New code========================================
	var data = "idProduct=" + escape(document.getElementById(idUserInput).value);
	//================================End==================================
	// request change current state , we will call function handleResponse
	// to process result returned from server
	request.onreadystatechange = function() {
		handleResponse(request,tagHTML);
	};
	//==========================New code========================================
	// open connect to server site allow by GET method
	request.open("POST", serverSite, true);//Asynchrnonos request
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//send data
	request.send(data);
	//================================End==================================
}

//process result returned from server.
function handleResponse(request,tagHTML) {
	if (request.readyState == 4 && request.status == 200) {
		// request success
		//alert(request.responseText); // show dialog box display result
		//document.getElementById(tagHTML).innerHTML = request.responseText;
		var jsonString = request.responseText;

		if(jsonString == "null"){
			document.getElementById(tagHTML).innerHTML = request.responseText;
		}else{
			var data = eval("(" + jsonString + ")");
			showResultJSON(tagHTML,data);
		}
	}else{
		// request fail
	}
}

function showResultJSON(tagHTML,product){
	var result = "<ul>"+
					"<li>ID : "+product.id+"</li>"+
					"<li>Name : "+product.name+"</li>"+
					"<li>Price : $"+product.price+"</li>"+
				 "</ul>";
	document.getElementById(tagHTML).innerHTML = result;
}

Note : Chú ý chúng ta chuyển đổi chuổi JSONObject về thành dạng cấu trúc trong JS bằng hàm eval();

Kết quả của chúng ta :

d1

Với JSON Array thì như thế nào:

Chúng ta viết 1 Servlet để trả về một JSONArray

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		Product p1 = new Product("1001", "Iphone-4S", 1500);
		Product p2 = new Product("1002", "Iphone-5S", 2500);
		Product p3 = new Product("1003", "Galaxy-4S", 3500);
		Product p4 = new Product("1004", "Lumina-996", 1700);

		//String idProduct = request.getParameter("idProduct");

		List<Product> productList = new ArrayList<Product>();
		productList.add(p1);
		productList.add(p2);
		productList.add(p3);
		productList.add(p4);
		JSONArray jaProduct = new JSONArray(productList,false);
		out.print(jaProduct);
	}

Chúng ta fix lại 2 function tron ShowMessage.js để send request và hiển thị data như sau :

function sendRequest(serverSite,tagHTML) {
	var request = getRequestObject();
	// request change current state , we will call function handleResponse
	// to process result returned from server
	request.onreadystatechange = function() {
		handleResponse(request,tagHTML);
	};

	// open connect to server site allow by GET method
	request.open("POST", serverSite, true);//Asynchrnonos request
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//Not send data
	request.send(null);

}

//process result returned from server.
function handleResponse(request,tagHTML) {
	if (request.readyState == 4 && request.status == 200) {
		// request success
		//alert(request.responseText); // show dialog box display result
		//document.getElementById(tagHTML).innerHTML = request.responseText;
		var jsonString = request.responseText;
		var data = eval("(" + jsonString + ")");
		showResultJSON(tagHTML,data);

	}else{
		// request fail
	}
}

function showResultJSON(tagHTML,productList){

	var result =
		"<table width='500' border='1' cellspacing='2' cellpadding='2'>"+
		  "<tr bgcolor='#0099FF'>"+
		    "<td>ID</td>"+
		    "<td>Name</td>"+
		    "<td>Price</td>"+
		  "</tr>";
	for(var i = 0; i < productList.length; i++ ){
		var product = productList[i];
		var append =
			"<tr>"+
				"<td>"+product.id+"</td>"+
				"<td>"+product.name+"</td>"+
				"<td>"+product.price+"</td>"+
	    	"</tr>";
		result += append;
	}
	result += "</table>";
	document.getElementById(tagHTML).innerHTML = result;
}

Ở đây chúng ta hiển thị lên 1 table.
Client HTML của chúng ta như sau :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="Scripts/ShowMessage.js"></script>
<title>Insert title here</title>
</head>
<body>
	<table border="1" bgcolor="#eeeeee">
		<tr>
			<th><big>Ajax: Simple Message</big></th>
		</tr>
	</table>

	<br>
	<fieldset>
		<legend>Show ALL Product</legend>
		<input type="button" value="Show ALL Product"
			onclick='sendRequest("ProductServlet","myDiv2")' />
		<div id="myDiv2"></div>
	</fieldset>
</body>
</html>

Kết quả sau khi run :
d1

Deploy Map in JSON.

Những vấn đề cần nhớ :

  • JSONObject result = new JSONObject(Bean); 
  • JSONObject result = new JSONObject(Bean,true);  // có include super class (inheritance)
  • JSONObject result = new JSONObject(map); // Map key : JSONObject
  • JSONObject result = new JSONObject(String); // Parder Json string về để process in server

Chúng ta viết Server (Servlet) trả về một JSONObject with MAP

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		Product p1 = new Product("1001", "Iphone-4S", 1500);
		Product p2 = new Product("1002", "Iphone-5S", 2500);
		Product p3 = new Product("1003", "Galaxy-4S", 3500);
		Product p4 = new Product("1004", "Lumina-996", 1700);

		Map<String, Product> productMap = new HashMap<String,Product>();
		productMap.put(p1.getId(), p1);
		productMap.put(p2.getId(), p2);
		productMap.put(p3.getId(), p3);
		productMap.put(p4.getId(), p4);

		JSONObject productsJSON = new JSONObject(productMap,false);
		out.print(productsJSON);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

Map chúng ta sẻ thấy kết quả như sau :

d1

Ok phía Javascript : ShowMessage.js chúng ta chỉ thay đổi 1 chút ở function show kết quả như sau :

function showResultJSON(tagHTML,productList){
	var result =
		"<table width='500' border='1' cellspacing='2' cellpadding='2'>"+
		  "<tr bgcolor='#0099FF'>"+
		    "<td>ID</td>"+
		    "<td>Name</td>"+
		    "<td>Price</td>"+
		  "</tr>";
	for(var product in productList){
		var p = productList[product];
		var append =
			"<tr>"+
				"<td>"+p.id+"</td>"+
				"<td>"+p.name+"</td>"+
				"<td>"+p.price+"</td>"+
	    	"</tr>";
		result += append;
	}
	result += "</table>";
	document.getElementById(tagHTML).innerHTML = result;
}

ok Chúng ta vẫn giữ nguyên client HTML
kết quả sẻ hiển thị như sau :
d1

Send JSON Đền Server

CLIENT : 

  1. chúng ta download JSON.stringify from : http://www.json.org/json2.js
  2. thiết lập – kéo json script vào trong sscripts của chúng ta và load vào trong client
  3. HIện thực : gọi Json.Stringify đến đối tượng trong JS : escape(JSON.stringify(object))
  4. Mã hoa URL : gọi escape để truyển data thong qua HTTP
  5. Send POST từ Client to Server.

SERVER :

  1. Nhận tham số từ CLient : request.getParameter(…);
  2. Chuyển đổi json String vào trong JSONObject hay JSONArray

OK bây giờ chương trình chúng ta demo như sau : Khi add một Product sẻ cập nhập là Table Product của chúng ta luôn.

Phía client chúng ta có như sau :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="Scripts/ShowMessage.js"></script>
<script type="text/javascript" src="Scripts/json2.js"></script>
<title>Insert title here</title>
</head>
<body>
	<table border="1" bgcolor="#eeeeee">
		<tr>
			<th><big>Ajax: Simple Message</big></th>
		</tr>
	</table>		
	<br/>

	<fieldset>
		<legend>Add Product</legend>
		<table width="373" border="1" cellspacing="2" cellpadding="2" bgcolor="#CCFFCC">
		  <tr>
		    <td width="100" >Prdocut ID</td>
		    <td width="253" ><input type="text" id="id" name="id" /></td>
		  </tr>
		  <tr>
		    <td >Product Name</td>
		    <td><input type="text" id="name" name="name" /></td>
		  </tr>
		  <tr>
		    <td>Price</td>
		    <td><input type="text" id="price" name="price" /></td>
		  </tr>
		  <tr>
		    <td >&nbsp;</td>
		    <td><input type="button" onclick='sendRequest("AddProduct","id","name","price","myDiv2")' value="Add Product"/></td>
		  </tr>
		</table>
	</fieldset>
	<br>
	<fieldset>
		<legend>Show ALL Product</legend>
		<div id="myDiv2"></div>
	</fieldset>
</body>
</html>

Phía JavaScript . ShowMessage.js chúng ta có điều chỉnh trong function sendRequest

SendRequest co 5 params :

param 1 : Server Side ( ở dây mình là AddProduct)

param 2 ,3, 4 : Textfield id , name, price của product

param 5 : tag DIV để hiển thị danh sách sản phẩm

function sendRequest(serverSite,tagId,tagName,tagPrice,tagHTML) {
	// get cac field input
	var id = document.getElementById(tagId).value;
	var name = document.getElementById(tagName).value;
	var price = document.getElementById(tagPrice).value;
	// create object product
	var product = new Object();
	product.id = id;
	product.name = name;
	product.price = price;
	// set data with JSON String
	var data = "product=" + escape(JSON.stringify(product));

	var request = getRequestObject();
	// request change current state , we will call function handleResponse 
	// to process result returned from server 
	request.onreadystatechange = function() { 
		handleResponse(request,tagHTML); 
	};

	// open connect to server site allow by GET method
	request.open("POST", serverSite, true);//Asynchrnonos request
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//Not send data
	request.send(data);

}

Đây là phần xử lý logic trong Servlet : Servlet AddProduct

package com.ajax.demo;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 org.json.JSONException;
import org.json.JSONObject;

/**
 * Servlet implementation class AddProduct
 */
@WebServlet("/AddProduct")
public class AddProduct extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static Map<String, Product> productMap = new HashMap<String,Product>();

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddProduct() {

        super();
        Product p1 = new Product("1001", "Iphone-4S", 1500);
		Product p2 = new Product("1002", "Iphone-5S", 2500);
		Product p3 = new Product("1003", "Galaxy-4S", 3500);
		Product p4 = new Product("1004", "Lumina-996", 1700);

		productMap.put(p1.getId(), p1);
		productMap.put(p2.getId(), p2);
		productMap.put(p3.getId(), p3);
		productMap.put(p4.getId(), p4);
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		PrintWriter out = response.getWriter();

		String data = request.getParameter("product");
		try {
			JSONObject newProduct = new JSONObject(data);
			Product p = new Product(newProduct.getString("id"),
					newProduct.getString("name"), newProduct.getDouble("price"));
			productMap.put(p.getId(), p);

			JSONObject sendClient = new JSONObject(productMap,false);
			out.print(sendClient);
		} catch (JSONException e) {		
			e.printStackTrace();
		}
		System.out.println(data);

	}

}

Ok đây là kết quả của chúng ta:

d1

 

Chúc các bạn thành công.

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: