1. AJAX
Đề tài : Công nghệ Ajax trong website
Phan Minh Tuấn
Đặng Phước
Thưởng
Lê Văn Huy
Nhóm 2 – TT0701
Trường Đại Học Ngoại Ngữ Tin Học
TPHCM
TP Hồ Chí Minh , Ngày 9 Tháng 11 năm 2010
Giảng viên hướng dẫn : Huỳnh Ngọc Tín
3. I. Ajax là gì?
AJAX (tiếng Anh), viết tắt cho "Asynchronous JavaScript and XML", nghĩa là "JavaScript
và XML không đồng bộ". Từ Ajax được ông Jesse James Garrett tạo ra và dùng lần đầu tiên vào
tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình
duyệt từ 10 nãm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết
hợp các ngôn ngữ:
HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript,
nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ
web. (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như
HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường
được sử dụng).
XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có
thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay
cả EBML.
Các trình duyệt hỗ trợ Ajax:
Apple Safari từ 1.2 trở lên
Konqueror
Microsoft Internet Explorer từ 4.0 trở lên
Mozilla/Mozilla Firefox từ 1.0 trở lên
Netscape từ 7.1 trở lên
Opera từ 8.0 trở lên
GreenBrowser 4.3
Google Suggest
Ajax được làm phổ biến vào năm 2005 bởi Google, với Google Suggest. Google Suggest
dùng Ajax để tạo ra một giao diện web rất sinh động, khi bạn gõ phím trong textbox tìm kiếm
của Google, một JavaScript gửi những kí tự đến server và server trả về một danh sách các gợi ý
rất gần gũi với từ khóa ta nhập vào.
II. Ajax hoạt động thế nào?
So sánh với các ứng dụng web truyền thống
Điểm khác biệt cơ bản nhất của công nghệ này là việc xử lý thông tin được thực hiện trên
máy thân chủ (Client) thay vì máy phục vụ (Server) như cách truyền thống. Máy chủ chỉ làm một
việc đơn giản là nhận thông tin từ máy khách và trả các dữ liệu về cho máy khách. Máy khách xử
lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy chủ rồi nhận dữ liệu từ máy
chủ và xử lý để hiển thị cho người dùng.
4. Một trong những điểm mấu chốt của công nghệ Ajax là bạn không tương tác trực tiếp với
máy chủ như cách truyền thống mà là qua một lớp trung gian của Ajax. Có thể bạn sẽ hỏi phải
chăng như vậy thì sẽ làm cho cơ chế hoạt động phải qua thêm một bước trung gian và sẽ làm
chậm hơn nữa quá trình tương tác? Thắc mắc trên là hoàn toàn có lý, tuy nhiên, thực tế lại ngược
lại: sử dụng Gmail bạn có cảm giác mọi thứ nhanh hơn. Lý do là:
Không phải lúc nào bạn cũng cần phải tương tác với máy chủ. Như trong trường hợp của
Gmail, một khi giao diện của Gmail đã được tải về xong (để ý khoảng thời gian ngắn từ
khi bạn đăng nhập cho đến khi giao diện của Gmail xuất hiện) thì những tác vụ như
chuyển từ thư mục này sang xem thư mục khác không nhất thiết phải hỏi lại máy chủ (tất
nhiên với điều kiện dữ liệu đã có sẵn)
Bằng cách chỉ nhận những thông tin cần thiết (ở dạng XML), dung lượng truyền tải giữa
máy tính của bạn và máy chủ sẽ giảm đi rất nhiều. Sau khi bạn giao diện đã được tải về 1
lần, Ajax sẽ không cần phải tải lại toàn bộ giao diện đó mỗi khi tương tác với máy chủ.
Thay vào đó, Ajax sẽ gởi yêu cầu đến máy chủ và nhận kết quả từ máy chủ về những gì
đã thay đổi sau khi máy chủ thực hiện yêu cầu đó. Ajax sau đó sẽ thông báo cho phần
giao diện (thông qua các lời gọi Javascript) thực hiện các thay đổi tương ứng trên giao
diện.
Tương tác giữa phần giao diện và Ajax là tương tác nội bộ bên trong trình duyệt, giúp
cho các thay đổi sẽ được thể hiện gần như tức thì.
5. Mô hình sau thể hiện những gì diễn ra giữa Giao diện ứng dụng web - Ajax - và máy chủ:
Để ý là chu kỳ tương tác giữa bạn và Ajax mang tính chất ngẫu nhiên và rất thường xuyên, trong
khi đó các tương tác giữa Ajax và máy chủ xảy ra với một chu kỳ dài hơn nhiều.
Ưu điểm
Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang.
Nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải
cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp trang.
6. Việc dùng các yêu cầu không đồng bộ (asynchronous request) cho phép giao diện người
dùng của ứng dụng hiển thị trên trình duyệt giúp người dùng trải nghiệm sự tương tác
cao, với nhiều phần riêng lẻ.
Việc sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và
các style sheet chỉ phải yêu cầu một lần.
Nhược điểm
Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình
duyệt, do đó nút "back" (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái
trước đó của trang sử dụng Ajax, thay vào đó sẽ quay lại trang web trước đó mà người
dùng ghé thăm.
Việc cập nhật các trang web động cũng gây khó khăn cho người dùng trong việc
bookmark (đánh dấu địa chỉ yêu thích) một trạng thái nào đó của ứng dụng.
Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là
đã bị vô hiệu hóa JavaScript, sẽ đương nhiên không thể sử dụng Ajax. Tương tự, các thiết
bị như điện thoại di động, PDA, và thiết bị đọc màn hình (screen reader) có thể không hỗ
trợ JavaScript hay đối tượng XMLHttp được yêu cầu. Ngoài ra, các thiết bị đọc màn hình
nếu có thể sử dụng Ajax đi nữa cũng vẫn có thể không đọc chính xác các nội dung động.
Mở ra một các thứ khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển
web có thể không kiểm thử hết được.
III. Lập trình Ajax
1.Tạo đối tượng XMLHttpRequest
Trong kỹ thuật Ajax để gửi một HTTP Request đến server bằng JavaScript, ta cần tạo một đối
XMLHttpRequest.
Đối với các trình duyệt IE7+, Firefox, Chrome, Safari, và Opera thì cú pháp như sau :
xmlhttp=new XMLHttpRequest();
Đối với các phiên bản cũ của Internet Explorer (IE5 và IE6) thì sử dụng đối tượng ActiveX với
cú pháp như sau:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Để có thể xử lý trên tất cả trình duyệt ta có cú pháp như sau:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
7. 2. Gửi một Request ðến một Serve
Ðể gửi một request ðến một server ,ta sử dụng phýõng thức open() và send() của
XMLHttpRequest:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Phýõng thức Miêu tả
open(method,url,async) method: có 2 loại request: GET or POST
url: đường dẫn của file trên server
async: true (không đồng bộ) hoặc false
(đồng bộ)
send(data) data là null:nếu method gửi request là GET
data là string:nếu method gửi là POST
2.1 Dùng GET hay POST ?
GET thì đơn giản và nhanh hơn POST và có thể dùng trong hấu hết các trường hợp.Tuy nhiên,
ta dùng POST để gửi Request khi:
Cập nhật một tập tin hoặc cơ sở dữ liệu trên máy chủ
Gửi một lượng lớn dữ liệu đến máy chủ (POST không có giới hạn kích thước)
Gửi những kí tự người dùng nhập vào (có thể chứa các ký tự không rõ), POST là mạnh
mẽ và an toàn hơn so với GET
Nếu muốn gửi thông tin với phýõng thức GET ,ta phải ðýa thông tin vào URL:
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
Để POST dữ liệu như một dạng HTML, pahỉ thêm một HTTP header với setRequestHeader ().
Chỉ định dữ liệu mà bạn muốn gửi trong send ():
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
Chỉ định setRequestHeader(header,value)
header: chỉ định tên header
value: chỉ định giá trị header
8. 2.2 Asynchronous - True or False?
Khi sử dụng async = true, chỉ định một function để thực hiện khi phản hồi đã sẵn sàng trong
sự kiện onreadystatechange.
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Sử dụng async = false là không nên, nhưng đối với một vài yêu cầu nhỏ thì cũng nên được sữ
dụng .
Các JavaScript sẽ không tiếp tục thực hiện, cho đến khi server đã sẵn sàng.
(xmlhttp.readyState==4 && xmlhttp.status==200). Nếu server đang bận hoặc chậm, ứng
dụng sẽ treo hoặc dừng lại.
Lưu ý: Khi bạn sử dụng async = false, không được viết một hàm onreadystatechange - chỉ cần
đặt đoạn code sau method send( ):
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3. Xử lý Server Response
Để lấy response từ server , sử dụng thuộc tính : responseText hoặc responseXML của đối
tượng XMLHttpRequest:
Phýõng thức Miêu tả
responseText lấy dữ liệu response nhý một string
responseXML lấy dữ liệu response nhý dữ liệu XML
3.1 Thuộc tính responseText
Nếu response từ server không là XML , sử dụng thuộc tính responseText .Thuộc tính
responseText trả về dạng chuỗi .
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3.2 Thuộc tính responseXML
9. Nếu response từ server là XML ,và muốn phân tách nó nhý một ðối týợng XML , ta sử dụng
thuộc tính responseXML :
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
4.Thuộc tính onreadystatechange
Thuộc tính onreadystatechange: Sau khi gửi request đến Server, chúng ta cần một
hàm có thể nhận dữ liệu được gửi về từ Server, thuộc tính onreadystatechange sẽ xác
định hàm được gọi lên để xử lý response từ server. Hàm được lưu trong thuộc tính
onreadystatechange sẽ tự động được gọi mỗi khi ReadyState bị thay đổi.
Thuộc tính readyState: Thuộc tính này cho biết trạng thái của đối tượng request:
readyState = 0: request chưa được khởi tạo - The request is not initialized
readyState = 1: request đã được thiết lập - The request has been set up
readyState = 2: request đã được gửi - The request has been sent
readyState = 3: request đang được xử lý - The request is in process
readyState = 4: request hoàn tất - The request is complete
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
5.DemoAjax
Dữ liệu : SinhVien.xml
<DanhSach>
<SinhVien>
