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 Chương 7: AJAX ThS NGUYỄN CAO HỒNG NGỌC Nội dung Giới thiệu AJAX XMLHttpRequest – Create Object XMLHttpRequest – Request XMLHttpRequest – Response XMLHttpRequest – readyState HTTP Header Link tham khảo thêm Ths Nguy n Cao H ng Ng c Giới thiệu AJAX AJAX = Asynchronous Javascript and XML • AJAX khơng phải ngơn ngữ lập trình mới, cung cấp • • • hướng tiếp cận cho ứng dụng web dựa chuẩn có sẵn Đối với ứng dụng web truyền thống, muốn cập nhật nội dung thông tin trang web bắt buộc trình duyệt phải tải lại tồn trang web gây lãng phí tốn thời gian chờ đợi không cần thiết người dùng AJAX cho phép tạo ta trang web có khả cập nhật lại phần nội dung mà không cần tải lại toàn trang Một số ứng dụng sử dụng AJAX: Google Maps, Gmail, Youtube, Facebook,… Ths Nguy n Cao H ng Ng c Giới thiệu AJAX (tt) AJAX hoạt động nào? • AJAX hoạt động dựa chuẩn Internet, kết hợp kỹ thuật sau: XMLHttpRequest object: trao đổi liệu với server JavaScript/DOM: dùng để hiển thị liệu, tương tác với người dùng CSS: trình bày liệu XML: định dạng liệu cho mục đích truyền liệu Ths Nguy n Cao H ng Ng c Giới thiệu AJAX (tt) AJAX hoạt động nào? (tt) • Với kỹ thuật AJAX liệu truyền browser server ẩn bên browser, có chế độ hoạt động: Đồng bộ: trình duyệt chờ server trả liệu trước lệnh JavaScript thực thi Bất đồng bộ: lệnh JavaScript thực thi sau yêu cầu gửi mà không chờ kết trả từ server Ths Nguy n Cao H ng Ng c Giới thiệu AJAX (tt) AJAX hoạt động nào? Ngu n: http://www.w3schools.com/ajax/ajax_intro.asp Ths Nguy n Cao H ng Ng c XMLHttpRequest – Create Object Trọng tâm kỹ thuật AJAX việc sử dụng đối tượng: XMLHttpRequest để gửi yêu cầu nhận kết trả từ server Hầu hết trình duyệt hỗ trợ đối tượng XMLHttpRequest, riêng IE5 IE6 dùng ActiveXObject Tạo đối tượng XMLHttpRequest: 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"); } Ths Nguy n Cao H ng Ng c XMLHttpRequest – Request open(method,url,async): dùng để xác định phương thức gửi liệu, url việc xử lý liệu đồng hay bất đồng • • • method: phương thức gửi liệu: GET hay POST url: vị trí tập tin server async: true (bất đồng bộ) hay false (đồng bộ) send(string): gửi yêu cầu đến server • string: liệu gửi phần thân thông điệp, dùng với phương thức POST Sau liệu gửi đối tượng nhận thông điệp trả lời từ phía server thơng tin thơng điệp trả lời truy xuất thơng qua thuộc tính đối tượng XMLHttpRequest Ths Nguy n Cao H ng Ng c XMLHttpRequest – Request (tt) xmlhttp.open("GET", "example.php?t="+Math.random(), true); xmlhttp.send(); xmlhttp.open("POST","example.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-formurlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); Ths Nguy n Cao H ng Ng c XMLHttpRequest – Response Để nhận thông điệp trả lời từ server, sử dụng thuộc tính sau đối tượng XMLHttpRequest: • responseText: nội dung (phần thân) thông điệp trả lời • responseXML: chứa XML DOM document thông điệp trả có kiểu nội dung (content type) "text/xml" hay "application/xml" Ths Nguy n Cao H ng Ng c 10 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; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } Let AJAX change this text Change Content Ths Nguy n Cao H ng Ng c 11 XMLHttpRequest – readyState (tt) Mỗi thuộc tính readyState thay đổi giá trị kiện onreadystatechange phát sinh => cho phép viết script kiểm tra giá trị thuộc tính readyState xử lý liệu gửi từ server thuộc tính quan trọng đối tượng XMLHttpRequest • onreadystatechange: chứa hàm (hay tên hàm) gọi • • thuộc tính readyState thay đổi giá trị readyState: xác định trạng thái XMLHttpRequest (xem slide tiếp theo) status: mã trạng thái thông điệp trả lời 200: “OK” 404: Page not found Ths Nguy n Cao H ng Ng c 12 XMLHttpRequest – readyState readyState: xác định giai đoạn chu kỳ request/response kích hoạt, giá trị có thuộc tính này: • 0: chưa khởi tạo Phương thức open() chưa gọi • 1: khởi tạo Phương thức open() thực thi send() • • • chưa gọi 2: gửi Phương thức send() gọi, chưa nhận thông điệp trả lời 3: nhận liệu 4: hoàn tất Đã nhận tất liệu trả từ server Ths Nguy n Cao H ng Ng c 13 HTTP Header setRequestHeader("header", "value") — thêm header field thông điệp yêu cầu đối tượng XMLHttpRequest VD: xhr.setRequestHeader("MyHeader", "MyValue"); getResponseHeader("header") — lấy giá trị header field thông điệp trả lời VD: var headerValue xhr.getResponseHeader("content-type"); getAllResponseHeaders() — hàm trả chuỗi chứa tất header field thông điệp trả lời VD: var allHeaders=xhr.getAllResponseHeaders() Kết câu lệnh biến allHeaders có giá trị chuỗi có định dạng giống 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_poll.asp Ths Nguy n Cao H ng Ng c 15 HẾT Ths Nguy n Cao H ng Ng c 16 ... XML • AJAX khơng phải ngơn ngữ lập trình mới, cung cấp • • • hướng tiếp cận cho ứng dụng web dựa chuẩn có sẵn Đối với ứng dụng web truyền thống, muốn cập nhật nội dung thơng tin trang web bắt... 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... lại tồn trang Một số ứng dụng sử dụng AJAX: Google Maps, Gmail, Youtube, Facebook,… Ths Nguy n Cao H ng Ng c Giới thiệu AJAX (tt) AJAX hoạt động nào? • AJAX hoạt động dựa chuẩn Internet, kết