07 - Xu Ly Nang Cao - 1

Bi ging
LP TRNH WEB
L nh Thanh B mn Mng v Truyn thng My tnh Khoa Cng ngh Thng tin Trng i hc Cng ngh, HQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com Mobile: 0987.257.504
Bi 7
X l trang web nng cao
L nh Thanh, Bi ging Lp trnh web.
Ni dung
AJAX
AJAX l g? Hot ng ca ng dng web vi Ajax So snh web truyn thng vi Ajax web Cc trnh duyt h tr Ajax Ajax engine S dng Ajax vi gi/nhn text S dng Ajax vi gi/nhn xml
jQuery
jQuery l g, v sao s dng jQuery? X l s kin HTML Thao tc HTML/DOM Thao tc CSS X l AJAX Hiu ng v hot cnh Cc tin ch Vit li URL l g? Li ch ca vit li URL Thc hnh vit li URL
Vit li URL

AJAX l g?
AJAX (Asynchronous Javascripts and XML) l mt k thut kt hp mt s cng ngh web xy dng cc ng dng web m tng tc gia ngi dng vi ng dng c thc hin khng ng b. Cc cng ngh bao gm:
Hin th da trn chun s dng HTML v CSS Tng tc ng s dng DOM Trao i v x l d liu s dng XML, text Thu nhn d liu khng ng b s dng XMLHttpRequest Kt hp cc cng ngh s dng JavaScript
4
Web truyn thng <> Ajax Web
Web truyn thng

Yu cu ca ngi dng c gi trc tip t browser n Web server thng qua HTTP request Khi nhn c HTTP request, Web server x l{ yu cu, sinh ra trang HTML mi, ri gi ton b trang HTML (cha HTML v CSS) mi n browser. Browser xa trang c v hin th trang mi. T khi gi yu cu i, ngi dng khng c lm thm bt k thao tc g cho n khi trang HTML mi c gi n client: mi yu cu phi c gii quyt dt im trc khi c yu cu tip theo = ng b.
6
Hot ng ca web truyn thng

:Web client Yu cu 1 p ng 1 S dng Yu cu 2 X l X l :Web Server
p ng 2
S dng Yu cu 3 p ng 3 S dng
X l
Web truyn thng: Hn ch

Khi ngi dng thao tc th server ngh v ngc li
Lng ph thi gian, hiu qu s dng thp Ngi dng phi va lm va i: gi yu cu i nhn kt qu gi yu cu i Ngi dng phi i lu nu yu cu x l{ ln v server mt nhiu thi gian x l{ + Hin th khng lin tc, nhp nhy gy kh chu (! HCI).
Ton b trang HTML mi c gi t server n client

Khng cn thit v c th nhiu chi tit trn trang mi vn nh trang c Lng thng tin trao i gia client-server ln chi ph truyn thng (thi gian, bng thng) ln.
8
Ajax Web
Ajax engine c ci trn client, lm nhim v giao tip trung gian gia browser vi web server
Browser gi yu cu n Ajax engine bng li gi Javascript. Ajax engine chuyn yu cu ca Client thnh HTTP request v gi cho web server Web server x l{ yu cu ri gi kt qu cho Ajax engine dng XML Ajax engine bin dch XML thnh HTML v gi HTML cho browser
Mt yu cu ca ngi dng cha cn c gii quyt xong th ngi dng c th a ra yu cu khc

Trao i gia Browser vi Ajax engine v gia Ajax engine vi Server thc hin cc yu cu din ra khng ng b.
Hot ng ca Ajax web

:Web Client :Ajax engine :Web Server
Yu cu 1
p ng 1 Yu cu 2 S dng Yu cu 3 p ng 2 Yu cu 2 p ng 2 Yu cu 3 p ng 3 p ng 3 X l{ X l{ X l
10
Ajax Web: u im
Ngi dng v server thc hin mt cch song hnh
Khng lng ph thi gian, hiu qu s dng cao Ngi dng khng phi va lm va i Hin th lin tc, khng gy kh chu (HCI).
Ch phn khc bit ca trang mi so vi trang c mi c gi t server n client

Lng thng tin trao i gia client-server ti thiu tit kim chi ph (thi gian, bng thng) truyn thng.
11
V sao dng Ajax

to ra cc ng dng web
m giao tip ca n vi ngi dng din ra nh giao tip ca ng dng Winform vi ngi dng: lin tc. hiu qu trong s dng v trong truyn thng
12
S dng AJAX
S dng Ajax Engine (i tng Javascript XMLHttpRequest) gi yu cu n server v ly d liu v t server. Sau khi XmlHttpRequest nhn c d liu t server, s dng javascript sa i trang web trn client vi d liu mi nhn c.
13
Ly i tng 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; }
14
XMLHttpRequest::readyState
if(xmlHttp.readyState==4) { // nhn tr li t server if (xmlHttp.status == 200) { // thc hin thnh cng trn server //Dng javascript sa i trang } }
ready State
ngha
Cha thit lp yu cu thit lp yu cu gi yu cu ang tr li tr li xong
0 1 2 3 4
15
XMLHttpRequest.onreadystatechange
L mt con tr hm khng i, c kch hot mi khi thuc tnh readyState thay i. xmlHttp.onreadystatechange = tenHamXuly; function tenHamXuly() {}
Hoc xmlHttp.onreadystatechange = function() { //Noi dung xu ly }
16
Gi yu cu ln server theo GET

xmlHttp.open(GET, url?params, asynchronous); xmlHttp.send(null);
V d: xmlHttp.open("GET", "time.asp?zone=7", true); xmlHttp.send(null);
17
Gi yu cu ln server theo POST

xmlHttp.open(POST, url, asynchronous); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(params); V d: xmlHttp.open(POST", " time.asp", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(zone=7);
18
XMLHttpRequest.responseText
Ni dung dng text/html do server gi v. Mun s dng thuc tnh ny, server phi thit lp thuc tnh ContentType ca trang l text/html (mc nh)
19
Server gi d liu dng text
$time = 100; echo $time;
20
Trnh duyt nhn v x l d liu dng text

xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 && xmlHttp.status==200) { document.write(xmlHttp.responseText); } }
21
XMLHttpRequest.
responseXML.documentElement
Ni dung dng XML do server gi v. Mun s dng thuc tnh ny, server phi thit lp thuc tnh ContentType ca trang l text/xml
22
Server gi d liu dng XML
echo "<?xml version='1.0' encoding=UTF-8'?>; echo "<company>; echo "<compname>$companyname</compname>; echo "</company>;
23
Trnh duyt nhn v x l XML

xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status=200) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML = xmlDoc.getElementsByTagName("compname")[0].childNodes[0].no deValue; } }
24
Thc hnh k thut AJAX

Ngy nay, nhng ng dng web cao cp (nh cc trang ca Google) u c lm theo k thut AJAX.
s dng tt k thut AJAX

Nm vng ni dung mt trang web
Hiu r vai tr trnh thng dch ca web browser Hiu m hnh i tng ti liu DOM S dng javascript truy cp cc i tng HTML Hiu v cu trc ti liu XML Hiu v c ch truyn thng gia web server vi ajax engine.
25
jQuery
jQuery
jQuery l th vin javascipt gip cho vic lp trnh javascript tr nn n gin, hiu qu hn Cc tnh nng
Thao tc HTML/DOM X l s kin HTML Thao tc CSS X l AJAX Hiu ng v hot cnh Cc tin ch
Ci t jQuery
Download th vin jQuery (tp .js) ti jQuery.com Bao hm tp th vin jQuery trong trang HTML
<script type=text/javascript src="jquery.js"></script>
C php jQuery
jQuery cho php chn cc i tng ti liu ri thc hin hnh ng trn i tng c chn C php: $(selector).action(); jQuery s dng b chn nh CSS
V d
$("#test").hide()
document.getElementById(test).hide();
V d
$("p").hide()
arr = document.getElementsByTagName(p); for (i = 0; i <arr.length; i++) arr[i].hide();
V d
$(".test").hide()
arr = document.getElementsByTagName(*); for (i = 0; i <arr.length; i++) if (arr[i].className == test) arr[i].hide();
Lu
Cn s dng jQuery khi ton b m trang c ti
$(document).ready(function(){
// All jQuery methods go here... });

X l s kin vi jQuery
Kch hot s kin Bt v x l s kin
X l s kin
Kch hot s kin trn i tng ti liu $(selector).eventName(); Bt v x l s kin trn cc i tng ti liu
$(selector).eventName(function(args){ // action goes here!! });
Mouse Events Keyboard Events click keypress dblclick keydown mouseenter keyup mouseleave
Form Events Document/Window Events submit load change resize focus scroll blur unload
V d
X l s kin kch chut trn nt bm
$("#test").click(function () {
alert(hello!);
});
<script type=text/javascript > function dotest() { alert(hello!);} </script> <input type = button id = test onclick = javascript:dotest();/>
V d
Khi ngi dng g enter trn mt nhp th chuyn tm im sang nhp tip theo $("#name").keyup( function(e) { if (e.keyCode ==13) $("#email").focus(); });
<script type=text/javascript > function processKeyup(e) { if (windows.event) e= window.event; if (e.keyCode == 13) document.getElementById(email).focus(); } </script> <input type=text id = name onKeyup = javascript:processKeyup(event); />
Thao tc DOM/HTML vi jQuery

c, thay i thuc tnh Thm, xa i tng
c thuc tnh i tng ti liu

c ni dung vn bn ca i tng ti liu
$(selector).text();
c ni dung HTML ca i tng ti liu

$(selector).html();
c gi tr ca i tng ti liu
$(selector).val()
c gi tr thuc tnh ca i tng ti liu

$selector().attr(att);
V d c text v html
<script>
$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
}); </script> <p id="test">This is some <b>bold</b> text in a paragraph.</p> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button>
V d c gi tr
<script>
$(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); });
</script> <p>Name: <input type="text" id="test" value="Mickey Mouse"></p> <button>Show Value</button>

V d c thuc tnh
<script>
$(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); });
</script> <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Show href Value</button>

t thuc tnh i tng ti liu

t ni dung vn bn ca i tng ti liu
$(selector).text(new text); $(selector).text(function(i, oldText) {return newText});
t ni dung HTML ca i tng ti liu

$(selector).html(new html); $(selector).html(function(i, oldHtml) {return newHtml});
t gi tr ca i tng ti liu
$(selector).val(new value); $(selector).val(function(i, oldValue) {return newValue});
t gi tr thuc tnh ca i tng ti liu

$selector().attr(attr1, new value); $selector().attr({attr1:new value1, attr2:new value2, }); $(selector).attr(attribute, function(i, oldValue) {return newValue});
V d t thuc tnh
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script>
<p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button>
V d t thuc tnh
<script> $(document).ready(function(){ $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); }); }); </script> <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Change href and title</button>
V d t thuc tnh vi hm gi li
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> <p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1">Show Old/New Text</button> <button id="btn2">Show Old/New HTML</button>
Thm i tng con

Thm i tng con vo u (thnh con c)
$(selector).prepend(child1 [, child2, child3, ])
Thm i tng con vo cui (thnh con t)

$(selector).append(child1 [, child2, child3, ])
V d 1
$("p").prepend(" <b>Appended text</b>.", "hello");
V d 2
var txt1="<p>Text.</p>"; // Create element with HTML var txt2=$("<p></p>").text("Text."); // Create with jQuery var txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // Append the new elements
Thm i tng anh/em

Thm nt anh lin trc
$(selector).before(presibling1 [, presibling2, presibling3, ])
Thm i tng con vo cui (thnh con t)

$(selector).after(nextsibling1 [, nextsibling2, nextsibling3, ])
V d 1
$("p").before" <b>Appended text</b>.", "hello");
V d 2
var txt1="<p>Text.</p>"; // Create element with HTML var txt2=$("<p></p>").text("Text."); // Create with jQuery var txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text."; $("p").after(txt1,txt2,txt3); // Append the new elements
Xa i tng
Xa tt c cc i tng con ca i tng c chn
$(selector).empty();
Xa i tng c chn v tt c cc i tng con ca i tng c chn

$(selector).remove();
X l CSS vi jQuery
c v thay i tng thuc tnh CSS

c thuc tnh CSS
$(selector).css("propertyname");
t thuc tnh CSS

$(selector).css({"propertyname":"value","propertyn ame":"value",...});
Thay i lp CSS
Thm lp CSS c p dng
$(selector).addClass(cssclass);
B lp CSS c s dng
$(selector).removeClass(cssclass);
Bt/tt lp CSS c s dng

$(selector).toggleClass(cssclass);
V d thay i lp CSS
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").addClass("important blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style>
<div id="div1">This is some text.</div>
X l AJAX vi jQuery
Get, Post, Load
jQuery AJAX Get

$.get(URL, [callback]); Gi yu cu ln server theo phng thc GET v nhn kt qu v theo AJAX, sau thc hin hm callback
url: a ch tp c yu cu callback: Hm c gi sau khi ti xong. Hm c hai tham s l ni dung, trng thi tr v
V d jQuery AJAX Get

Yu cu ni dung trang "clone.php?v1=100&v2=101 vi cc tham s theo phng thc GET, t ni dung nhn c cho i tng ti liu c nh danh test1.
$.get("clone.php?v1=100&v2=101", function (data, status) { $("#test1").html(data); });
jQuery AJAX Post

$.post(URL, [data], [callback]);
Gi yu cu ln server theo phng thc POST v nhn kt qu v theo AJAX, sau thc hin hm callback
url: a ch tp c yu cu data: Cc cp tham s/gi tr c gi callback: Hm c gi sau khi ti xong. Hm c hai tham s l ni dung, trng thi tr v
V d jQuery AJAX Post

Yu cu ni dung trang "clone.php vi cc tham s v1=10, v2=12 theo phng thc POST, t ni dung nhn c cho i tng ti liu c nh danh test2.
$.post("clone.php", {v1: "10", v2: "12}, function (data, status) { $("#test2").html(data); });
jQuery AJAX Load

$(selector).load(URL, [data], [callback]);
Ti ni dung t URL v t vo i tng c chn (Tng ng gi yu cu ln server theo phng thc GET v nhn kt qu v theo AJAX, sau t kt qu tr v vo innerHTML ca i tng c chn), sau thc hin hm callback
url: a ch tp c yu cu data: Cc cp tham s/gi tr c gi cng url callback: Hm c gi sau khi ti xong. Hm c ba tham s l ni dung, trng thi tr v v i tng XMLHttpRequest thc hin cc cng vic ca hm load
V d jQuery AJAX Load

Ti ni dung tp vn bn text.txt v t vo innerHTML ca i tng c nh danh test3
$("#test3").load("text.txt");
Ti ni dung ti clone.php?v1=8&v2=9 v t vo innerHTML ca i tng c nh danh test4

$("#test4").load("clone.php", {v1: "8", v2: "9 });
V d jQuery AJAX Load

Ti ni dung ti clone.php?v1=8&v2=9 v t vo innerHTML ca i tng c nh danh test5, sau thng bo trng thi
$("#test5").load("clone.php", {v1: "8", v2: "9 }, function(content, statusTxt, xhr) { if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); } );
jQuery ajax
$.ajax(url [, settings ]); Settings:
type: POST/GET/HEAD, data: {Cc cp tham s/gi tr} contentType: Kiu ni dung v m ha c s dng dataType: Kiu d liu mun nhn v t server (xml, json, script, html) success: function (data, status, jqXHR) { }, error: function (jqXHR, status, errorThrown) {}
jQueryUI
jQueryUI (http://jqueryui.com) l m rng ca jQuery cho mc ch lm giao din
Tng tc: Ko th, thay i kch thc, la chn, sp xp, Wiget: autocomplete, menu, spinner, slider, Hiu ng: hin th, hot cnh, t mu,
T hc
Vit li URL
URL rewrite
Vit li URL l g?
Vit li URL (URL Rewrite) l sa i URL do web client yu cu trc khi web server phc v Rewrite Engine thc hin vit li URL
Apache: mod_rewrite
http://www.example.com/Blog/Posts.php?Year=2006&Month=12&Day=19
HTTP Request
http://www.example.com/Blog/2006/12/19/
Web client
Rewrite Engine
Web server
HTTP Response
Ti sao vit li URL?

To lin kt
gn gng, d nh, thn thin vi ngi dng thn thin vi cc search engines
Che c chui truy vn i vi ngi dng Cho site vn s dng c URL khi thay i cng ngh pha di
TRY IT YOURSELF http://www.tienphong.vn/xa-hoi/phong-su/602827/Vuot-thoat-mot-Con-Dao-chinh-minh.html http://www.tienphong.vn/xa-hoi/phong-su/602827/misc.html http://www.tienphong.vn/xa-hoi/phong-su/602827/does-not-matter.html http://www.tienphong.vn/xa-hoi/phong-su/602827/whatever-you-like.html
Vit li URL nh th no?

URL0 (web client yu cu) Rewrite Engine thc hin vit li URL da trn tp lut c cu hnh trc Lut 1
URL1
Lut 2 URL2
Lut cho bit cch sa i URL, c vit theo biu thc chnh quy
URLn-1 Lut n URLn (web server phc v)
Lut vit li URL

URLi
(RewriteCond TestString CondPattern ([c-flags])?)* RewriteRule (!)? Pattern Substitution ([r-flags])? URLi+1 Nu URLi (khng) khp Pattern [Nu mi TestString khp CondPattern] URLi+1 = Substitution
Lut i
Lut vit li URL

Pattern, CondPattern l xu k t c vit theo biu thc chnh quy C php biu thc chnh quy:
. [chars] [^chars] (text) text1|text2 ? * + ^ $ \char Bt kz k t no Bt kz k t no thuc chars Bt kz k t no khc cc k t thuc char Nhm vn bn text1 hoc text2 0 hoc 1 ln xut hin ca vn bn pha trc 0 hoc N ln xut hin ca vn bn pha trc (N > 0) 1 hoc N ln xut hin ca vn bn pha trc (N > 1) Bt u lin kt Kt thc lin kt k t c bit char
Lut vit li URL

TestString, Substitution l xu k t c th cha cc cu trc m rng sau:
$N (0 <= N <= 9) Tham chiu ngc n nhm th N trong Pattern %N (0 <= N <= 9) Tham chiu ngc n nhm th N trong CondPattern lin trc ${mapname:key|default} Gi tr nh x %{NAME_OF_VARIABLE} Bin server
Bin server
HTTP_USER_AGENT HTTP_REFERER HTTP_COOKIE HTTP_FORWARDED HTTP_HOST HTTP_PROXY_CONNECTION HTTP_ACCEP DOCUMENT_ROOT SERVER_ADMIN SERVER_NAME SERVER_ADDR SERVER_PORT SERVER_PROTOCOL SERVER_SOFTWARE API_VERSION THE_REQUEST REQUEST_URI REQUEST_FILENAME IS_SUBREQ HTTPS REMOTE_ADDR REMOTE_HOST REMOTE_PORT REMOTE_USER REMOTE_IDENT REQUEST_METHOD SCRIPT_FILENAME PATH_INFO QUERY_STRING AUTH_TYPE TIME_YEAR TIME_MON TIME_DAY TIME_HOUR TIME_MIN TIME_SEC TIME_WDAY TIME
Hm nh x
RewriteMap MapName MapType:MapSource V d RewriteMap product2id txt:productmap.txt RewriteRule ^/product/(.*)$ /prods.php?id=${product2id:$1|NOTFOUND} [PT]
productmap.txt ## ## Product to ID map file ## television 993 stereo 198 fishingrod 043 basketball 418 telephone 328
Lut vit li URL

c-flags:
nocase| NC ornext | OR Khng phn bit hoa thng khi so snh TestString vi CondPattern Kt hp theo logic OR vi iu kin lin sau. Kt hp logic AND vi iu kin lin sau
Lut vit li URL

r-flags:
nocase| NC chain|C Khng phn bit hoa thng khi so snh To chui lut vi lut tip theo. Nu mt lut khng khp, cc lut pha sau trong chui s b b qua. last|L Dng qu trnh vit li, khng p dng thm cc lut khc next|N Quay v lut th nht forbidden|F Tr v response c m 403 FORBIDDEN gone|G Tr v response c m 410 GONE redirect|R[=code] Chuyn hng skip|S=num B qua num lut tip sau nu lut hin ti khp
Mt s ch th khc
RewriteBase URL-path
Tin t ca URL c dng trong ch th RewriteRule thay th ng dn tng i
RewriteEngine on|off
Bt hoc tt vit li URL
V d
<IfModule mod_rewrite.c>
Options +FollowSymLinks RewriteEngine on RewriteBase /labs/webapp-development/cources/2013spring-int3306-2/ RewriteRule ^std/[A-Za-z\-]+_(.*)\.html$ std/viewStd.php?std_id=$1 [L]
</IfModule>
Tip theo
Web Service

07 - Xu Ly Nang Cao - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

07 - Xu Ly Nang Cao - 1

Uploaded by

Copyright:

Available Formats

Bi ging

X l trang web nng cao

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Web truyn thng <> Ajax Web

L nh Thanh, Bi ging Lp trnh web.

Web truyn thng

Hot ng ca web truyn thng

L nh Thanh, Bi ging Lp trnh web.

Web truyn thng: Hn ch

Ton b trang HTML mi c gi t server n client

Mt yu cu ca ngi dng cha cn c gii quyt xong th ngi dng c th a ra yu cu khc

L nh Thanh, Bi ging Lp trnh web.

Hot ng ca Ajax web

L nh Thanh, Bi ging Lp trnh web.

Ch phn khc bit ca trang mi so vi trang c mi c gi t server n client

V sao dng Ajax

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Gi yu cu ln server theo GET

V d: xmlHttp.open("GET", "time.asp?zone=7", true); xmlHttp.send(null);

L nh Thanh, Bi ging Lp trnh web.

Gi yu cu ln server theo POST

L nh Thanh, Bi ging Lp trnh web.

Server gi d liu dng text

$time = 100; echo $time;

L nh Thanh, Bi ging Lp trnh web.

Trnh duyt nhn v x l d liu dng text

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Server gi d liu dng XML

L nh Thanh, Bi ging Lp trnh web.

Trnh duyt nhn v x l XML

L nh Thanh, Bi ging Lp trnh web.

Thc hnh k thut AJAX

s dng tt k thut AJAX

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

arr = document.getElementsByTagName(p); for (i = 0; i <arr.length; i++) arr[i].hide();

L nh Thanh, Bi ging Lp trnh web.

arr = document.getElementsByTagName(*); for (i = 0; i <arr.length; i++) if (arr[i].className == test) arr[i].hide();

L nh Thanh, Bi ging Lp trnh web.

// All jQuery methods go here... });

L nh Thanh, Bi ging Lp trnh web.

Thao tc DOM/HTML vi jQuery

c thuc tnh i tng ti liu

c ni dung HTML ca i tng ti liu

c gi tr thuc tnh ca i tng ti liu

</script> <p>Name: <input type="text" id="test" value="Mickey Mouse"></p> <button>Show Value</button>

</script> <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Show href Value</button>

t thuc tnh i tng ti liu

t ni dung HTML ca i tng ti liu

t gi tr thuc tnh ca i tng ti liu

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.