Professional Documents
Culture Documents
07 - Xu Ly Nang Cao
07 - Xu Ly Nang Cao
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
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
p ng 2
S dng Yu cu 3 p ng 3 S dng
X l
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
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).
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 } }
L nh Thanh, Bi ging Lp trnh web.
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
17
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
20
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
echo "<?xml version='1.0' encoding=UTF-8'?>; echo "<company>; echo "<compname>$companyname</compname>; echo "</company>;
23
24
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()
V d
$(".test").hide()
Lu
Cn s dng jQuery khi ton b m trang c ti
$(document).ready(function(){
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
L nh Thanh, Bi ging Lp trnh web.
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();/>
L nh Thanh, Bi ging Lp trnh web.
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); />
L nh Thanh, Bi ging Lp trnh web.
c gi tr ca i tng ti liu
$(selector).val()
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>
L nh Thanh, Bi ging Lp trnh web.
V d c gi tr
<script>
$(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); });
V d c thuc tnh
<script>
$(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); });
t gi tr ca i tng ti liu
$(selector).val(new value); $(selector).val(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>
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
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();
X l CSS vi jQuery
Thay i lp CSS
Thm lp CSS c p dng
$(selector).addClass(cssclass);
B lp CSS c s dng
$(selector).removeClass(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>
L nh Thanh, Bi ging Lp trnh web.
X l AJAX vi jQuery
Get, Post, Load
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) {}
L nh Thanh, Bi ging Lp trnh web.
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
L nh Thanh, Bi ging Lp trnh web.
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
L nh Thanh, Bi ging Lp trnh web.
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
L nh Thanh, Bi ging Lp trnh web.
URL1
Lut 2 URL2
Lut cho bit cch sa i URL, c vit theo biu thc chnh quy
Lut i
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
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