Ajax with JSON – RPC


Chúng ta có nhiều vấn đề cần giải quyết…cho việc truy xuất data từ server.

JSON-RPC là một trong những giải pháp truy cập tốt đến phía server.

  • Cho phép Client hoạt động trua ập data thông qua việc gọi mehtod từ server ( Không phải thông qua URL ).
  • Không dùng đối tượng XmlHttpRequest
  • Phía Client và Phía server đều trở nên đơn giản hơn.
  • Có thể truyền – nhận data trực tiếp ( mà không vần phải thông qua params )

*Note*

  1. Code nhiều hơn phía client vs server.
  2. Chỉ dùng cho JAVA . :[[ :[[………….

Source code : Download

JSON-RPC

  • Một chuẩn cho công việc hoạt động để gọi từ xa JSON data. http://json-rpc.org
  • Jabsorb
  1. Là một loại JSON-RPC thông dụng được sử dụng. bị giới hạn và việc cài đặt và tại liệu tham khảo chưa nhiều.
  • Tham khảo thêm 1 số thành phần support cho JSON-RPC :

 http://json-rpc.org/wiki/implementations

  • HIện thực RPC ( JAVA toolkits)
  1. Google Web Toolkit
  2. Direct Web Remoting

Congif-Server

  1. Dowload jabsorb : http://jabsorb.org/Download
  • 2 File : jabsorb-1.x.jar and jsonrpc.js
  • 2 File : slf4j-xxxx.jar
  • Đăng kí và Handler Object trên Server

Chúng ta một Object phía Server-side chúng ta cần register it với name cụ thể . Dùng init method của servlet with load-on-startup or context listener

rpcClient.YOUR_OBJECT_NAME.METHOD_NAME(args…);

Note : Nếu bạn có 1 class với các static methods . register CLASS

STEP 1 : Tạo ra 1 Handler Object:

package com.ajax.example;

public class JsonRpcSimple {
	public Product createProduct(String id,String name, double price){
		Product p = new Product(id, name, price);
		return p;
	}

	public double ranmdomNumber(){
		return Math.random();
	}

	public String plus(double a, double b){
		return "Result : " + a +" + " + b + " = " + (a+b);
	}
}

STEP 2 : Đăng kí Handler Object on Server ( Servlet Context Listener )

package com.ajax.example;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

import org.jabsorb.JSONRPCBridge;

public class JsonRpcInitializer
		implements ServletContextListener{

	@Override
	public void contextDestroyed(ServletContextEvent arg0) {

	}

	@Override
	public void contextInitialized(ServletContextEvent arg0) {
		JsonRpcSimple rpcSimple = new JsonRpcSimple();
		JSONRPCBridge globalBridge = JSONRPCBridge.getGlobalBridge();
		globalBridge.registerObject("rpcSimple", rpcSimple);

	}

}

STEP 3 : Khai báo load Listener in WEB.XML

<!-- Run RpcInitializer when app starts up -->
<listener>
	<listener-class>
		com.ajax.example.JsonRpcInitializer
	</listener-class>
</listener>

Congif-Client

  • Đăng kí RPC phía Client in Browser
  • rpcClient = new JSONRpcClient(“address”);  ( Address : là URL mà chúng ta khai báo khi mapping trong web.xml  – Ở đây là /JSON-RPC )
  • Synchronous    : rpcClient.OBJECT_NAME.METHOD_NAME(thamso…)
  • ASynchronous : rpcClient.OBJECT_NAME.METHOD_NAME(callback,args) (Nên dùng loại này không dùng Syn…) dùng Syn cho testting, debug.

STEP 1: Chúng ta thiết lấp connect trong JS . File ShowMessage.js của chúng ta như sau

var rpcClient;

window.onload = function(){
	rpcClient = new JSONRpcClient("JSON-RPC");
};

function showNumber(tagResult){
	var number = rpcClient.rpcSimple.ranmdomNumber();
	document.getElementById(tagResult).innerHTML = "Number is " + number;
}

STEP 2: Chúng ta tạo trang Client.HTML để truy xuất vào JS gọi function showNumber

<!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=ISO-8859-1">
<script type="text/javascript" src="scripts/ShowMessage.js"></script>
<script type="text/javascript" src="scripts/jsonrpc.js"></script>
<title>Insert title here</title>
</head>
<body>
<fieldset>
	<legend>Simple JSON-RPC - Show Number - Synchronous </legend>
	<input type="button" value="Show Number" onclick='showNumber("mydiv")'>
	<br/>
	<div id="mydiv"></div>
</fieldset>
</body>
</html>

Kết quả :

d1

STEP 3 : Chúng ta theo cách thứ 2 ASynchronous để thực hiện

function thứ 2 của chúng ta như sau :

function showPlusResult(inputFieldA,inputFieldB, tagResult){
// get two values field a vs field b
var a = parseFloat(document.getElementById(inputFieldA).value);
var b = parseFloat(document.getElementById(inputFieldB).value);
// check a vs b if not number . we assign a = 0 and b = 0
if(isNaN(a) || isNaN(b)){
a = 0;
b = 0;
}
// this callback method get 2 case :
// result : value returned from method
// exception : thrown new exception
var callback = function (result, exception) {
if(exception){
alert(exception.msg);
}else{
document.getElementById(tagResult).innerHTML = result;
}
};
// we call using ASynchronous with function plus a vs b la 2 params
rpcClient.rpcSimple.plus(callback,a,b);

}

Client chúng ta update lại 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=ISO-8859-1">
<script type="text/javascript" src="scripts/ShowMessage.js"></script>
<script type="text/javascript" src="scripts/jsonrpc.js"></script>
<title>Insert title here</title>
</head>
<body>
<fieldset>
	<legend>Simple JSON-RPC - Show Number</legend>
	<input type="button" value="Show Number" onclick='showNumber("mydiv")'>
	<br/>
	<div id="mydiv"></div>
</fieldset>
<br/>

<fieldset>
	<legend>Simple JSON-RPC - Plus</legend>
	Nhap A : <input type="text" id="a" name="a"><br/>
	Nhap B : <input type="text" id="b" name="b"><br/>
	<input type="button" value="Calculator" onclick='showPlusResult("a","b","mydiv2")'>
	<br/>
	<div id="mydiv2"></div>
</fieldset>
</body>
</html>

Chúng ta sẻ có kết quả như sau :
d1

Ok chúng ta có thể trải nghiệm :

Send – Recieve Complex Data

Chúng ta sẻ thao tác trên Object. việc trả về 1 đối tượng . RPC sẻ tự chuyển đổi BEAN về JSONObject để chúng ta thao tác

Function thứ 3 của chúng ta :

function displayProduct(tagId, tagName, tagPrice, tagResult){
	var id = document.getElementById(tagId).value;
	var name = document.getElementById(tagName).value;
	var price = parseFloat(document.getElementById(tagPrice).value);
	// Product at here is OBJECT => It's JSONObject
	var callback = function(product, exception) {
		if(exception){
			alert(exception.msg);
		}else{
			var result;
			if(product){
				result = "Result from server \n ID : "+
				product.id+"\n Name : " + product.name +"\n Price : $" + product.price;
			}else{
				result = "Create Product Fail...";
			}
			document.getElementById(tagResult).innerHTML = result;
		}
	};

	rpcClient.rpcSimple.createProduct(callback,id,name,price);
}

file Client HTML chúng ta bổ sung vào như sau :

<fieldset>
<legend>Add Product :  Send Data to Server</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='displayProduct("id","name","price","myDiv3")' value="Add Product"/></td>
  </tr>
</table>
</fieldset>
<br/>
<fieldset>
<legend>Result returned from Server</legend>
<div id="myDiv3"></div>
</fieldset>

Ok kết quả thực hiện :

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: