Seminar Ajax PHP

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

Trnh by: Nguyn Thanh Nam AiTi-Aptech Faculty
Ni dung hi tho
Gii thiu v PHP
C php trong PHP
AJAX
Music website using PHP & AJAX
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
lm vic 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.
2.
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
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
C php PHP
Tag style
Start Tag
End Tag
Standard
<?php
?>
Short
<?
?>
ASP
<%
%>
Script tags
<script
</script>
language=ph
p>
* Nn dng kiu Standard
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
C php PHP
Khai bo mng
<?php
$ar = array(3,4,5,6,3,2);
echo var_dump($ar), "<br>";
$ar = array(5=>10, 20, 30, "q"=>40);
$ar = array(5=>10, 6=>20, 7=>30, "q"=>40);
$ar = array("a"=>10, 20, 30, 40);
?>
$ar = array("a"=>array(1,2,3,4,5), 20, 30, 40);

echo var_dump($ar);
C php PHP
Cu lnh IF
<?php
if ($a > $b) {
echo "a is bigger than b";
$b = $a;
}
if ($a
echo
} else
echo
}
> $b) {
"a is bigger than b";
{
"a is NOT bigger than b";
if ($a > $b)

echo "a is
} elseif ($a
echo "a is
} else {
echo "a is
}
?>
{
bigger than b";
== $b) {
equal to b";
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 = 0;
do {
print $i;
} while ($i > 0);
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
?>
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
1. Gii thiu 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
Web 2.0 vi RIA
AJAX
1. Gii thiu 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
AJAX
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
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
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 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
Ajax
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
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.
2.2.
2.3.
2.4.
Khi to i tng Request (XMLHttpRequest XHR)

Vit hm Callback
Gi Request ti Server
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, Gn gi tr header c th
value)
Ajax
Cc thuc tnh ca XMLHttpRequest
Properties
onreadystatechange
Ch nh hm callback
readyState
Trng thi Request : 0-Khi to, 1ang ti, 2- ti, 3-Tng tc, 4Hon 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, 201Created, 400-bad request, 403forbidden, 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
Callback function: l hm javascript c gi khi thuc
tnh readystate thay i trn i tng XHR
S khi ca hm callback dng

function cbHandleAjaxResponse {
//thao tc vi d liu tr v t i tng XHR
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 ?>
Ajax
5. nh dng d liu 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
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
Ajax
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
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
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
Weather Widget
http://demos.openrico.org/weather_demo
Web server
Services
XHR
The
Weather
Channel
Ajax
Weather.com cung cp dch v thi tit
thng qua mt url bao gm parner_key
v license_key
http://xoap.weather.com/weather/local/30
339?cc=*&dayf=5&link=xoap&prod=xoap&
par=[PARTNER_KEY]&key=[LICENSE_KEY]
Services
Web server
XHR
The
Weather
Channel
Ajax
Weather.com response
c nh dng XML
hoc JSON
Web server
Services
The
Weather
Channel
Ajax
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
7. Ajax Toolkits
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
Ajax
7. Ajax Toolkits
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.
Ajax
7. Ajax Toolkits
Prototype Library
$(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
7. Ajax Toolkits
X l Ajax Request/Response n gin
function createRequest(url) {
var xhr = new Ajax.Request(url,{
method:'get',
onComplete: showResponse });
}
function showResponse(xhr) {
$(div).innerHTML = xhr.responseText;
}
Ajax
7. Ajax Toolkits
X l Ajax Request/Response n gin
function createRequest(url) {
var xhr = new Ajax.Request(url,{
method:'get',
onComplete: showResponse });
}
function showResponse(xhr) {
$(div).innerHTML = xhr.responseText;
}
<script src=prototype.js></script>
<script language="javascript">
7. Ajax Toolkits
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
7. Ajax Toolkits
T ng update ni dung
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
Lin kt Web
Ajax in Action (Manning)
http://developer.yahoo.com/
HeadFirst Ajax (HeadFirst)
http://code.google.com/apis/ajax/
Ajax Patterns and Best Practices
http://ajaxpatterns.org/
(Apress)
http://www.ajaxmatters.com/
Lin kt Web
Link mt s th vin ph bin
www.ajaxian.com
http://prototypejs.org
http://www.ajaxlessons.com/
http://jquery.com
http://ajax.phpmagazine.net/
http://ajaxworld.com/
Ni dung hi tho:
http://aptechvn.wordpress.com/
Demo Ajax with Prototype
Hi p !

Seminar Ajax PHP

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

Seminar Ajax PHP

Uploaded by

Copyright:

Available Formats

Ajax

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

Gii thiu v PHP

trnh, m PHP c th truy xut CSDL, to hnh nh, c ghi

Lch s pht trin

Web c nhn (Personal Home Page) bi Rasmus Lerdorf.

Lch s pht trin

bi Zeev Suraski v Andi Gutmans. Phin bn ny cn h tr

nhiu tnh nng bo mt trong PHP. B dch c i tn thnh

Lch s pht trin

echo "Hi, I'm a PHP script!";

PHP pumped out about 47 pages/second

* From PHP HOWTO, July 2001

Operating Systems: UNIX (HP-UX,OpenBSD,Solaris,Linux),

Hn 40 % ng dng Web c vit bng PHP

Hn 20 triu website s dng PHP

Hn 45% cc my ch Apache ci t PHP

T kha PHP tr v kt qu 9.380.000.000 khi tm kim trn Google so

Hu ht cc website ni ting u ang s dng code PHP nh

* Nn dng kiu Standard

C php trong PHP

Bin c tm vc trong hm, trong script

PHP cung cp cc php ton s hc(+, - )

Php ton Error @

$ar = array("a"=>array(1,2,3,4,5), 20, 30, 40);

if ($a > $b)

<?php if ($a == 5): ?>

Lin kt chnh thc

Manual install http://www.expertsrt.com/tutorials/Matt/install-apache.html

Ton b m CT chy trn Desktop

Web 2.0 vi RIA

Adobe Flash/Flex Apps

DOM : hin th ng v tng tc vi cc elements

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,

Ti thiu tn s t ng update gim ti cho server, cung cp link

thc vic s dng Back/Forward button, hoc chia s URL ca user

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

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

Trnh to cc ng dng hon ton bng Ajax

Bc 1: Trigger s kin (JAVASCRIPT)

//gui request toi server

Khi to i tng Request (XMLHttpRequest XHR)

XMLHttp = new ActiveXObject("Microsoft.XMLHTTP);

//Tao XHR theo W3C

//Tao XHR cho IE5.6

Thit lp request object gi mt

Gi request ln server, ni dung c

Tr li tt c response header cho

getResponseHeader(header) Tr li gi tr (string) ca header

D liu t server dng text

D liu t server dng XML

M trng thi HTTP t server cho

Phin bn text ca m trng thi HTTP

XMLHttpRequest nhng cha gi open().

readyState=4: Xong:sau khi server tnh ton xong, d liu gi v

S khi ca hm callback dng

Thit t onreadystatechange ti hm callback

M Request trn i tng XHR

- asynchflag: true (nu gi bt ng b)