คล้ายๆกลับบทความ สร้าง AJAX ด้วย Dojo และ JSON โดยคุณ We– แห่ง Java and Oracle Blog
แต่ผมนำมาเขียนด้วย script.aculo.us (Prototype) และ JSON-Lib แทน ด้วยเหตุผลที่ว่า
1. ใช้ script.aculo.us หรือ Prototype เพราะไม่เคยใช้กับ Java Project มาก่อน
2. ใช้ JSON-Lib เพราะมัน Powerfull กว่า Standard JSON Library ที่ json.org นั่นเอง
สำหรับพื้นฐาน AJAX คืออะไร JSON คืออะไร หาอ่านกันตามสะดวกนะครับ ผมขอไม่ Feed ให้มากขนาดนั้น ว่าแล้วก็ลุยกันเลยครับ
1. script.aculo.us จะให้ไฟล์ .js มา 7 ตัวด้วยกัน รวม prototype แล้ว ก็ให้ทำการใส่เข้าไปใน HTML ได้เลยครับ (ตั้งชื่อว่า ajax.htm ละกัน)
อย่าลืม copy ไฟล์ไปวางใน directory ที่อ้างไปยัง .js ละครับ
<script src=”javascripts/prototype.js” type=”text/javascript”></script>
<script src=”javascripts/builder.js” type=”text/javascript”></script>
<script src=”javascripts/controls.js” type=”text/javascript”></script>
<script src=”javascripts/effects.js” type=”text/javascript”></script>
<script src=”javascripts/scriptaculous.js” type=”text/javascript”></script>
<script src=”javascripts/slider.js” type=”text/javascript”></script>
<script src=”javascripts/dragdrop.js” type=”text/javascript”></script>
จากนั้นทดสอบการทำงานง่ายๆเช่น
<div onclick=”new Effect.SwitchOff(this)”>
Click here if you’ve seen enough.
</div>
2. มาลุยกันที่ Server-Side กันบ้าง JSON-Lib ต้องการ .jar ทั้งหมด 5 ตัวดังนี้
jakarta commons-lang 2.3
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1
ezmorph 1.0.1
และ jar ของ JSON-Lib เองเช่น json-lib-2.0-jdk13.jar
ให้นำ jar ทั้งหมดใส่เข้าไปใน WEB-INF/lib เลยครับ
จากนั้นทำการทดสอบ JSON-Lib ผ่าน JSP ดังนี้ (ตั้งชื่อว่า json.jsp ก็ได้ครับ)
Map map = new HashMap();
map.put( “name”, “json” );
map.put( “bool”, Boolean.TRUE );
map.put( “int”, new Integer(1) );
map.put( “arr”, new String[]{“a”,”b”} );
map.put( “func”, “function(i){ return this.arr[i]; }” );JSONObject json = JSONObject.fromObject( map );
print( jsonObject );
โดย code ด้านบนคือการแปลง Map Object ให้เป็น JSON Message ด้วย JSON-Lib ให้เราลองเรียกไฟล์ JSP นี้ดูที่ Browser ควรจะได้
[“name”:”json”,”bool”:true,”int”:1,”arr”:[“a”,”b”],”func”:function(i){ return this.arr[i]; }]
3. ทำการ integrate script.aculo.us (Prototype) กับ Server-Side กันเลย
ให้เพิ่ม script ด้านล่างนี้เข้าไป เพื่อเป็นการบอกให้ต่อ AJAX ไปที่ json.jsp และคาดว่าจะได้ result เป็น JSON Message
new Ajax.Request(‘json.jsp’,
{ method:’get’,
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
}
}
);
ลอง alert ดูค่าใน json object เช่น
alert(json.name);
สรุป:
1. จะเห็นว่า script.aculo.us (Prototype) เองก็มีรูปแบบการเขียนที่ง่ายพอๆกันหรือง่ายกว่า Dojo เสียด้วยซ้ำ ที่สำคัญผมมองว่า script.aculo.us มี Community ที่น่าสนใจไม่น้อย มีการพลักดันสิ่งใหม่ๆออกมาพอสมควร และด้วยความที่มันยังคงเป็น JavaScript ทำให้ไม่ขึ้นกับ Platform เหมือน GWT
2. ส่วน JSON-Lib นั้น Powerful มากๆสำหรับ Server-Side ที่เป็น Java เพราะเราไม่จำเป็นต้องมาวุ่นวายในการแปลง Object ไปเป็น JSON Message เลย JSON-Lib นั้น provide Utilitirs Class มากมายสำหรับการแปลงไปแปลงกลับระหว่าง Object Type ต่างๆกับ JSON Message