Xây dựng một ứng dụng Ajax cơ bản AJAX pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (123.12 KB, 6 trang )
Xây dựng một ứng dụng Ajax cơ bản
AJAX (Asynchronous JavaScript and XML) - là một kỹ thuật môt tả cách
JavaScript có thể nhận dữ liệu từ server bằng cách xử dụng đối tượng XML
HTTP Request và sau đó chèn dữ liệu nầy vào website dùng DOM. Những tiến
trình nầy được thực hiện đồng thời - tức là chỉ thay đổi thông tin cần được thay
đổi mà không cần phải load lại toàn bộ trang.
Để hiểu cách hoạt động của AJAX, chúng ta sẻ tạo một ứng dụng đơn giản
bằng AJAX.
Đầu tiên, chúng ta tạo một form HTML có 2 text fields: username và time. Ô
username sẻ do người dùng điền vào và ô time sẻ được tự động điền bởi
AJAX.
File HTML sẻ có tên là "testAjax.htm" như sau (chú ý là trong đoạn code sau
đây không hề có nút submit!):
<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
Nguyên tắc cơ bản của AJAX là đối tượng XMLHttpRequest.
Các trình duyệt khác nhau sẻ có các phương thức tạo đối tượng
XMLHttpRequest khác nhau.
Internet Explorer sử dụng ActiveXObject, trong khi các trình duyệt khác sử
dụng một đối tượng JavaScript xây dựng sẵn có tên XMLHttpRequest.
Để tạo đối tượng nầy mà vẫn sử dụng được cho nhiều trình duyệt khác
nhauchúng ta cần sử dụng "try và catch" (hoặc có thể dùng if - else).
Bây giờ hãy cập nhật lại file "testAjax.htm" với đoạn JavaScript dùng tạo ra
đối tượng XMLHttpRequest:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
Giải thích đoạn code trên 1 chút: đầu tiên chúng ta tạo một biến xmlHttp để giữ
đối tượng XMLHttpRequest.
Sau đó tạo đối tượng nầy:
XMLHttp=new XMLHttpRequest().
dĩ nhiên là dành cho e Firefox, Opera, và Safari. Nếu fail thì sẻ xử lý dòng nầy:
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
dành cho Internet Explorer 6.0+, nếu sai thì xử lý dòng nầy:
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
dành cho Internet Explorer 5.5+
Nếu nằm ngoài 3 trường hợp trên sẻ xuất ra thông báo trình duyệt không hỗ trợ
AJAX.
Tiếp theo chúng ta tìm hiểu cách đối tượng XMLHttpRequest giao tiếp với
server.
Đối tượng XMLHttpRequest có 3 thuộc tính quan trọng:
Thuộc tính onreadystatechange
Sau khi gửi request lên server, chúng ta cần có một function làm nhiệm vụ
nhận dữ liệu trả về từ server.
Thuộc tính onreadystatechange có chức năng xử lý response từ server. Code
sau định nghĩa một function (rỗng) và set thuộc tính onreadystatechange tại
cùng thời điểm:
xmlHttp.onreadystatechange=function()
{
// code xử lí
}
Thuộc tính readyState
Thuộc tính readyState lưu giữ trạng thái của response từ server. Mỗi lần
readyState thay đổi thì function onreadystatechange sẻ được thực thi.
Các giá trị của thuộc tính readyState:
Giá trịMô tả 0 Request chưa khởi tạo 1 Request đã được set up 2 Request đã
được gửi 3 Request đang xử lý 4 Request đã hoàn tất
Chúng ta sẻ thêm một đoạn lệnh If vào bên trong function onreadystatechange
để kiểm tra xem resquest đã gửi lên hoàn tất chưa:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Code lấy dữ liệu từ response của server
}
}
Thuộc tính responseText
Dữ liệu trả về từ server có thể nhận bằng thuộc tính responseText.
Đoạn code sau sẻ set giá trị cho ô "time" thông qua thuộc tính responseText:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
Tiếp theo chúng ta sẻ tìm hiểu cách lấy dữ liệu từ server!
Để gửi request lên server, chúng ta dùng 2 phương thức open() và send().
Phương thức open() có 3 đối số. Đối số đầu tiên định nghĩa phương thức sử
dụng để gửi request (GET hoặc POST). Đối số thứ hai chỉ ra địa chỉ URL của
script xử lý phía server. Đối số cuối cùng chỉ ra request cần được xử lý đồng
bộ (asynchronously).
Phương thức send() gửi request tới server. Nếu trang HTML và trang ASP (dĩ
nhiên là bạn có thể dùng ngôn ngữ khác ngoài ASP như JSP hay PHP…) nằm
cùng thư mục thì đoạn code sẻ là:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
Bây giờ chúng ta sẻ quy định thời điểm mà AJAX sẻ được thực thi. Cách thông
thường nhất là dùng phương thức onkeyup, bằng cách nầy khi người dùng gõ
gì đó vào ô username thì function AJAX của chúng ta sẻ được thực thi:
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
Bây giờ hãy cập nhật lại file "testAjax.htm" hoàn chỉnh như sau:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
Tiếp theo chúng ta sẻ hoàn tất ứng dụng AJAX nầy bằng đoạn code xử lý phía
server – file "time.asp".
Thuộc tính responseText sẻ lưu giữ dữ liệu trả về từ server. Để đơn giản chúng
ta sẻ set time = giờ hiện tại:
<%
response.expires=-1
response.write(time)
%>
