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

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 1 Lê ðình Thanh Bộ môn Mạng và Truyền thông Máy tính Khoa Công nghệ Thông tin Trường ðại học Công nghệ, ðHQGHN Bài giảng LẬP TRÌNH ỨNG DỤNG WEB Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 2 Xử lý trang web nâng cao với AJAX Bài 5 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 3 Nội dung • AJAX là gì? • Hoạt ñộng của ứ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 4 AJAX là gì? • AJAX (Asynchronous Javascripts and XML) là một kỹ thuật kết hợp một số công nghệ web ñể xây dựng các ứng dụng web mà tương tác giữa người dùng với ứng dụng ñược thực hiện không ñồng bộ. Các công nghệ bao gồm: – Hiển thị dựa trên chuẩn sử dụng HTML và CSS – Tương tác ñộng sử dụng DOM – Trao ñổi và xử lý dữ liệu sử dụng XML, text – Thu nhận dữ liệu không ñồng bộ sử dụng XMLHttpRequest – Kết hợp các công nghệ sử dụng JavaScript Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 5 Web truyền thống <> Ajax Web Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 6 Hoạt ñộng của web truyền thống :Web Browser :Web Server Yêu cầu 1 Trang 1 Yêu cầu 2 Trang 2 Yêu cầu 3 Trang 3 Tạo trang Tạo trang mới Tạo trang mới Hiển thị trang 1 Hiển thị trang 2 Hiển thị trang 3 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 7 Hoạt ñộng của Ajax web :Web Browser :Web Server Tạo trang Xử lý Xử lý Hiển thị trang Sửa ñổi trang Sửa ñổi trang :Ajax engine Yêu cầu 1 Trang Yêu cầu 2 Yêu cầu 2 Data 1 Data 1 Yêu cầu 3 Yêu cầu 3 Data 2 Data 2 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 8 Web truyền thống • Yêu cầu của 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 ra trang HTML mới, rồi gửi toàn bộ trang HTML (chứa HTML và CSS) mới ñến browser. Browser xóa trang cũ và hiển thị trang mới. • Từ khi gửi yêu cầu ñi, người dùng không ñược làm thêm bất kỳ thao tác gì cho ñến khi trang HTML mới ñược gửi ñến client: mỗi yêu cầu phải ñược giải quyết dứt ñiểm trước khi có yêu cầu tiếp theo = ñồng bộ. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 9 Web truyền thống Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 10 Web truyền thống: Hạn chế • Khi người dùng thao tác thì server “nghỉ” và ngược lại – Lãng phí thời gian, hiệu quả 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 quả → gửi yêu cầu → ñợi → … ⇒ Người dùng phải ñợi lâu nếu yêu cầu xử lý lớn và server mất 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 bộ trang HTML mới ñược gửi từ server ñến client – Không cần thiết vì có thể nhiều chi tiết trên trang mới vẫn như trang cũ – Lượng thông tin trao ñổi giữa client-server lớn ⇒ chi phí truyền thông (thời gian, băng thông) lớn. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 11 Ajax Web • Ajax engine ñược cài trên client, làm nhiệm vụ giao tiếp trung gian giữa browser với web server – Browser gửi yêu cầu ñến Ajax engine bằng lời gọi Javascript. – Ajax engine chuyển yêu cầu của Client thành HTTP request và gửi cho web server – Web server xử lý yêu cầu rồi gửi kết quả cho Ajax engine ở dạng XML – Ajax engine biên dịch XML thành HTML và gửi HTML cho browser • Một yêu cầu của người dùng chưa cần ñược giải quyết xong thì người dùng ñã có thể ñưa ra yêu cầu khác – Trao ñổi giữa Browser với Ajax engine và giữa Ajax engine với Server ñể thực hiện các yêu cầu diễn ra không ñồng bộ. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 12 Ajax Web Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 13 Ajax Web: Ưu ñiểm • Người dùng và server thực hiện một cách song hành – Không lãng phí thời gian, hiệu quả 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 của trang mới so với trang cũ mới ñược gửi từ server ñến client – Lượng thông tin trao ñổi giữa client-server tối thiểu ⇒ tiết kiệm chi phí (thời gian, băng thông) truyền thông. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 14 Vì sao dùng Ajax • ðể tạo ra các ứng dụng web – mà giao tiếp của nó với người dùng diễn ra như giao tiếp của ứng dụng Winform với người dùng: liên tục. – hiệu quả trong sử dụng và trong truyền thông Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 15 Lịch sử Ajax • Từ Ajax ñược ông Jesse James Garrett tạo ra và dùng lần ñầu tiên vào tháng 2 năm 2005 ñể chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax ñã có trên các chương trình duyệt từ 10 năm trước. • Ajax ñang và sẽ ñược sử dụng rộng rãi bởi Google, Microsoft, Mozila, … Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 16 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 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 17 Sử dụng AJAX • Sử dụng ñối tượng Javascript XMLHttpRequest ñể gửi yêu cầu ñến server và lấy dữ liệu về từ server. • Sau khi XmlHttpRequest nhận ñược dữ liệu từ server, sử dụng javascript ñể sửa ñổi trang web trên client với dữ liệu mới nhận ñược. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 18 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; } Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 19 XMLHttpRequest::readyState if(xmlHttp.readyState==4) { // Da nhan duoc du lieu tu server } ready State Ý nghĩa 0 Chưa thiết lập yêu cầu 1 ðã thiết lập yêu cầu 2 ðã gửi yêu cầu 3 ðang trả lời 4 ðã trả lời xong Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 20 XMLHttpRequest.onreadystatechange Là một con trỏ hàm không ñối, ñược kích hoạt mỗi khi thuộc tính readyState thay ñổi. xmlHttp.onreadystatechange = tenHamXuly Hoặc xmlHttp.onreadystatechange = function() { //Noi dung xu ly } [...]... trang web nâng cao v i AJAX G i yêu c u v 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 d 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 và x lý d li u... ðình Thanh, X lý trang web nâng cao v i AJAX Server g i d 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 và x lý XML function... 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 tr lâu trư c khi Google làm cho nó nên ph bi n Ngày nay, nh ng ng d ng web cao c p (như các trang c a 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 m t trang web Hi u rõ vai trò “trình thông d ch” Hi u mô hình... server x lý yêu c u và g i v Mu n s d ng thu c tính này, server ph i thi t l p thu c tính ContentType c a trang là 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 do server x lý yêu c u và g i v Mu n s d ng thu c tính này, server ph i thi t l p thu c tính ContentType c a trang là text/xml 22 Lê ðình Thanh, X lý trang... ng n i dung m t trang web Hi u rõ vai trò “trình thông d ch” Hi u mô hình ñ i tư ng tài S d ng javascript ñ truy c p các Hi u v c u trúc tài li Hi u v cơ ch truy n thông gi a ajax engine Lê ðình Thanh, X lý trang web nâng cao v i AJAX c a web browser li u DOM ñi u khi n HTML u XML web server v i 28 . Thanh, Xử lý trang web nâng cao với AJAX 2 Xử lý trang web nâng cao với AJAX Bài 5 Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 3 Nội dung • AJAX là gì? • Hoạt ñộng của ứng dụng web với Ajax •. 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 4 AJAX là gì? • AJAX (Asynchronous. Browser với Ajax engine và giữa Ajax engine với Server ñể thực hiện các yêu cầu diễn ra không ñồng bộ. Lê ðình Thanh, Xử lý trang web nâng cao với AJAX 12 Ajax Web Lê ðình Thanh, Xử lý trang web nâng