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ả
Nội dung trích xuất từ tài liệu:
05 Xử lý nâng cao với ajax Bài gi ng L P TRÌNH NG D NG WEB 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 1Lê ðình Thanh, X lý trang web nâng cao v i AJAX Bài 5 X lý trang web nâng cao v i AJAX 2Lê ðình Thanh, X lý trang web nâng cao v i AJAXN 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 3Lê ðình Thanh, X lý trang web nâng cao v i AJAXAJAX 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 4Lê ðình Thanh, X lý trang web nâng cao v i AJAXWeb truy n th ng Ajax Web 5Lê ðình Thanh, X lý trang web nâng cao v i AJAXHo t ñ ng c a web truy n th ng :Web Browser :Web Server Yêu c u 1 T o trang Trang 1 Hi n th trang 1 Yêu c u 2 T o trang m i Trang 2 Hi n th trang 2 Yêu c u 3 T o trang m i Trang 3 Hi n th trang 3 6Lê ðình Thanh, X lý trang web nâng cao v i AJAXHo t ñ ng c a Ajax web :Web Browser :Ajax engine :Web Server Yêu c u 1 T o trang Trang Hi n th trang Yêu c u 2 Yêu c u 2 X lý Data 1 Data 1 S añ i trang Yêu c u 3 Yêu c u 3 X lý Data 2 Data 2 S añ i trang 7Lê ðình Thanh, X lý trang web nâng cao v i AJAXLê ðình Thanh, X lý trang web nâng cao v i AJAXWeb 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. 8Lê ðình Thanh, X lý trang web nâng cao v i AJAXWeb truy n th ng 9Lê ðình Thanh, X lý trang web nâng cao v i AJAXWeb truy n th ng: H n ch• Khi ngư i dùng thao tác thì server “ngh ” và ngư c li – 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. 10Lê ðình Thanh, X lý trang web nâng cao v i AJAXAjax 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 . 11Lê ðình Thanh, X lý trang web nâng cao v i AJAXAjax Web 12Lê ðình Thanh, X lý trang web nâng cao v i AJAXAjax Web: Ưu ñi m• Ngư i ...