Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB Lê Đình Thanh Khoa Công nghệ Thông tin Trường Đại học Công nghệ,

Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB Lê Đình Thanh Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn Mobile: 0987.257.504 Chương Quản lý trang web Javascript (tiếp) Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Nội dung • • AJAX JSON Lê Đình Thanh, Bài giảng Phát triển ứng dụng web AJAX gì? • AJAX (Asynchronous Javascripts and XML) kỹ thuật kết hợp số công nghệ web để xây dựng ứng dụng web mà tương tác người dùng với ứng dụng thực không đồng Các công nghệ bao gồm:      Hiển thị dựa chuẩn sử dụng HTML CSS Tương tác động sử dụng DOM Trao đổi xử lý liệu sử dụng XML, text Thu nhận liệu không đồng sử dụng XMLHttpRequest Kết hợp công nghệ sử dụng JavaScript Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Web truyền thống Ajax Web Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Web truyền thống • Yêu cầu người dùng gửi trực tiếp từ browser đến Web server thơng qua HTTP request • Khi nhận HTTP request, Web server xử lý yêu cầu, sinh trang HTML mới, gửi toàn trang HTML (chứa HTML CSS) đến browser Browser xóa trang cũ hiển thị trang • Từ gửi yêu cầu đi, người dùng không làm thêm thao tác trang HTML gửi đến client: yêu cầu phải giải dứt điểm trước có yêu cầu = đồng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Hoạt động web truyền thống :Web client :Web Server Yêu cầu Đáp ứng Xử lý Sử dụng Yêu cầu Đáp ứng Xử lý Sử dụng Yêu cầu Đáp ứng Xử lý Sử dụng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Web truyền thống: Hạn chế • Khi người dùng thao tác server “nghỉ” ngược lại   Lãng phí thời gian, hiệu sử dụng thấp Người dùng phải vừa làm vừa đợi: gửi yêu cầu  đợi  nhận kết  gửi yêu cầu  đợi  …  Người dùng phải đợi lâu yêu cầu xử lý lớn server nhiều thời gian xử lý + Hiển thị không liên tục, “nhấp nháy” gây khó chịu (! HCI) • Toàn trang HTML gửi từ server đến client   Khơng cần thiết nhiều chi tiết trang trang cũ Lượng thơng tin trao đổi client-server lớn  chi phí truyền thơng (thời gian, băng thơng) lớn Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ajax Web • Ajax engine cài client, làm nhiệm vụ giao tiếp trung gian browser với web server     Browser gửi yêu cầu đến Ajax engine lời gọi Javascript Ajax engine chuyển yêu cầu Client thành HTTP request gửi cho web server Web server xử lý yêu cầu gửi kết cho Ajax engine dạng XML Ajax engine biên dịch XML thành HTML gửi HTML cho browser • Một yêu cầu người dùng chưa cần giải xong người dùng đưa u cầu khác  Trao đổi Browser với Ajax engine Ajax engine với Server để thực u cầu diễn khơng đồng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Hoạt động Ajax web :Web Client :Ajax engine :Web Server Yêu cầu Đáp ứng Yêu cầu Sử dụng Xử lý Yêu cầu Yêu cầu Đáp ứng Đáp ứng Xử lý Đáp ứng Xử lý Yêu cầu Đáp ứng 10 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Gửi yêu cầu lên server theo POST xmlHttp.open(“POST”, url, asynchronous); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(params); Ví dụ: xmlHttp.open(“POST", " time.php", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(“zone=7”); 18 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web XMLHttpRequest.responseText Nội dung dạng text/html server gửi Muốn sử dụng thuộc tính này, server phải thiết lập thuộc tính ContentType trang text/html (mặc định) 19 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Server gửi liệu dạng text $time = 100; echo $time; 20 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Trình duyệt nhận xử lý liệu dạng text xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 && xmlHttp.status==200) { document.write(xmlHttp.responseText); } } 21 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web XMLHttpRequest responseXML Nội dung dạng XML server gửi Muốn sử dụng thuộc tính này, server phải thiết lập thuộc tính ContentType trang text/xml 22 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Server gửi liệu dạng XML echo "