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
<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>
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)
Copyright: Tài liệu đại học ©