05 Xử lý nâng cao với ajax

Tham khảo tài liệu ''05 xử lý nâng cao với ajax'', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Bài giảng LẬP TRÌNH ỨNG DỤNG WEB Lê ðình Thanh Bộ mơn Mạng Truyền thơng Máy tính Khoa Cơng nghệ Thông tin Trường ðại học Công nghệ, ðHQGHN Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Bài Xử lý trang web nâng cao với AJAX Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Nội dung • • • • • • AJAX gì? Hoạt động ứng dụng web với Ajax So sánh web truyền thống với Ajax web Các trình duyệt hỗ trợ Ajax Sử dụng Ajax với gửi/nhận text Sử dụng Ajax với gửi/nhận xml Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 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, Xử lý trang web nâng cao với AJAX Web truyền thống Ajax Web Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Hoạt ñộng web truyền thống :Web Browser Yêu cầu Hiển thị trang :Web Server Trang Yêu cầu Trang Hiển thị trang Tạo trang Tạo trang Yêu cầu Trang Hiển thị trang Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Tạo trang Hoạt ñộng Ajax web :Web Browser :Ajax engine Yêu cầu Hiển thị trang Sửa ñổi trang Yêu cầu Trang Tạo trang Data Xử lý Data Xử lý Yêu cầu Data Yêu cầu :Web Server Yêu cầu Data Sửa đổi trang Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Web truyền thống • Yêu cầu người dùng ñược gửi trực tiếp từ browser đến Web server thơng qua HTTP request • Khi nhận ñược 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 u cầu đi, người dùng khơng làm thêm thao tác trang HTML ñược gửi ñến client: yêu cầu phải ñược giải dứt ñiểm trước có yêu cầu = đồng Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Web truyền thống Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 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) • Tồn trang HTML ñược 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 10 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Ajax Web • Ajax engine ñược 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 yêu cầu diễn khơng đồng 11 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Ajax Web 12 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Ajax Web: Ưu điểm • Người dùng server thực cách song hành – Khơng lãng phí thời gian, hiệu sử dụng cao – Người dùng khơng phải vừa làm vừa đợi – Hiển thị liên tục, khơng gây khó chịu (HCI) • Chỉ phần khác biệt trang so với trang cũ ñược gửi từ server đến client – Lượng thơng tin trao ñổi client-server tối thiểu ⇒ tiết kiệm chi phí (thời gian, băng thơng) truyền thơng 13 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Vì dùng Ajax • ðể tạo ứng dụng web – mà giao tiếp với người dùng diễn giao tiếp ứng dụng Winform với người dùng: liên tục – hiệu sử dụng truyền thơng 14 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Lịch sử Ajax • Từ Ajax ơng Jesse James Garrett tạo dùng lần ñầu tiên vào tháng năm 2005 ñể kỹ thuật này, hỗ trợ cho Ajax có chương trình duyệt từ 10 năm trước • Ajax sử dụng rộng rãi Google, Microsoft, Mozila, … 15 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Các trình duyệt hỗ trợ AJAX • • • • • Apple Safari từ 1.2 trở lên Microsoft Internet Explorer từ 4.0 trở lên Mozilla Firefox từ 1.0 trở lên Netscape từ 7.1 trở lên Opera từ 8.0 trở lên 16 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Sử dụng AJAX • Sử dụng đối tượng Javascript XMLHttpRequest ñể gửi yêu cầu ñến server lấy liệu từ server • Sau XmlHttpRequest nhận liệu từ server, sử dụng javascript ñể sửa ñổi trang web client với liệu nhận ñược 17 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Lấy ñối tượng XMLHttpRequest function getXmlHttpObject() { var xmlHttp null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert(“Trinh duyet khong ho tro AJAX!"); } } } return xmlHttp; } 18 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX XMLHttpRequest::readyState if(xmlHttp.readyState==4) { // Da nhan duoc du lieu tu server } ready State Ý nghĩa Chưa thiết lập yêu cầu ðã thiết lập yêu cầu ðã gửi yêu cầu ðang trả lời ðã trả lời xong 19 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX XMLHttpRequest.onreadystatechange Là trỏ hàm khơng đối, kích hoạt thuộc tính readyState thay ñổi xmlHttp.onreadystatechange = tenHamXuly Hoặc xmlHttp.onreadystatechange = function() { //Noi dung xu ly } 20 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX XMLHttpRequest.responseText Nội dung dạng text/html server xử lý yêu cầu 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) 21 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX XMLHttpRequest responseXML.documentElement Nội dung dạng XML server xử lý yêu cầu 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, Xử lý trang web nâng cao với AJAX Gửi yêu cầu server xmlHttp.open(method, url, asynchronous); xmlHttp.send(null); xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); 23 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Server gửi liệu dạng text this.Response.Expires = -1; //Khong de cach int time = 100; this.Response.Write(time); 24 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Nhận xử lý liệu dạng text xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.response Text; } } 25 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Server gửi liệu dạng XML this.Response.Expires = -1; //Khong de cached this.Response.Write("") this.Response.Write("") this.Response.Write("" &rs.fields("companyname")& "") this.Response.Write("") 26 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Nhận xử lý XML function stateChanged() { if (xmlHttp.readyState == 4) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML = xmlDoc.getElementsByTagName("compname")[0].childNodes[0].no deValue; } } 27 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Thực hành kỹ thuật AJAX AJAX ñã ñược sử dụng từ lâu trước Google làm cho trở nên phổ biến Ngày nay, ứng dụng web cao cấp (như trang Google) ñều ñược làm theo kỹ thuật AJAX ðể sử dụng tốt kỹ thuật AJAX Nắm vững nội dung trang web Hiểu rõ vai trị “trình thơng dịch” web browser Hiểu mơ hình đối tượng tài liệu DOM Sử dụng javascript ñể truy cập ñiều khiển HTML Hiểu cấu trúc tài liệu XML Hiểu chế truyền thơng web server với ajax engine 28 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX ... Browser với Ajax engine Ajax engine với Server để thực u cầu diễn khơng ñồng 11 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Ajax Web 12 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Ajax... ðình Thanh, Xử lý trang web nâng cao với AJAX Tạo trang Hoạt ñộng Ajax web :Web Browser :Ajax engine Yêu cầu Hiển thị trang Sửa ñổi trang Yêu cầu Trang Tạo trang Data Xử lý Data Xử lý Yêu cầu... cầu :Web Server Yêu cầu Data Sửa ñổi trang Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Lê ðình Thanh, Xử lý trang web nâng cao với AJAX Web truyền thống • Yêu cầu người dùng ñược gửi trực