Lâu quá không viết Blog, hôm nay làm một bài Post lên cho Blog khỏi hiu quạnh 😀
Ajax : bản thân mình gọi nó là một món gia vị cho Homepage, mặc dù chưa hẳn là vậy, với Ajax bạn có thể làm được nhiều thứ, sự tiên lợi của nó nằm ở chổ, thay vì phải load lại nguyên một trang web, thì với công nghệ này, web site của bạn mỗi lần Refresh, hay mỗi lần nạp, nó sẽ chỉ load thêm các thành phần mới, những thành phần cũ sẽ không bị load lại, điều này làm tăng đáng kể tốc độ và tính tương tác của website có vẽ dễ chịu hơn.
Ví dụ dưới đây chỉ đơn giản là gán một dòng text vào textbox (có sử dụng Ajax) :
1. Tạo một XMLHttpRequest Object đối với các trình duyệt khác nhau :
Internet Explorer cũ :
xmlHttpRe =new ActiveXObject(“Msxml2.XMLHTTP”);
Internet Explorer từ 6.0 trở lên :
xmlHttpRe = new ActiveXObject(“Microsoft.XMLHTTP”);
Firefox hoặc các trình duyệt khác :
xmlHttpRe = new XMLHttpRequest();
2. Mở XMLHttpRequest Object, gởi Request cho Server :
function show(){
var getText =””;
if(xmlHttpRe) {
xmlHttpRe.open(“GET”,”svGetText?” + getText);
xmlHttpRe.onreadystatechange = handleGetText;
xmlHttpRe.send(null);
}
}
Đoạn code trên sẽ sẽ gởi đến Server dòng text, svGetText là tên của một Servlet. Sau khi Server nhận Request từ client, nó sẽ tiến hành xử lý và
gởi Response lại cho Client. Ta code đoạn mã sau (bên phía client) để nhận kết quả trả về từ Server.
function handleGetText() {
if (xmlHttpRe.readyState == 4) {
if(xmlHttpRe.status == 200) {
document.Form1.textbox1.value=xmlHttpRe.responseText;
}else {
alert(“Không kết nối được với Server”);
}
}
}
Có 3 chổ cần lưu ý đối với đoạn code trên :
readyState : là trạng thái hiện tại của đối tượng xmlHttpRe, có 5 cấp độ :
0 : chưa khởi tạo
1 : vừa mới khởi tạo
2 : vừa gởi request đi
3 : đang xử lý Response nhận từ Server
4 : đã xử lý xong, lấy được responseText
status : trạng thái hiện hành của đối tượng
200 : sẳn sàng đáp ứng
404 : không tìm thấy trang
Open(method, url, đồng bộ hay không)
OK. Vậy là chúng ta xong Script xử lý Event cho client, bây giờ là phần hiển thị :
<html>
<head>
<title> Ví dụ Ajax</title>
</head>
<body>
<form name=”Form1“>
Lời chào :<input type=”text” name=”textbox” />
<input type=”button” onClick=”javascript:show() ;” value=”Hiện”/>
</form>
</body>
</html>
Code một đoạn mã hiển thị lời chào bên Servlet. Đơn giản thôi 😀
public class svGetText extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
response.setContentType(“text/html;charset=UTF-8”);
PrintWriter out = response.getWriter();
out.println(“Xin chào, đây là ví dụ Ajax đầu tiên”);
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
doPost(request, response);
}
}
———————-
Các bạn cũng có thể sử dụng phương thứ POST thay vì GET trên Ajax, phần lớn người ta thường hay dùng GET khi viết các ứng dụng trên Ajax, nhưng trong một số trường hợp cần tính an toàn dữ liệu, người ta sẽ dùng POST.
Việc sử dụng Post theo mình thì có hơi rắc rối một tí, nghĩa là bạn phải cài đặt cái Request trước khi truyền đi, việc này được thực hiện bởi 3 dòng sau :
xmlHttpRe.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlHttpRe.setRequestHeader(“Content-length”, params.length);
xmlHttpRe.setRequestHeader(“Connection”, “close”);
…
download mã nguồn tại đây : http://www.mediafire.com/?z6jmh3lat6rtn2b
Kỳ sau, mình sẽ so sánh kỹ 2 anh Post và Get này, giờ khuya rồi… đi ngủ 🙂
(minhman2006_2121@yahoo.com)
Lê Minh Mẫn 