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

Chia sẻ: Nguyen Van Nam | Ngày: | Loại File: PDF | Số trang:14

Thêm vào BST

Báo xấu

67
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 1 Lê ðì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 2 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
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 3 Lê ðình Thanh, X lý trang web nâng cao v i AJAX 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 4 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
Web truy n th ng Ajax Web 5 Lê ðình Thanh, X lý trang web nâng cao v i AJAX Ho 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 6 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
Ho 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 7 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 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. 8 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
Web truy n th ng 9 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 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. 10 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
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 . 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 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. 13 Lê ðình Thanh, X lý trang web nâng cao v i AJAX 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 14 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
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, … 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 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. 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 ready Ý nghĩa State Chưa thi t l p yêu c u 0 if(xmlHttp.readyState==4) { ðã thi t l p yêu c u 1 // Da nhan duoc du lieu ðã g i yêu c u 2 tu server } ðang tr l i 3 ðã tr l i xong 4 19 Lê ðình Thanh, X lý trang web nâng cao v i AJAX 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 } 20 Lê ðình Thanh, X lý trang web nâng cao v i AJAX
XMLHttpRequest.responseText N i dung d ng text/html 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/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 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 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 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 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 khi Google làm cho nó tr 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” c a web browser Hi u mô hình ñ i tư ng tài li u DOM S d ng javascript ñ truy c p các ñi u khi n HTML Hi u v c u trúc tài li u XML Hi u v cơ ch truy n thông gi a web server v i ajax engine. 28 Lê ðình Thanh, X lý trang web nâng cao v i AJAX