Tài liệu AJAX part 17 ppt
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 (173.71 KB, 4 trang )
Bài 15: Đối tượng XMLHttpRequest - Gửi các request.
Bây giờ ta sẽ thảo luận xem cách sử dụng đối tượng XMLHttpRequest. Ở các phần trước
đã đề cập đến cách tạo đối tượng này, bây giờ ta sẽ chỉ ra làm thế nào để gửi request tới
server và xử lí các response từ server.
Request đơn giản nhất là một request mà không chứa một thông tin nào cả, tức là các
form tham số truy vấn hay form gửi dữ liệu là trống. Trong thực tế thì luôn gửi các
request mang thông tin đến server.
Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là:
1. Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách tạo mới
hay truy cập vào một biến có thể hiện của XMLHttpRequest.
2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của
XMLHttpRequest. Ta hoàn thành việc này bằng cách thiết lập thuộc tính
onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript.
3. Gán các thu
ộc tính của request. Phương thức open() của đối tượng XMLHttpRequest
được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ
báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài
nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ.
4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên.
Phương thức send() chấp nhận một tham số, thông thường là một biế
n kiểu string hay
một đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của
request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán
trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request.
Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng
XMLHttpRequest, chỉ ra xem nó cần làm gì khi thay đổi trạ
ng thái, khi nào thì gửi các
request và gửi như thế nào, và cuối cùng là định hướng XMLHttpRequest để truyền
request.
Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào
dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa chỉ
trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham
số qua con trỏ hàm rất linh động và mềm dẻo hay lưu tr
ữ một con trỏ hàm trong một
thuộc tính của lớp.
Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ
tới hàm callback. Hàm callback được gọi khi trạng thái nội tại của đối tượng
XMLHttpRequest thay đổi. Khi một lời gọi bất đồng bộ được tạo ra, request được truyền
đi, và script tiếp tục xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp
tục. Mỗi lần request được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi.
Ví dụ về một Request đơn giản
Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi
tạo một request bất đồng bộ gửi tới server. Server sẽ
đáp ứng bằng cách gửi một file text
đơn giản. Response được hiển thị nội dung trên một cửa sổ alert.
simpleRequest.html
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp
.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with:"
+ xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequ
est();"/>
</form>
</body>
</html>
File response của server, simpleResponse.xml, chứa một dòng text duy nhất. Khi nhấn
vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file
simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình
duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background
(còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response
của server cần vài giây để trả
về, trình duyệt sẽ không thể đáp ứng người dùng trong thời
gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình
duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục
làm việc trong khi server tiếp tục làm việc với request trước trong background.
Khả năng liên lạc với server; không có lỗi ngắt; với luồng làm việc của ng
ười dùng đã
mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như
chứng thực dữ liệu nhập từ người dùng. Khi một người dùng điền vào một trường dữ liệu
trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm
chứng mà không cần ngắt quãng quá trình điền dữ liệ
u vào form nhập. Nếu nhập dữ liệu
không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được
gửi đến server để xử lí, điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu
trên server, nội dung của form sẽ không được nạp lại sau một form đệ trình không thành
công.
Vấn đề bảo mật:
Bất kỳ một công nghệ nào dự
a trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua
vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox”
của trình duyệt.
Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet
Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và
cho phép người dùng sự lựa chọn có tiếp tục vớ
i request đó nữa hay không. Trình duyệt
Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript.
Bài sau chúng ta sẽ cùng nhau thảo luận về: DOM Level 3 và DOM để kết thúc phần:
Đối tượng XMLHttpRequest.
Đồng thời có tổng kết luôn.
ngocha85(Updatesofts.com)
