You are on page 1of 101

Trung tm o to lp trnh vin quc t AiTi-Aptech

Trnh by: Nguyn Thanh Nam AiTi-Aptech Faculty


PHP Ajax
Gii thiu v PHP
C php trong PHP
AJAX
Music website using PHP & AJAX
Ni dung hi tho
PHP
Gii thiu v PHP
PHP l g ?
M hnh hot ng
Lch s pht trin
L do s dng
Cc con s
PHP l g ?
PHP c pht trin t ngn ng kch bn (script) vi mc ch
xy dng trang Web c nhn (Personal Home Page). Sau
c pht trin thnh mt ngn ng hon chnh v c a
chung trn ton th gii trong vic pht trin cc ng dng Web
based
PHP (PHP: Hypertext Perprocessor) l ngn ng kch bn lp
trnh pha my ch (server-side) ph bin nht th gii
PHP l g ?
PHP thng hot ng theo th t sau:
1. Ngi dng gi yu cu ln my ch
2. My ch x l yu cu (Thng dch m PHP v chy chng
trnh, m PHP c th truy xut CSDL, to hnh nh, c ghi
file, tng tc vi my ch khc...)
3. My ch gi d liu v cho ngi dng (thng l di dng
HTML)
M hnh hot ng
Lch s pht trin
PHP c pht trin nm 1994, bao gm cc macro cho trang
Web c nhn (Personal Home Page) bi Rasmus Lerdorf.
PHP 2 (1995) nng cp thm mt vi chc nng mi hon thin
hn so vi phin bn u tin. (H tr Database, file upload, array,
conditionals, iteration, regular expressions)
Lch s pht trin
PHP 3 (1998) c pht trin vi b dch mi vi tc nhanh
hn v khc phc nhng nhc im trong phin bn trc y
bi Zeev Suraski v Andi Gutmans. Phin bn ny cn h tr
thm ODBC v cc hm lm vic vi giao thc email (SMTP,
IMAP).
PHP 4 (2000) Nng cp b dch hon thin hn vi vic h tr
nhiu tnh nng bo mt trong PHP. B dch c i tn thnh
Zend Engine.
PHP 5 (2004) c nng cp ln Zend Engine II vi kh nng lp
trnh hng i tng.
Lch s pht trin
Tnh n thng 7 nm 2007 PHP c s dng trn 20,917,850
domain vi 1,224,183 IP address.
L do s dng
1. D dng s dng
Code php c nhng ngay trong code HTML. PHP code s c
nm trong mt cp th c bit iu ny gip trnh x l d dng
phn bit code php so vi code HTML.
<html>
<head>
<title>Example</title>
</head>
<body>
<?
echo "Hi, I'm a PHP script!";
?>
</body>
</html>
L do s dng
2. Tc thc thi
Zdnet Statistics
PHP pumped out about 47 pages/second
Microsoft ASP pumped out about 43 pages/second
Allaire ColdFusion pumped out about 29 pages/second
Sun Java JSP pumped out about 13 pages/second
* From PHP HOWTO, July 2001
L do s dng
3. Tnh kh chuyn
PHP c thit k chy trn nhiu nn tng khc nhau, c th
lmvic vi nhiu phn mm my ch, c s d liu (v d: bn
c th pht trin d n trn UNIX, sau chuyn sang NT m
khng gp phi bt c vn g)
Web Servers: Apache, Microsoft IIS, Caudium, Netscape
Enterprise Server
Operating Systems: UNIX (HP-UX,OpenBSD,Solaris,Linux),
Mac OSX, Windows NT/98/2000/XP/2003
Supported Databases: IBM DB2, Informix, InterBase,
FrontBase, Direct MS-SQL, MySQL, ODBC, Oracle
L do s dng
4. Gi thnh cnh tranh
PHP khng ch l phn mm m ngun m m cn thc s min
ph (k c khi bn s dng cho mc ch thng mi). Do l phn
mm m ngun m, cc li (bug) ca PHP c cng khai v
nhanh chng c sa cha bi nhiu chuyn gia do n cng
c min ph.
`
PHP
Software Free
Platform Free (Linux)
Development
Tools
Free
PHP Coder, jEdit
L do s dng
5. PHP c mt cng ng pht trin mnh
6. Thi gian pht trin d n nhanh
Do PHP c mt cng ng ln mnh nn rt nhiu cc ti liu
hng dn, nhng th vin code, thm ch nhng ng dng hon
thin u c cung cp min ph. Nn khi pht trin ng dng
s gim c rt nhiu thi gian.
`
Cc con s
1. S dng PHP
a. Hn 40 % ng dng Web c vit bng PHP
b. Hn 20 triu website s dng PHP
c. Hn 45% cc my ch Apache ci t PHP
2. T kha PHP tr v kt qu 9.380.000.000 khi tm kim trn Google so
vi 2.550.000.000 ca ASP , 634.000.000 ca JSP v 75.800.000 ca
ASP.NET.
3. Hu ht cc website ni ting u ang s dng code PHP nh
Facebook, Wikipedia (MediaWiki), Yahoo!, MyYearbook, Digg,
WordPress v Tagged.
Google trend
C php PHP
Tag style Start Tag End Tag
Standard <?php ?>
Short <? ?>
ASP <% %>
Script tags <script
language=ph
p>
</script>
* Nn dng kiu Standard
C php PHP
C php trong PHP
Ch thch trong PHP
<html>
<head>
<title>This is a PHP program</title>
</head>
<body>
<b>
<?php
// Print Hello world
echo("Hello world");
/* Comment like that is ok*/
# Its acceptable
/**
* API Document
*/
?>
</b>
</body>
</html>
C php PHP
Bin trong PHP
Bin khng bt u bng s, khng c trng tn hm, phn
bit kiu ch
Khng cn khai bo trc
ly gi tr bin dng k hiu $ trc tn bin, bin c th b
p kiu
nh ngha hng dng define
vd: define(pi,3.14);
Bin c tm vc trong hm, trong script
C php PHP
V d:
<?php
$var = Aiti";
$Var = Aptech";
echo "$var, $Var"; // outputs Aiti, //Aptech"
$4site = 'not yet'; //invalid
$_4site = 'not yet'; // valid;
$tyte = 'mansikka'; // valid; '' is //(Extended)
ASCII 228.
?>
C php PHP
Php ton
PHP cung cp cc php ton s hc(+, - )
Cc php ton kt hp (+=, -=)
Php tham chiu &
Php so snh (= =, !=, >, <, >=, <= )
Php ton logic (||, &&, !)
Php ton Error @
C php PHP
Kiu d liu
Scalar : Boolean, Integer, Float, String
Composite : Array, Object
Special Types : Resource, NULL
<?php
$ar = array(3,4,5,6,3,2);
echo var_dump($ar), "<br>";
$ar = array(5=>10, 20, 30, "q"=>40);
echo var_dump($ar), "<br>";
$ar = array(5=>10, 6=>20, 7=>30, "q"=>40);
echo var_dump($ar), "<br>";
$ar = array("a"=>10, 20, 30, 40);
echo var_dump($ar), "<br>";
$ar = array("a"=>array(1,2,3,4,5), 20, 30, 40);
echo var_dump($ar);
?>
C php PHP
Khai bo mng
C php PHP
Cu lnh IF
<?php
if ($a > $b) {
echo "a is bigger than b";
$b = $a;
}
if ($a > $b) {
echo "a is bigger than b";
} else {
echo "a is NOT bigger than b";
}
if ($a > $b) {
echo "a is bigger than b";
} elseif ($a == $b) {
echo "a is equal to b";
} else {
echo "a is smaller than b";
}
?>
<?php if ($a == 5): ?>
A is equal to 5
<?php endif; ?>
C php PHP
Cu lnh SWITCH
<?php
if ($i == 0) {
print "i equals 0";
} elseif ($i == 1) {
print "i equals 1";
} elseif ($i == 2) {
print "i equals 2";
}
switch ($i) {
case 0:
print "i equals 0";
break;
case 1:
print "i equals 1";
break;
case 2:
print "i equals 2";
break;
}
?>
C php PHP
Cu lnh WHILE .. DO
<?php
$i = 1;
while ($i <= 10) {
print $i++;
}
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
$i = 0;
do {
print $i;
} while ($i > 0);
?>
C php PHP
Cu lnh FOR
<?php
echo "--------------------\n";
for ($i = 1; $i <= 10; $i++) {
print "$i\n";
}
echo "--------------------\n";
for ($i = 1; ; $i++) {
if ($i > 10) break;
print "$i\n";
}
echo "--------------------\n";
$i = 1;
for (;;) {
if ($i > 10)break;
print "$i\n";
$i++;
}
echo "--------------------\n";
for ($i = 1; $i <= 10;
print "$i\n", $i++);
echo "--------------------\n";
for ($i = 1; $i<=20; $i++):
print "$i\n";
endfor
?>
C php PHP
Khi bo hm
<?php
function square ($num) {
return $num * $num;
}
echo square (4); // outputs '16'.
function small_numbers() {
return array (0, 1, 2);
}
list ($zero, $one, $two) = small_numbers();
?>
Kt ni CSDL
Kt ni CSDL
if(!($conn =@mysql_connect("localhost","root","root")))
{
die("Could Not Connect");
}
mysql_select_db("music", $conn);
//PERFORM QUERY
$sql = "SELECT * FROM tblX;
$result = mysql_query($sql,$conn);
Ci t PHP
Lin kt chnh thc
Apache http://apache.org/
PHP http://php.net/
MySQL http://mysql.com/
Cc b ci t tch hp
APPSERVER http://www.appservnetwork.com/
EASYPHP http://www.easyphp.org/index.php
XAMPP http://apachefriends.org/
WAMP http://www.wampserver.com/en/
Manual install http://www.expertsrt.com/tutorials/Matt/install-apache.html
Ajax
Ajax I
1. Gii thiu Ajax
2. Kin trc Ajax
3. Ba bc lp trnh vi Ajax
4. Demo v d Ajax & PHP
AJAX
ng dng Desktop
Ton b m CT chy trn Desktop
Tc thc thi/Tnh tng tc cao
Rich Client?
ng dng Web
Click-wait-refresh-Click-wait-refesh
ng dng RPC/RMI
Phc tp, nng n trong x l
nh hng bi Network Latency
1. Gii thiu Ajax
Web 2.0 vi RIA
AJAX
ng dng Rich Internet Application
Adobe Flash/Flex Apps
Microsoft Silverlight Apps
Ajax Applications
u im
Truy cp bt ng b
a dng trong tng tc
C th to cc ng dng phc tp
Gim ti cho server
1. Gii thiu Ajax
Ajax l g ?
o Tn ca th mt nc ?
o Tn ca mt i bng ?
o Ajax l tn ca mt cng ngh ?
AJAX
1. Gii thiu Ajax
AJAX
AJAX = Asynchronous JavaScript And XML : thut ng c
a ra bi Jesse James Garret nm 2005 trong bi vit c tn
AJAX : A New Approach to Web Application [1]
AJAX
AJAX phi c vit chnh xc l Ajax
AJAX : acronym (t vit tt cc ch ci u)
Ajax : tn ca mt t hp cng ngh, trong nhn mnh
A = Asynchronous Tnh bt i xng
Ajax
Ajax
Ajax khng phi l mt ngn ng hay mt cng ngh
Ajax l t hp cc cng ngh gip ng dng Web gn vi
Desktop bng cch loi b s Refresh ca trang web. T hp
gm :
XHTML + CSS : trnh din ni dung
DOM : hin th ng v tng tc vi cc elements
XML + XSLT : nh dng d liu cho trao i, thao tc
XMLHttpRequest : gi v nhn Request
JAVASCRIPT: kt dnh cc thnh phn
u im ca Ajax
Data-driven : gim ti cho server do ch cn chuyn data
Click v Wait nhng khng refresh ging Desktop
Tc response nhanh hn
Ngi dng tip tc lm cc thao tc khc khi i
L cng ngh ca Browser, c lp vi Web Server
JUST-IN-TIME
Ajax
Ajax Job trend
Ajax
Ajax
Kin trc Ajax
Ajax
Kin trc Ajax
Classic web app
Ajax app
Ajax
Ni dung gi qua ng dng web thng thng
Ajax
Ni dung gi qua ng dng web bng Ajax
Ajax
Traffic tch ly
Ajax
Khi no v u s dng Ajax trong ng dng web
Khi cn t ng update nhng loi b Refresh (v d: Bng t s,
chng khon, u gi, d bo thi tit)
Ti thiu tn s t ng update gim ti cho server, cung cp link
refresh d nhn bit cho ngi dng.
thc vic s dng Back/Forward button, hoc chia s URL ca user
Ajax
Khi no v u s dng Ajax trong ng dng web (tip)
Loi b s ph thuc gia thng tin v cc trang web (v d Google
Maps, Ajax pagination), s dng XML v raw Data
Kt hp Ajax vi Traditional HTML h tr ti u ha my tm kim
n gin ha cc thao tc thm, sa, xa, thng bo
Gip ngi s dng nhn bit cc action ang c thc hin (S
dng Ajax indicator image : Loading/Saving/Success .
Trnh to cc ng dng hon ton bng Ajax
Ajax
Ti sao Ajax v PHP?
Javascript v PHP c nhiu im chung.
PHP l nn tng m ngy cng m rng v ph bin
H tr bi cng ng ln (m ngun, ti nguyn,)
Nh nhng (lightweight) v tc (speed) trong x l.
Hot ng c lp, d trin khai trn mi h thng (OS)
H tr nhiu kt ni, thao tc vi nh dng d liu.
Ajax
Ba bc to mt ng dng
Ajax n gin
Ajax
Ba bc to mt ng dng Ajax n gin
Bc 1: Trigger s kin (JAVASCRIPT)
Bc 2: Thao tc vi Ajax (CLIENT-SERVER)
Bc 3: Cp nhp giao din qua DOM (HTML+CSS+JS)
Ajax
Bc 1: Trigger s kin (JAVASCRIPT EVENT)
S kin trong Javascript
onClick onChange onError
onBlur onFocus onUnload
onSubmit onMouseUp onResize
onMouseDown onMouseOver onSelect
onMouseOut onMouseMove onMove
onKeyDown onKeyUp onLoad
onKeyPress onReset onAbort
Ajax
M hnh ng k s kin
//xac dinh HTML element
var element = document.getElementById(element_id);
//dang ky ham dieu khien su kien
element.onclick = executeAjaxSearch;
//dinh nghia ham dieu khien su kien
function executeAjaxSearch(e)
{
//tao connection
//gui request toi server
}
Ajax
Bc 2: Thao tc vi Ajax (CLIENT-SERVER)
2.1. Khi to i tng Request (XMLHttpRequest XHR)
2.2. Vit hm Callback
2.3. Gi Request ti Server
2.4. Nhn v parse d liu tr v.
Ajax
2.1. Khi to i tng Request
Vi IE6: s dng Msxml2.XMLHTTP:
XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
Vi IE5.6: s dng Microsoft.XMLHTTP
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP);
Vi trnh duyt khc: XMLHttpRequest (W3C)
XMLHttp=new XMLHttpRequest();
Ajax
M khi to tng qut
function GetXmlHttpObject {
try {
//Tao XHR theo W3C
}
catch(e) {
try {
//Tao XHR cho IE6
}
catch(e1) {
//Tao XHR cho IE5.6
}
}
return XHR
}
Ajax
Cc phng thc ca XMLHttpRequest
Methods
open(method,url,
asynchFlag,urs,pass)
Thit lp request object gi mt
request ln server
send(content) Gi request ln server, ni dung c
th null
abort() Dng request
getAllResponseHeaders() Tr li tt c response header cho
HTTP request dng key/value
getResponseHeader(header) Tr li gi tr (string) ca header
c th
setRequestHeader(header,
value)
Gn gi tr header c th
Ajax
Cc thuc tnh ca XMLHttpRequest
Properties
onreadystatechange Ch nh hm callback
readyState Trng thi Request : 0-Khi to, 1-
ang ti, 2- ti, 3-Tng tc, 4-
Hon tt
responseText D liu t server dng text
responseXML D liu t server dng XML
status M trng thi HTTP t server cho
request c gi: 200-OK, 201-
Created, 400-bad request, 403-
forbidden, 500-internal server error
statusText Phin bn text ca m trng thi HTTP
Ajax
Chi tit v cc trng thi
readyState=0: Cha khi to: sau khi to i tng
XMLHttpRequest nhng cha gi open().
readyState=1: Va khi to: sau khi gi open() nhng cha gi
send().
readyState=2: Va gi i: ngay sau khi gi send().
readyState=3: ang x l: sau khi kt ni n server nhng server
cha tr li.
readyState=4: Xong:sau khi server tnh ton xong, d liu gi v
Ajax
2.2. Vit hm callback
function cbHandleAjaxResponse {
//thao tc vi d liu tr v t i tng XHR
}
Callback function: l hm javascript c gi khi thuc
tnh readystate thay i trn i tng XHR
S khi ca hm callback dng
Ajax
2.3. Gi Request ln Server
Ly i tng XHTTPRequest
var xhrObj = GetXmlHttpObject();
Thit t onreadystatechange ti hm callback
xhrObj.onreadystatechange = cbHandleAjaxResponse
M Request trn i tng XHR
xhrObj.open(method,url,asynchflag);
- url: lin kt cn kt ni ti
- asynchflag: true (nu gi bt ng b)
Gi Request thng qua i tng XHR
xhrObj.send(content);
Ajax
Chn Method gi Request
Method = GET nu
Mc ch nhn d liu t server
REST (Representational State Transfer) webservices
Khi passing parameters
Cc URL khng thay i
Lng d liu gi l nh
Method = POST nu
Thay i (CUD) trong CSDL
Lng d liu gi ln server ln
Cc URL k c nh
Ajax
2.4. Nhn v parse d liu tr v
function cbHandleAjaxResponse {
if(response is valid) {
//get responseText or resonseXML
//processing data
//get area that need updating
//stuff value to area
}
}
Ajax
Bc 3: Cp nhp DOM
Trnh duyt hin th giao din nh mt tp cc elements
Mt trang web c dng cy vi quan h cha-con
Cy elements c gi l Document Object Model
Mi thay i vi DOM s phn nh ngay trn trnh duyt
Ajax
Mt v d v DOM
Ajax
S dng DOM
Tng tc vi DOM nh Javascript
Tm DOM elements : document.getElementById(),
parentNode, childNodes
Thm element mi : innerHTML, createElement(),
createTextNode(), insertBefore()
Loi b mt element : removeChild()
Thay i thuc tnh element : setAttribute(), style
Ajax
V d s dng DOM
<div id="seminar">
<div id="ajax">Hello Ajax</div>
</div>
<script language="javascript">
var divAjax = document.getElementById("ajax");
var divSeminar =
document.getElementById("seminar");
var divPHP = document.createElement("div");
divPHP.setAttribute("id","php");
divPHP.innerHTML = "Hello PHP";
divSeminar.insertBefore(divPHP,divAjax);
</script>
Ajax
Mt s lu
Tch style, m javascript ra khi ni dung HTML d
truy xut v bo tr hn
To vn bn HTML theo chun XHTML
Vit m markup sch
Demo Ajax Music Search
Ajax II
5. nh dng d liu JSON v XML
6. Xy dng Widget n gin cho Web vi Ajax
7. Ajax Toolkits
8. Vn v thch thc vi ng dng Ajax
9. Gii thiu cc ti nguyn, tham kho.
Ajax
5. nh dng d liu XML
XML l g ?
eXtensible Markup Language
nh dng d liu ph bin nht cho lp trnh
XHTML, Webservices, XML-based Database
X (Ajax) ~ XML v XMLHttpRequest XML
XML lin kt vi Ajax trong mi trng hp ? WRONG !
Thc t : Khng phi bt c ng dng Ajax no cng dng XML
Ajax
5. nh dng d liu XML
XMLHttpRequest thc t ch gi mt HTTP request ti Server, bt k d
liu i cngn l Plain Text, Attribute/Value, XML, hay JSON.
Tuy nhin khng th i tn v c hng triu developer v ng dng s
dng ti i tng ny.
<? xml ?>
<?xml version="1.0" encoding=" utf-8"?>
<bookList>
<book isbn=123">
<title> Ajax in depth</title>
<author>Nicholas Peter</author>
<publisher>Manning</publisher>
</book> <book isbn=456">
<title>Pro PHP </title>
<author>Paul C. Zakas</author>
<publisher>FirstNew</publisher>
</book>
</bookList>
Ajax
5. nh dng d liu XML
Ajax
5. nh dng d liu XML
XML l nh dng chun cho cc dch v Web
XML thc t chm hn khi truyn so vi Plain Text v JSON
Cu trc XML d hiu nhng khng n gin xy dng
Gp phi vn tng thch trnh duyt khi parse vn bn XML
Trong mi trng hp, xem xt s dng Plain Text, Cp Attribute/Value
hoc JSON, sau mi ti XML
Ajax
5. nh dng d liu JSON
JSON Javascript Object Notion JSON.org
nh dng d liu lightweight
Gia trn c php JavaScript (Array v Object literals)
JSON cho php chuyn cc i tng Javascript thnh cc chui c th
gi cng http request.
JSON c h tr bi hu ht cc ngn ng, vi PHP : JSON.php l thnh
phn th vin h tr encode/decode nh dng chui sang PHP Object v
ngc li
Thn thin vi Developer , n nh, c chp nhn rng ri
var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin"},
{ "firstName": "Jason", "lastName":"Hunter},
{ "firstName": "Elliotte", "lastName":"Harold } ],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ]
}
Ajax
5. nh dng d liu JSON
Ajax
5. nh dng d liu JSON
Truy cp v thay i d liu
people.programmers[0].lastName;
people.programmers[0].lastName = Boss;
Chuyn mng thnh String
jsonText = JSON.stringify(people);
Chuyn i tng thnh String
jsonText = JSON.stringify(aperson);
Demo Ajax & XML
www.netvibes.com
Ajax
6. Ajax, Widget, v Webservices
Web 2.0 Web l nn tng gm nhiu dch v (Web-services)
del.icio.us, Finance, flickr, HotJobs,
Maps, Merchant Solutions, Music, Design
Patterns, RSS Feeds, Search, Search
Marketing, Shopping, Travel, Traffic,
upcoming.org, UI library, weather,
webjay,widgets, JS Developer Center, PHP
Developer Center
Maps, Search, Desktop,
Picasa, Sitemaps, Geo, OpenSocial
Adwords, Finance, Calendar,
Authentication, Ajax Search, Ajax
Language, Ajax Feed, Visualization,
O3D, Book, Google Earth, Blogger
Data, Google Base
Ajax
6. Ajax, Widget, v Webservices
Widget : l cc Reusable module, c
tnh c lp cao vi ng dng
Widget cung cp kh nng c nhn
ha cao vi Website
Ajax
6. Ajax, Widget, v Webservices
XHR
The
Weather
Channel
Weather Widget
Web server
Services
http://demos.openrico.org/weather_demo
Ajax
6. Ajax, Widget, v Webservices
XHR
The
Weather
Channel
Web server
Services
http://xoap.weather.com/weather/local/30
339?cc=*&dayf=5&link=xoap&prod=xoap&
par=[PARTNER_KEY]&key=[LICENSE_KEY]
Weather.com cung cp dch v thi tit
thng qua mt url bao gm parner_key
v license_key
Ajax
6. Ajax, Widget, v Webservices
The
Weather
Channel
Web server
Services
Weather.com response
c nh dng XML
hoc JSON
Ajax
6. Ajax, Widget, v Webservices
Demo Ajax &
JSON Web service
Ajax
7. Ajax Toolkits
Thit k v xy dng cc ng dng Ajax vi
Ajax Toolkits
(Frameworks, Libraries)
Ajax
7. Ajax Toolkits
YUI Library
Ajax
u im ca cc th vin Ajax
ng gi sn cc phng thc/i tng
Tng thch trnh duyt (Cross-Browser)
Gim chi ph pht trin cc ng dng RIA
H tr cc hiu ng Javascript (animation, drag n drop)
Thao tc vi DOM d dng
7. Ajax Toolkits
Ajax
Cn xem xt cc yu t khi chn la th vin Ajax
H tr Server-driven hay Client driven
Giy php m - Open Licensing hay $$$
Ti liu h tr, demos
Cng ng pht trin
Mc abstraction hay highlevel
Ngn ng hng ti (C#, PHP, Python, Java)
C kh nng pht trin khng.
7. Ajax Toolkits
Ajax
Prototype Library
7. Ajax Toolkits
$(id_of_element) document.getElementById()
$F() get Value of element
Try.these()
Ajax.request()
Ajax.Updater()
Element.show/hide/toggle/remove
Object-oriented extensions
Ajax
X l Ajax Request/Response n gin
7. Ajax Toolkits
function createRequest(url) {
var xhr = new Ajax.Request(url,{
method:'get',
onComplete: showResponse });
}
function showResponse(xhr) {
$(div).innerHTML = xhr.responseText;
}
Ajax
X l Ajax Request/Response n gin
7. Ajax Toolkits
function createRequest(url) {
var xhr = new Ajax.Request(url,{
method:'get',
onComplete: showResponse });
}
function showResponse(xhr) {
$(div).innerHTML = xhr.responseText;
}
7. Ajax Toolkits
<script src=prototype.js></script>
<script language="javascript">
Event.observe(window, 'load', init, false);
function init() {
Event.observe('btnButton', 'click', makeRequest, false);
}
function makeRequest(){
var xhr = new Ajax.Request("hellop.php",{
method:'get',
onComplete: showResponse,
parameters: {name:$F('txtName')}
});
}
function showResponse(xhr){
$('content').innerHTML = xhr.responseText;
}
</script>
</head>
<body>
<input type="text" id="txtName" />
<input type="button" id="btnButton" value="Send" />
<div id="content"></div>
Ajax
T ng update ni dung
7. Ajax Toolkits
new Ajax.Updater('products', '/some_url', {
method: 'get',
insertion: Insertion.Top
});
new Ajax.PeriodicalUpdater('products',
'/some_url', {
method: 'get',
insertion: Insertion.Top,
frequency: 1,
decay: 2 });
Ajax
8. Vn v thch thc vi ng dng Ajax
Trng thi ng dng Ajax thay i, nhng URL th khng
Lch s trnh duyt, cc dng Navigation (TAB, TREE)
Cc bc trong mt tin trnh
Ngi s dng Confused vi nt Undo
Ti u ha Engine tm kim kh
Bookmark trang web l vn
Kh chia s cc lin kt ang xem hin ti

Ajax
8. Gii thiu cc ti nguyn tham kho
Sch Ajax
Ajax in Action (Manning)
HeadFirst Ajax (HeadFirst)
Ajax Patterns and Best Practices
(Apress)
Lin kt Web
www.ajaxian.com
http://www.ajaxlessons.com/
http://ajax.phpmagazine.net/
http://ajaxworld.com/
Lin kt Web
http://developer.yahoo.com/
http://code.google.com/apis/ajax/
http://ajaxpatterns.org/
http://www.ajaxmatters.com/
Link mt s th vin ph bin
http://prototypejs.org
http://jquery.com
Ni dung hi tho:
http://aptechvn.wordpress.com/
Demo Ajax with Prototype
Hi p !

You might also like