KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
BỘ MÔN MẠNG MÁY TÍNH VÀ TRUYỀN THÔNG
LẬP TRÌNH WEB
ThS. NGUYỄN CAO HỒNG NGỌC
Chương 7: AJAX
Nội dung
Giới thiệu về AJAX
XMLHttpRequest – Create Object
XMLHttpRequest – Request
XMLHttpRequest
–
Response
Ths. Nguyễn Cao Hồng Ngọc 2
XMLHttpRequest
–
Response
XMLHttpRequest – readyState
HTTP Header
Link tham khảo thêm
Giới thiệu về AJAX
AJAX = Asynchronous Javascript and XML
• AJAX không phải là một ngôn ngữ lập trình mới, nó cung cấp
một hướng tiếp cận mới cho các ứng dụng web dựa trên các
chuẩn có sẵn.
•
Đối với các ứng dụng web truyền thống, nếu muốn cập nhật
Ths. Nguyễn Cao Hồng Ngọc 3
•
Ths. Nguyễn Cao Hồng Ngọc 5
Giới thiệu về AJAX (tt)
AJAX hoạt động thế nào?
Ths. Nguyễn Cao Hồng Ngọc 6
Nguồn: http://www.w3schools.com/ajax/ajax_intro.asp
XMLHttpRequest – Create Object
Trọng tâm của kỹ thuật AJAX là việc sử dụng đối tượng:
XMLHttpRequest để gửi các yêu cầu và nhận kết quả trả về từ
server
Hầu hết các trình duyệt đều hỗ trợ đối tượng XMLHttpRequest,
riêng IE5 và IE6 dùng ActiveXObject
Tạo một đối tượng XMLHttpRequest:
Ths. Nguyễn Cao Hồng Ngọc 7
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest – Request
open(method,url,async): dùng để xác định phương thức gửi dữ
liệu, url và việc xử lý dữ liệu đồng bộ hay bất đồng bộ
• method: phương thức gửi dữ liệu: GET hay POST
• url: vị trí của tập tin trên server
• async: true (bất đồng bộ) hay false (đồng bộ)
send(
"application/xml"
Ths. Nguyễn Cao Hồng Ngọc 10
<!DOCTYPE html><html><head>
<script>
function
loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.
responseText
;
Ths. Nguyễn Cao Hồng Ngọc 11
document.getElementById("myDiv").innerHTML=xmlhttp.
responseText
;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head><body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="
được thông điệp trả lời
• 3: đang nhận dữ liệu
• 4: hoàn tất. Đã nhận được tất cả dữ liệu trả về từ server
Ths. Nguyễn Cao Hồng Ngọc 13
HTTP Header
setRequestHeader("header", "value") — thêm các header field
trong thông điệp yêu cầu của đối tượng XMLHttpRequest
VD: xhr.setRequestHeader("MyHeader", "MyValue");
getResponseHeader("header") — lấy về giá trị của một header
field trong thông điệp trả lời
VD: var headerValue xhr.getResponseHeader("content-type");
getAllResponseHeaders() — hàm trả về một chuỗi chứa tất cả các
header field trong thông điệp trả lời
VD: var allHeaders=xhr.getAllResponseHeaders()
Kết quả của câu lệnh là biến allHeaders có giá trị là một chuỗi có định dạng
giống như sau:
Ths. Nguyễn Cao Hồng Ngọc 14
Link tham khảo thêm
http://www.w3schools.com/ajax/ajax_aspphp.asp
http://www.w3schools.com/ajax/ajax_database.asp
http://www.w3schools.com/php/php_ajax_database.asp
http://www.w3schools.com/php/php_ajax_livesearch.asp
http://www.w3schools.com/php/php_ajax_livesearch.asp
http://www.w3schools.com/php/php_ajax_poll.asp
Ths. Nguyễn Cao Hồng Ngọc 15
HẾT
Ths. Nguyễn Cao Hồng Ngọc 16
Copyright: Tài liệu đại học ©