Scribd Logo
Upload

Welcome to Scribd!

  • Tìm hiểu về AJAX

    Uploaded by

    Xoắn Quẩy
    5 views10 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views10 pages

    Tìm hiểu về AJAX

    Uploaded by

    Xoắn Quẩy

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Tm hiu v k thut AJAX

    Xy dng ng dng minh ha bng PHP


    1/19/2010 Cao ng K Thut Cao Thng Dng V Pht

    Tm hiu v AJAX
    Chng 1: Gii thiu v AJAX 1.1 AJAX = Asynchronous JavaScript and XML AJAX khng phi l mt cng ngh mi hay mt ngn ng lp trnh mi, l mt k thut cho php to cc ng dng website tt hn, nhanh hn v c tnh tng tc hn. Vi AJAX, JavaScript c th giao tip trc tip vi Server, bng cch s dng i tng XMLHttpRequest. Vi Object ny, JavaScript c th trao i d liu vi Web Server, m khng phi reload li trang web. AJAX s dng kiu truyn d liu bt ng b (HTTP requests) gia trnh duyt web v web server, cho php trang web c th request mt phn thng tin t Server thay v c trang web. K thut AJAX lm cho cc ng dng Internet nh hn, nhanh hn v thn thin hn vi ngi dng cui. 1.2 AJAX is Based on Web Standards AJAX l k thut da trn cc nn tng Web: JavaScript XML CSS HTML

    Cc nn tng trn u c h tr tt trn nhiu trnh duyt Web khc nhau, nhiu h thng khc nhau do AJAX cng khng l thuc vo trnh duyt web hay h thng no. (The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.) 1.3 AJAX is About Better Internet Applications Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. (ng dng Web c nhiu u im so vi ng dng Desktop, n c th vn n lng ngi s dng rt ln, d dng ci t v h tr, d dng pht trin hn).

    Dng V Pht

    Trang 1

    However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications. (Tuy nhin, ng dng Web li khng nhiu chc nng v khng thn thin vi ngi dng nh cc ng dng Desktop truyn thng). With AJAX, Internet applications can be made richer and more user-friendly. (Vi AJAX, ng dng web c th phong ph hn v thn thin hn) Chng 2: AJAX Http Requests 2.1 AJAX Uses HTTP Requests Vi cch code JavaScript truyn thng, nu bn mun ly bt k thng tin no t database hoc t mt file trn server, hoc mun gi thng tin ngi dng n Server, bn s phi to mt form HTML v gi d liu n Server bng phng thc GET hoc POST. Ngi dng s phi nhp chut vo nt submit gi/nhn thng tin, i phn hi ca server v sau i trang web load li vi cc kt qu c tr v. Bi v server s tr v mt trang web mi mi khi ngi dng submit input nn ng dng web truyn thng c th chy rt chm v c xu hng km thn thin vi ngi dng. Vi AJAX, JavaScript giao tip trc tip vi server, thng qua i tng JavaScript XMLHttpRequest. Vi HTTP Request, mt trang web c th gi request v nhn response t web server m khng phi reloading li trang. Ngi dng vn ti trang hin ti, v h s khng nhn thy mi vic ang din ra pha sau . (Request hoc send data n server u din ra trong background) 2.2 The XMLHttpRequest Object Bng cch s dng i tng XMLHttpRequest, web developer c th cp nht li trang web vi d liu t server sau khi trang web c load! AJAX bt u c ph bin trong nm 2005 m cng u thuc v Google (vi Google Suggest) Google Suggest s dng i tng XMLHttpRequest to create a very dynamic web interface: Khi bn g vo Search box ca Google, mt on JavaScript s gi cc k t m bn g vo server v server s tr v danh sch cc suggestions (cc gi v t kha tm kim da theo nhng g bn g vo Search box). XMLHttpRequest c h tr trong Internet Explorer 5.0+, Safari 1.2, Mozilla Firefox 1.0, Opera 8+ v Netscape 7.

    Dng V Pht

    Trang 2

    Chng 3: AJAX Examples


    3.1 Your First AJAX Application hiu cch AJAX hot ng, chng ta nn bt u vi mt ng dng AJAX nh. u tin, to mt form HTML vi 2 text field, username v time. Field username s c in bi User v field time s c in bi AJAX, t tn file ny l "testAJAX.html" <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Bn c th nhn ra rng on code cho form HTML ny khng h c nt Submit Yu t quyt nh ca AJAX l i tng XMLHttpRequest Cc trnh duyt khc nhau s dng cc phng thc khc nhau khi to i tng XMLHttpRequest: Internet Explorer s dng ActiveXObject trong khi cc trnh duyt khc s dng i tng sn c ca JavaScript gi l XMLHttpRequest. to i tng ny v c th chy trn tru trn nhiu trnh duyt Web khc nhau, chng ta s s dng kt hp cc lnh "Try Catch". Tip theo, thm on code JavaScript di y vo file "testAJAX.html": <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try

    Dng V Pht

    Trang 3

    { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } } </script> C th hn, vi trnh duyt IE5 th khi to i tng XMLHttpRequest bng cch: var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); IE6: var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); Cn vi trnh duyt IE7+, Firefox, Safari, Opera, Chrome var xmlhttp = new XMLHTTPRequest();
    Vy, vi on Try Catch trn th trc ht s khi to xmlhttp = new XMLHTTPRequest();

    Nu tht bi th s khi to xmlhttp = new ActiveXObject("Msxml12.XMLHTTP"); Nu li tht bi th s khi to xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); v cui cng nu tt c cc cch trn u khng c th xut thng bo "Trnh duyt ca bn khng h tr AJAX". Tuy on code trn hi di v phc tp nhng bn c th s dng chng mi khi bn mun khi to mt instance ca i tng XMLHttpRequest, ch vic copy v paste thi. V on code trn c th tng thch vi mi trnh duyt Web hin nay.

    Dng V Pht

    Trang 4

    3.2 AJAX - More About the XMLHttpRequest Object Cc thuc tnh quan trng ca i tng XMLHttpRequest, bn nn nm r chng trc khi xy dng mt ng dng s dng t hp cng ngh AJAX 1. Thuc tnh onreadystatechange: Sau khi gi request n Server, chng ta cn mt hm c th nhn d liu c gi v t Server, thuc tnh onreadystatechange s xc nh hm c gi ln x l response t server. Hm c lu trong thuc tnh onreadystatechange s t ng c gi mi khi ReadyState b thay i. xmlHttp.onreadystatechange=function() { // We are going to write some code here } 2. Thuc tnh readyState: Thuc tnh ny cho bit trng thi ca i tng request: a. readyState = 0: request cha c khi to - The request is not initialized b. readyState = 1: request c thit lp - The request has been set up c. readyState = 2: request c gi - The request has been sent d. readyState = 3: request ang c x l - The request is in process e. readyState = 4: request hon tt - The request is complete xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response // Ly d liu t Server khi server hon tt vic response - tc l ta c th ly c d liu cn ly. } } 3. Thuc tnh responseText: D liu t Server gi v c th c ly ra t thuc tnh responseText. Tr li vi v d "testAJAX.html", chng ta s dng AJAX ly gi tr t Server in vo field "time", vy on code cn thit s l: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } Dng V Pht Trang 5

    4. Thuc tnh responseXML: Thay v tr v response ca server di dng Text nh responseText property, responseXML s tr v mt i tng d liu XML (XML Document) 3.3 AJAX - Request a Server bt u vic gi mt Request n Server, chng ta phi s dng method open() v send(). Method open() cn 3 i s, i s th nht s xc nh phng thc c dng gi Request (GET hay POST), i s th hai xc nh URL ca Server-Side Script s x l Request ny, i s th ba xc nh Request c c x l bt ng b (asynchronously) hay khng? ('true' hoc 'false'). V d: xmlHttp.open("GET","time.php",true); Method send(data) s gi request n Server, nu method gi request l GET th data = null, ngc li, nu method gi request l POST th data s c truyn i. (Phi thit lp li Header ca trang bng method setRequestHeader nh trong v d sau trc khi cn Request bng phng thc POST)
    var url = "get_data.php"; var params = "lorem=ipsum&name=binny"; http.open("POST", url, true); //Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close"); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params);

    Tr li vi v d "testAJAX.html", do form khng c mt button no nn chng ta s tn dng event onkeyup ca field "username", mi khi ngi dng g phm vo field "username" th AJAX s gi request v Server v ly thi gian hin ti ca Server v fill vo field "time": <form name="myForm"> Dng V Pht Trang 6

    Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> Sa li hm ajaxFunction(): <script type="text/javascript"> function ajaxFunction() { var xmlHttp; 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("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.asp",true); Dng V Pht Trang 7

    xmlHttp.send(null); } </script> on code x l bn pha Server, file time.php: <?php echo date("h:i:s"); ?> V Chy th no!

    Dng V Pht

    Trang 8

    Tm thi dng li phn c bn ny, Mnh s cp nht tip, chc chn Theo W3Schools

    Mc lc
    Chng 1: Gii thiu v AJAX ....................................................................................... 1 1.1 AJAX = Asynchronous JavaScript and XML ......................................................... 1 1.2 AJAX is Based on Web Standards ......................................................................... 1 1.3 AJAX is About Better Internet Applications .......................................................... 1 Chng 2: AJAX Http Requests ...................................................................................... 2 2.1 AJAX Uses HTTP Requests .................................................................................. 2 2.2 The XMLHttpRequest Object ................................................................................ 2 Chng 3: AJAX Examples............................................................................................. 3 3.1 Your First AJAX Application ................................................................................ 3 3.2 AJAX - More About the XMLHttpRequest Object ................................................ 5 3.3 AJAX - Request a Server ....................................................................................... 6

    Dng V Pht

    Trang 9

    You might also like