6.1 Ajax là gì ?
– Asynchronous JavaScript and XML
– AJAX là kỹ thuật để tạo ra trang web nhanh và động.
– AJAX cho phép trang web update bất đồng bộ bởi sự thay đổi một số lượng nhỏ của dữ liệu với thơng tin được lấy từ server. Nghĩa là nó có thể upadate một phần trang web mà khơng cần load lại trang.
– Các ứng dụng sử dụng ajax: Google Maps, Gmail, Youtube, and Facebook tabs. 6.2 Ajax hoạt động như thế nào ?
6.3 Ajax sử dụng kết hợp của
a. Đối tương chính của AJAX là XMLHttpRequest.
- Hầu hết các trình duyệt điều hổ trợ đối tượng XMLHttpRequest(IE5 và IE6 sử dụng ActiveXObject)
- Đối tượng XMLHttpRequest đươc sử dụng để request thông tin từ server. - Đẻ tạo đối tương XMLHttpRequest cho các trinh duyệt bạn sử dung doạn code
sau
function loadXMLDoc(url) {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false); xmlhttp.send(null);
} else else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET",url,false);
// Do not send null for ActiveX xmlhttp.send();
}
document.getElementById('test').innerHTML=xmlhttp.responseT ext;
}
b. JavaScript/DOM : Được sử dụng để hiển thị và tương tác dữ liệu. c. XML: Thường sử dụng như là định dạng để truyền dữ liệu.
6.4 Send an AJAX request to a Server
Để gửi request đến server, bạn sử dụng phương thức open() và send() của đối tượng XMLHttpRequest.
Method Description
Open(method,url,async) Chỉ ra kiểu của request, url và chỉ ra request sử dụng bất đồng bộ hay không
Method : là kiểu của POST, GET. URL : vị trí của file trên server. Async : đồng bộ hay không đông bộ
Send(string) Send request đến server
String: chỉ sử dụng cho POST request.
Vd:
a. GET.
xmlhttp.open("GET","demo_get.asp",true) ; xmlhttp.send(); nếu bạn muốn send data cho server. xmlhttp.open("GET","demo_get2.asp? fname=Henry&lname=Ford",true); xmlhttp.send(); b. POST xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
nếu bạn muốn send data cho server.
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.send("fname=Henry&lname=Ford"); 6.5 Update Page With the Response From the Server
- Để lấy nội dung trả lại từ server, bạn sử dựng thuộc tính responseText hoặc responseXml của XMLHttpRequest.
Property Description
responseText Lấy dữ liệu trả lại từ server như là chuổi
responseXML Lấy dữ liệu trả lại từ server như là XML
Vd:
a. Nếu dữ liệu trả lại từ server khơng phải là XML thì bạn sử dụng thuộc tính responseText.
document.getElementById('test').innerHTML=xmlhttp.responseText ;
b. Nếu dữ liệu trả lại là XML thi bạn dùng thc tính responseXML và bạn muốn parse nó ra bạn có thể làm như sau.
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; 6.6 The onreadystatechange Event:
a. The onreadystatechange Event: Khi request được send đến server bạn muốn thực hiện một vai hành thao tác với response.
+ Onreadystatechange là sự kiện được bắt khi readyState thay đổi + ReadyState chứa thuộc tính của XMLHttpRequest.
Property Description
Onreadystatechange Lưu trữ hàm, hàm nầy sẽ được gọi tự động khi trạng thái của readyState thay đổi.
ReadyState Chứa đựng trạng thái của XMLHttpRequest 0: request not initialized