มาทำความรู้จักคร่าวๆกันแต่ละตัวก่อน
AJAX (Asynchronous JavaScript and XML) เป็นเทคโนโลยีที่ใช้ส่งข้อมูลระหว่าง web server กับ web browser โดยใช้ JavaScript
การส่งข้อมูลเป็นการส่งแบบ asynchronous คือไม่จำเป็นต้อง refresh web page ทำให้ทำงานตอบสนองผู้ใช้ได้เร็ว
Dojo - เป็นJavaScript library ทีมี API หลายอย่างให้ใช รวมทั้ง API สำหรับ HTTP request/response
เพื่อทำ AJAX ด้วย นอกจากนี้ยังมี API สำหรับ string manipulation, DOM manipulation, drag-and-drop support และ data structures
JSON (JavaScript Object Notation) - เป็นformat ข้อมูลแบบหนึ่งอยู่ในรูป text ออกแบบมาเพื่อใหเขียน และอ่านง่าย
รวมทั้งให้โปรแกรม parse และ generate ง่ายด้วย JSON จึงเป็น data-interchange language (จุดประสงค์เหมือน xml)
JSON ออกแบบมาเพื่อใช้กับ JavaScript โดยเป็น format ของdata ที่ส่งมาจาก server มี API ของหลายภาษาให้ใช้ เช่น C# ,Python, Java
มาเริ่มกันเลย
Simple HTTP Request
Example1 เป็นตัวอย่างให้ผู้ใช้ใส่ชื่อใน text field แล้ว คลิก Submit จะมี alert box ที่มีข้อความwelcome ส่งมาจาก web server ดูตัวอย่างโค้ด example1.jsp
<script language="javascript" src="js/dojo/dojo.js"></script>
<script language="javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");
function onLoad() {
var buttonObj = document.getElementById("myButton");
dojo.event.connect(buttonObj, "onclick", this, "onclick_myButton");
}
function onclick_myButton() {
var bindArgs = {
url: "actions/welcome.jsp",
error: function(type, data, evt){
alert(data);
},
load: function(type, data, evt){
alert(data);
},
mimetype: "text/plain",
formNode: document.getElementById("myForm")
};
dojo.io.bind(bindArgs);
}
</script>
----------------------------------------------------------------------------------------------------------------
<body onLoad="onLoad();"><form id="myForm">
<h1>Enter Name</h1>
<p>
Please enter a name:
</p>
<input type="text" name="name"/>
<input type="button" id="myButton" value="Submit"/>
</form>
</body>
</html>
ตอนแรกก็ import Dojo libraries, import package จากนั้นกำหนด onclick event handler ให้กับ button ซึ่งแทนที่จะกำหนดโดยใช้ attribute onclick ของ tag input
เราใช้การกำหนดโดย id แทน มี onclick_myButton เป็น handler ของ id myButton
function onclick_myButtonจะเรียก welcome.jsp และรับข้อมูลที่ส่งกลับมา โดยเรียก functiondojo.io.bind() รับ parameter bindArgs
ซึ่งเป็นarrayของname/value pairs จากตัวอย่างนี้มี 5 คู่
1. url: URL ที่จะ request
2. mimetype: ประเภทข้อมูลที่ส่งกลับมา
3. load: code ที่จะทำงานเมื่อ request สำเร็จ จากตัวอย่างคือ alert(data)
4. error: code ที่จะทำงานเมื่อ request ล้มเหลว หรือเกิด error จากตัวอย่างคือ alert(data)
5. formNode: form ที่มี field value ที่จะส่งไปให้ server
ดู parameter ทั้งหมดได้ ที่นี่
เมื่อ dojo.io.bind (bindArgs) ทำงานเสร็จ load code หรือerror code จะทำงานขึ้นอยู่กับ response ที่ส่งมา load กับ error มี3 parameter
- type: ประเภทของ function มีค่าเป็น load หรือerror
- data: ข้อมูลที่ส่งกลับ
- evt: event object.
นอกจากนี้เราสามารถ กำหนด event handler โดยใช้ dojo.event.connect() และสร้าง function สำหรับ handling คือ
event_handler(type,data,evt) ถ้าใช้วิธีนี้ จะไม่ต้องกำหนดload codeในbindArgs
var req = dojo.io.bind(bindArgs);
dojo.event.connect(req, "load", this, "event_handler");
Using JSON to Transport Java Objects
ในตัวอย่าง 2 (http://localhost:8080/dojo_json/example2.jsp ถ้าเปิดไม่ได้แนะนำให้ลอง compile src ของ class ที่ใช้มาใหม่)
จะมี list ของชื่อหนังสือ เมื่อผู้ใช้เอา mouse ไปวาง JavaScript จะส่ง id ของหนังสือไปยัง server และรับข้อมูลหนังสือกลับมาแสดงผล
book.jsp จะรับ book id และ return Book object ในรูปแบบ JSON string ซึ่ง Book class จะมี method toJSONString()
เพื่อแปลง Book Object ให้เป็น string ตาม JSON format โดยใช้ JSON API
public String toJSONString() throws JSONException {
JSONObject jsonObj = new JSONObject();
jsonObj.put("bookId", new Integer(this.bookId));
jsonObj.put("title", this.title);
jsonObj.put("isbn", this.isbn);
jsonObj.put("author", this.author);
return jsonObj.toString();
}
ที่ file ฝั่ง client คือ example2.jsp จะสร้าง event handler สำหรับ mouseover และ mouseout โดยรับ event จาก ของรายการหนังสือ
function trMouseOver(bookId) {
getBookInfo(bookId);
}
function trMouseOut(evt) {
var bookDiv = document.getElementById("bookInfo");
bookDiv.style.display = "none";
}
function getBookInfo(bookId) {
var params = new Array();
params['bookId'] = bookId;
var bindArgs = {
url: "book.jsp",
error: function(type, data, evt){
alert("error");
},
mimetype: "text/json",
content: params
};
var req = dojo.io.bind(bindArgs);
dojo.event.connect(req, "load", this, "populateDiv");
}
function populateDiv(type, data, evt) {
var bookDiv = document.getElementById("bookInfo");
if (!data) {
bookDiv.style.display = "none";
} else {
bookDiv.innerHTML = "ISBN: " + data.isbn +
"
Author: " + data.author;
bookDiv.style.display = "";
}
}
โค้ดข้างบนใช้ content property เพื่อเก็บ parameter ที่จะส่งให้ server ซึ่งต่างจากตัวอย่างที่แล้วที่ใช้ formNode เพราะว่าตัวอย่างนี้ไม่มี form
เมื่อ request สำเร็จ จะทำงานที่ function populateDiv เพื่อแสดงผลต่อไป
สรุป
Dojo เป็นทางเลือกหนึ่งสำหรับพัฒนา AJAX application อย่างไรก็ตามยังมี JavaScript library อื่นๆอีก เช่น Scriptaculous หรือ AjaxAnywhere
แต่ว่า Dojo ยังมี library อื่นๆอีก นอกจาก ajax ซึ่งช่วยในการพัฒนา full-scale application ได้ง่ายขึ้น
บทความที่เกี่ยวข้อง
