07 - Xu Ly Nang Cao Voi AJAX JQuery

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 6
X l trang web nng cao vi AJAX, jQuery
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 S dng Ajax vi gi/nhn text S dng Ajax vi gi/nhn xml
jQuery
X l s kin HTML Thao tc HTML/DOM Thao tc CSS X l AJAX Hiu ng v hot cnh Cc tin ch
URL Rewriting
3
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
Hot ng ca web truyn thng

:Web Browser Yu cu 1 Trang 1 Hin th trang 1 Yu cu 2 To trang mi To trang :Web Server
Trang 2
Hin th trang 2
Yu cu 3 Trang 3 To trang mi
Hin th trang 3
6
Hot ng ca Ajax web

:Web Browser :Ajax engine :Web Server
Yu cu 1
Trang Hin th trang Yu cu 2 To trang
Yu cu 2 Data 1 X l
Data 1
Sa i trang Yu cu 3 Data 2 Sa i trang
Yu cu 3 Data 2 X l
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.
8
Web truyn thng
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.
10
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.
11
Ajax Web
12
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.
13
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
14
Lch s Ajax
T Ajax c ng Jesse James Garrett to ra v dng ln u tin vo thng 2 nm 2005 ch k thut ny, mc d cc h tr cho Ajax c trn cc chng trnh duyt t 10 nm trc. Ajax ang v s c s dng rng ri bi Google, Microsoft, Mozila,
15
Cc trnh duyt h tr AJAX

Apple Safari t 1.2 tr ln Microsoft Internet Explorer t 4.0 tr ln Mozilla Firefox t 1.0 tr ln Netscape t 7.1 tr ln Opera t 8.0 tr ln
16
S dng AJAX
S dng 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.
17
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; }
18
XMLHttpRequest::readyState
ready State
ngha
Cha thit lp yu cu thit lp yu cu gi yu cu ang tr li tr li xong
if(xmlHttp.readyState==4) { // nhn tr li t server //Dng javascript sa i trang }
0 1 2 3 4
19
XMLHttpRequest.onreadystatechange
L mt con tr hm khng i, c kch hot mi khi thuc tnh readyState thay i. xmlHttp.onreadystatechange = tenHamXuly
Hoc xmlHttp.onreadystatechange = function() { //Noi dung xu ly }
20
XMLHttpRequest.responseText
Ni dung dng text/html do server x l yu cu v gi v. Mun s dng thuc tnh ny, server phi thit lp thuc tnh ContentType ca trang l text/html (mc nh)
21
XMLHttpRequest.
responseXML.documentElement
Ni dung dng XML do server x l yu cu v gi v. Mun s dng thuc tnh ny, server phi thit lp thuc tnh ContentType ca trang l text/xml
22
Gi yu cu v server
xmlHttp.open(method, url, asynchronous); xmlHttp.send(null); V d: xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
23
Server gi d liu dng text
this.Response.Expires = -1; //Khong de cach int time = 100; this.Response.Write(time);
24
Nhn v x l d liu dng text

xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.response Text; } }
25
Server gi d liu dng XML

this.Response.Expires = -1; //Khong de cached this.Response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>") this.Response.Write("<company>") this.Response.Write("<compname>" &rs.fields("companyname")& "</compname>") this.Response.Write("</company>")
26
Nhn 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
Thc hnh k thut AJAX

AJAX c s dng t lu trc khi Google lm cho n tr nn ph bin. 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.
28
jQuery
jQuery
jQuery l th vin javascipt gip cho vic lp trnh javascript tr nn n gin, hiu qu, d dng 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 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... });

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 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(); 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); />
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); } );
Tip theo
Web Service

07 - Xu Ly Nang Cao Voi AJAX JQuery

Uploaded by

Document Information

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 Voi AJAX JQuery

Uploaded by

Copyright:

Available Formats

Bi ging

X l trang web nng cao vi AJAX, jQuery

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.

Hot ng ca web truyn thng

L nh Thanh, Bi ging Lp trnh web.

Hot ng ca Ajax web

Web truyn thng

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.

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.

Cc trnh duyt h tr 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.

if(xmlHttp.readyState==4) { // nhn tr li t server //Dng javascript sa i trang }

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.

xmlHttp.open(method, url, asynchronous); xmlHttp.send(null); V d: xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);

L nh Thanh, Bi ging Lp trnh web.

Server gi d liu dng text

this.Response.Expires = -1; //Khong de cach int time = 100; this.Response.Write(time);

L nh Thanh, Bi ging Lp trnh web.

Nhn v x l d liu dng text

Server gi d liu dng XML

L nh Thanh, Bi ging Lp trnh web.

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.

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... });

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.

L nh Thanh, Bi ging Lp trnh web.