Ajax Trong Php

ApLedi idctĩuk:«

W ềytare Lrủdler ip

Trung tâm đào tạo lập trình viên quôc tê AiTi-Aptech

Trình bày: Nguyễn Thanh Nam - AiTi-Aptech Faculty

APTECHC O M P U T E R E D U C A T I O NW W W . aiti-aptech. edu.vn

f í a. lo. lsNội dung hội thảovtan» o i Leadership

Giới thiệu về PHP

Cú pháp trong PHP

AJAX

Music website using PHP & AJAX


facebookVietnam© C y W O R L P

Th£%vớu tó- mữt ft£ờư Ĩ4t*ig

TRANG CHU CAU LAC BO SHOP P1CTURA KINE ALOHA

Mật kháu:

□ Ghi nhd dia chi Email

Ban quen mat khau?

CHUYEN NHA TII365

Facebook helps you connect and share with the people in your life.

Sign UpIt's free and anyone can join

®4ssj quatigtS»!111 ul« lieh .i ll liltS i l i l i VÍÍM1 l> ạ i lu ir I,CM-

îiS&ZJfcr...... A ' .Pằi-- .....A "%

Tbcfl Stax b" vòng 1 tử W/5 (tấn Z4 h ngi

vảng lỡh sóng ngậy 14/4 Mến 2 íh ngia tea page for a celebrity, band or business, click hi

G et Y ahoo! T o o lb a r w ith An ti-S py

' ÿ X H o O fWeb Images Video Local Shopping more ■

See th e la te s t e n v iro n m e n ta lly fr ie n d ly

S e a r c h : L Web Search

I main page | discussion | | view source | | history |

W elcom e to W ikipedia,the free encyclopedia that anyone can edit.

2,358,644 articles in English

Overview • Editing ■ Questions ■ Help

digg Join Digg About Login

A pr 28,2009 I Page Optif

Sports I Video

Technology v World & Business v Science r Gaming v Lifestyle v Entertainment v Sports v Offbeat ■*

ne flu: 5 things to knowworld may be on the brink of the first inza pandemic in more than 403. » A re w e re a d y fo r i t ?

i t p a n d e m ic s • F lu b a s ic s

S ta t is t ic s

r T v ' s ta i

Hi id 085 S g i

M ail ( ^ ) M e s s e n g e r Puz;

- W e a th e r8 3 ° F

Popular Upcoming SETA News Videos Images ộ Customize

Yahoo! S po rts s h o pYour S ource for Final F our g e a r

¡1,000 factory

News, Images, Videos I op In 24 Hr 7 Days 30 Days 365 Days

f t Q i Digg Dialogg with Sir Richard Branson!I I L Submit your questions for our next Digg Dialogg w ith Virgin Group founder Sir Richard Branson, presented by Freecreditreport ci

How Swine Flu Spreads from Pigs to Humansimage — grow a train .typepas.com (Pets & Animals: mafle popular 14mln ago

5SComments Share Bury 4 * I msaleem submitted

R unn ing W indow s 7 RC on a ne tbook

GA M E OF Tl

UFT

IN STORE THli

M U ) W o k d P r e s s .

J8___ SẾr VWdPr&ss.can B''S: Q

COMHome SignUp Features Blog Our Story Advanced

diggs wo9s.computerwona.com— How does Microsoft's latest Windows 7 leak. Build 7100 run on a netbook, the Dell Mini 9 in specific? Here's y what I found. More,.. fMicrowHR

digg 22 Comments Share Bury sjvn made popular 14min ago 3558 ¡ U I The Me

2 1 4diggs

digg

Prometheus Creating Saturn Ring StreamersIMAGE — apod.nasa.gov (Space) made popular 24mm ago

10Comments Share Bury louiebaursubmitted

Express yourself. Start a blog. 1 Sign Up NowlSee our fr ee features —* 1

173,004 BLOGGERS. 184,512 MEW POSTS. 46 ,78 7,330 WORDS TODAY. Preferred Language: English

Wordpress .com is also available in TlÎ "9Ÿl4'-

Viral Flu: Earth’s Oldest Trojan Horse-invaders

EASY READING CULTURE OF LIFE NEWS: VIRAL FLU: EARTH'S OLDEST TROJAN HORSE-INVADERS « Culture of Ufa News 2 Viruses are one of the Elder Earth Life Forms. They use us as their Trojan Horses to invade new territory. I was one [...]

Culture o f Life W£ws

100

} ß ,vt'ars iẨ Leadership

• PHP là gì?

• Mô hình hoạt động

• Lịch sử phát triển

• Lý do sử dụng

• Các con số

PHP là gì ?

• PHP được phát triển từ ngôn ngữ kịch bản (script) với mục đích

xây dựng trang Web cá nhân (Personal Home Page). Sau đó đã

được phát triên thành một ngôn ngữ hoàn chỉnh và được ưa

chuộng trên toàn thế giớ i trong việc phát triển các ứng dụng Web

based

• PHP (PHP: Hypertext Perprocessor) là ngôn ngữ kịch bản lập

trình phía máy chủ (server-side) phổ biến nhất thế giớ i

C O M P U T E R E D U C A T I O Nwww. aiti-aptech. edu.vn

APTECHTM

year* ÜÍ Leadership

• PHP thường hoạt động theo thứ tự sau:

1. Người dùng gửi yêu cầu lên máy chủ

2. M áy chủ xử lý yêu cầu (Thông dịch mã PHP và chạy chương

trình, mã PHP có thể truy xuất CSDL, tạo hình ảnh, đọc ghi

file , tương tác với máy chủ khác...)

3. M áy chủ gửi dữ liệu về cho người dùng (thường là dưới dạng

H TM L)

ApLeth Lckbu tc j

irk M ộ h ìn h \ \c \ ĩ \ i đ n n ơ'Dĩa r tmw.CTaropkiDiTT,

pteửĩeỉenrt m e/ca to ỉù ọ M m l

Your desktop PC

Internet

Ả4*'«s • tì tip ://v w flxampli jMfli /oatj k>g/yjk.php

Wçb Server

wwv/.exampl&cûm Web Server

Aplech

^ Lịch sử phát triểnyean» o i Leadership

• PHP được phát triển năm 1994, bao gồm các macro cho trang

Web cá nhân (Personal Home Page) bởi Rasmus Lerdorf.

• PHP 2 (1995) nâng cấp thêm một vài chức năng mới hoàn thiện

hơn so với phiên bản đầu tiên. (Hỗ trợ Database, file upload, array,

conditionals, iteration, regular expressions...)

C O M P U T E R E D U C A T I O NW W W . aiti-aptech. edu.vn

APTECHTM

Apte ih

^ Lịch sử phát triểnyean o i Leadership

• PHP 3 (1998) được phát triển với bộ dịch mới với tốc độ nhanh

hơn và khắc phục những nhược điểm trong phiên bản trước đây

bởi Zeev Suraski và A ndi Gutmans. Phiên bản này còn hỗ trợ

thêm ODBC và các hàm làm việc với giao thức email (SMTP,

IM AP).

• PHP 4 (2000) Nâng cấp bộ dịch hoàn thiện hơn với việc hỗ trợ

nhiều tính năng bảo mật trong PHP. Bộ dịch được đổi tên thành

Zend Engine.

É • PHP 5 (2004) được nâng cấp lên Zend Engine II với khả năng lập

tồ ì^ ^ ró n g đối tượng. APTECHC O M P U T E R E D U C A T I O NW W W . aiti-aptech .eơu.vn

A p lrd l t,ctebrJt£ỉ

ị ( * Lịch sử phát triểnvtan» o i Lcadcrship

Tính đến tháng 7 năm 2007 PHP đã được sử dụng trên 20,917,850 domain với 1,224,183 IP address.

PHP Usage for Jul 2007

APTECHC O M P U T E R E D U C A T I O Nwww. aiti-aptech. eơu.vn

Lý do sử dụng1. Dễ dàng sử dụng

Code php được nhúng ngay trong code H TM L. PHP code sẽ được nằm trong một cặp thẻ đặc biệt điều này giúp trình xử lý dễ dàng phân biệt code php so với code H TM L.

<html><head>

<title>Example</title></head><body>

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


APTECHTM

Lý do sử dụng2. Tốc đô thưc thi

• •

Zdnet Statistics

s PHP pumped out about 47 pages/second

s M icrosoft ASP pumped out about 43 pages/second

s A lla ire ColdFusion pumped out about 29 pages/second

s Sun Java JSP pumped out about 13 pages/second

* T7---------- T ÌT T T Ì J u l y 2 0 0 1


APTECHTM

ApLech L ïkbrjtes

Lý do sử dụng3 Tmh khả chuỵển

PHP được th iế t kế để chạy trên nhiều nền tảng khác nhau, có thể làm việc với nhiều phần mềm máy chủ, cơ sở dữ liệu (v í dụ: bạn có thể phát triển dự án trên U N IX , sau đó chuyển sang NT mà không gặp phải bất cứ vấn đề gì)

Web Servers: Apache, M icrosoft ns, Caudium, Netscape Enterprise Server

Operating Systems: U N IX (HP-UX,OpenBSD,Solaris,Linux),Mac O Sx7 Windows NT/98/2000/XP/2003

Supported Databases: IB M DB2, In form ix, InterBase, rontBase, D irect MS-SQL, MySQL, ODBC, Oracle ...

APTECHC O M P U T E R E D U C A T I O NW W W . aiti-aptech edu.vn

Lý do sử dụng

4. Giá thành cạnh tranhPHP không chỉ là phần mềm mã nguồn mở mà còn thực sự miễn phí (kể cả kh i bạn sử dụng cho mục đích thương m ại). Do là phần mềm mã nguồn mở, các lỗ i (bug) của PHP được công khai và nhanh chóng được sửa chữa bởi nhiều chuyên gia do đó nó cũng được miễn phí.

PHPSoftware Free

Platform Free (Linux)

PHP Coder, ¡Edit


APTECHTM

vean» oẩ Ltadcrship

5. PHP có một cộng đồng phát triển mạnh

6. Thời gian phát triển dự án nhanhDo PHP có một cộng đồng lớn mạnh nên rất nhiều các tà i liệu hướng dẫn, những thư viên code, thậm chí những ứng dụng hoàn thiện đều được cung cấp miễn phí. Nên kh i phát triển ứng dụng sẽ giảm được rất nhiều thời gian.

”î “ *» g P H P

a. Hơn 40 % ứng dụng Web được viết bằng PHP

b. Hơn 20 triệu website sử dụng PHP

c. Hơn 45% các máy chủ Apache cài đặt PHP

2. Từ khóa PHP trả về kết quả 9.380.000.000 khi tìm kiếm trên Google so

với 2.550.000.000 của ASP , 634.000.000 của JSP và 75.800.000 của

ASP.NET.

3. Hầu hết các website nổi tiếng đều đang sử dụng code PHP như

Facebook, Wikipedia (MediaWiki), Yahoo!, My Yearbook, Digg,

WordPress và Tagged.

yean» o i Leadership Google trendphp i.3o jsp ■ o 13 asp ^ 3 .2 8 asp.net “ • 3 2v

Apr 20QÔ JUI20Û8 Oci 200«—I— —I— “ p —i— —I— —r - —I— —I— —i-1 —I— I

News reference volume

Cú pháp PHP

ApLech L ïk b t jtc i

f / | r wyean. iẨ Leadership

Tag style Start Tag End TagStandard <?php ?>

Short <? ?>

ASP <% %>

Script tags cscriptlanguage=“php”>

</script>

* Nên dùng kiểu standard


Cu phap trong PHP•.tan. ud Leadership

Chu thich 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*/# It's acceptable/ * *

* API Document * /

? ></b></body></html>

years oẩ Lrjd rrvh ip

Biến trong PHPs B iến không bắt đầu bằng số, không được trùng tên hàm, phân

b iệ t k iểu chữ

S Không cần kha i báo trước

s Để lấ y g iá tr ị b iến dùng k ý h iệu $ trước tên b iến, b iến có thể b ị ép k iểu

s Đ ịn h nghĩa hằng dùng define

vd: de fine (“ p i” ,3 .14);

S B iến có tầm vực trong hàm, trong scrip t

1 Q•itari o J Lrjidkrrdisip

ApLedi Lclcbrales

Vi du:<?php$var = "Aiti";$Var = "Aptech";echo "$var, $Var"; // outputs "Aiti, //Aptech"$4site = 'not yet1; //invalid $_4site = 'not yet1; // valid;$tayte = 'mansikka1; // valid; 'a' is //(Extended) ASCII 228.? >

Cu phap PHP

vears oẩ Ltadcrship

Phép toán

s PHP cung cấp các phép toán số học(+, - ...) s Các phép toán kết họp (+=, -=)

s Phép tham chiếu &S Phép so sánh (= =, !=, >, <, >=, < = . . . )

S Phép toán logic (II, & & , !)S Phép toán Error “@”

ApLech (.ctebnltes

t Cu phap PHPvtan. oJ Leadership

Kieu dir lieu

S Scalar : Boolean, Integer, Float, String

S Composite : Array, Object

S Special Types : Resource, NULL

CuphapPHPvtarh ud Lrjidkrr ship

Khai bao mang

ApLeth LdcbuL^

<?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);

?>

11 j, ' iU L I 1 U UIM.fl

& Cu phap PHPMtars id Leadership

<?phpif ($a > $b)echo "a is$b = $a;}if ($a > $b)echo "a is} else {echo "a is}if ($a > $b)echo "a is} elseif ($aecho "a is} else {echo "a is}? >

Cau lenh IF<?php if ($a == 5): ?>A is equal to 5 <?php endif; ?>

Cu phap PHPC4u lenh SWITCH

<?php if ($i == 0) {print 11 i equals 0";} elseif ($i == 1) {print "i equals 1";} elseif ($i ==2) {print 11 i equals 2";}switch ($i) {case 0:print 11 i equals 0"; break; case 1:print 11 i equals 1"; break; case 2:print "i equals 2"; break;}? >

ApLcđi celebrates

ịMtars id L rjiJerd isip

Cú pháp PHP

<?php $ i = 1 ;while ($i <= 10) print $i++;}

$ i — 1 •while ($i <= 10): print $i;

$i++; endwhile;

Câu lệnh WHILE .. DO

$i = 0; do {

print $i;} while ($i > 0);

? >

7<"J CúphápPHPytarh od L ta ílcrsh ip

Câu lệnh FOR<?php echo "--------------------\n" ;echo "------------------- \n" ; $i = 1;for ($i =1; $i <= 10; $i++) { for (;;) {print "$i\n"; if ($i > 10)break;

} print "$i\n";$i++;echo "------------------- \n" ; }

for ($i =1; ; $i++) {if ($i > 10) break; echo "--------------------\n" ;print "$i\n"; for ($i =1; $i <= 10;

} print "$i\n", $i++);echo "------------------ \n" ;for ($i = 1; $i<=20; $i++): print M$i\nM;

endfor ?>

ApLedl LdébuLẽỉ.

/< 2 CuphapPHPvtan. ud Lrjidkrr Jsip

Khai bao ham

<?phpfunction square ($num) {

return $num * $num;}echo square (4); // outputs '16'.

function small_numbers() {return array (0, 1, 2);

} list ($zero, $one, $two) = small numbers();

/ < £ ^ K6t n6i CSDLvtan. od Leadership

ApLeth id '. 'b u k :

Ket noi 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);

Aplrdl ccfcbfiiles

ị PHPvtfan» o i Leadership

Liên kết chính thức

Apache http://apache.org/

PHP http://php.neư

MySQL http://mysql.com/

Các bộ cài đặt tích họp

APPSERVER http ://www. appservnetwork.com/

EAS YPHP http ://www. eas vphp. or g/index .php

XAMPP http://apachefiiends.org/

WAMP http://www.wampserver.com/en/

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

APTECHC O M P U T E R E D U C A T I O Nw w w . a i t i - a p t e c h . e ơ u . v n

http://apache.org/

http://php.ne%c6%b0

http://mysql.com/

http://apachefiiends.org/

http://www.wampserver.com/en/

http://www.expertsrt.com/tutorials/Mat%c6%b0install-apache.html

APTECHC O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n

1. Giới thiệu Ajax

2. Kiến trúc Ajax

3. Ba bước lập trình với Ajax

4. Demo ví dụ Ajax & PHP

years ư í Leadership

Aplrdl ccfcbfiilES

ị &vtían» o i Leadership

AJAX1. Giói thiệu Ajax

❖ ứng dụng Desktop

s Toàn bộ mã CT chạy trên Desktop

s Tốc độ thực thi/Tính tương tác cao

s Rich Client?

❖ ứng dụng Web

'S Click-wait-refresh-Click-wait-refesh

❖ ứng dụng RPC/RMI

'S Phức tạp, nặng nề trong xử lý

'S Ảnh hưởng bởi Network Latency

®Go

1Vvean. irf Leadership

A p lrih L ck b u tcs

Fx

vodRIA

'W

Silverlight•M

Y .. O p e n L a s z l o

\ \Desktop Web

Applications Applications

-

RIA

CommunicationTechnologies

APTECHC O M P U T E R E D U C A T I O Nw w w . a i t i - a p t e c h . e d u . v n

Aplrdl ccfcbfiiles

ịvtan. o i Leadership

AJAX1. Giói thiệu Ajax

❖ ứng dụng Rich Internet Application

'S Adobe Flash/Flex Apps

'S Microsoft Silverlight Apps

'S Ajax Applications

❖ ư u điểm

'S Truy cập bất đồng bộ

'S Đa dạng trong tương tác

'S Có thể tạo các ứng dụng phức tạp

'S Giảm tải cho server ...

[email protected] I New features I Docs Home I Helc

mailto:[email protected]

/< 2 ^ a j a x' ^ 1. Giới thiệu Ajax

Ajax là gì ?

o Tên của thủ đô môt nước ?

o Tên của một đội bóng ?

o Ajax là tên của một công nghệ ?

A p L eth L c k b u tc s

Ỉ 9vtan. o i Leadership

• AJAX = Asynchronous JavaScript And X M L : thuật ngữ được

đưa ra bởi Jesse James Garret năm 2005 trong bài viết có tên

AJAX : A New Approach to Web Application [1]

APTECHC O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n

AJAX

Aplrdl (.ctebnltes

ị & i P Xvtan» o i Leadership

AJAX phải được viết chính xác là Ajax

• AJAX : acronym (tò viết tắt các chữ cái đầu)

• Ajax : tên của một tổ họp công nghệ, trong đó nhấn mạnh

A = Asynchronous - Tính bất đối xứng

Ajax

• Ajax không phải là một ngôn ngữ hay một công nghệ

• Ajax là tổ họp các công nghệ giúp ứng dụng Web gần với

Desktop bằng cách loại bỏ sự Refresh của trang web. Tổ họp

XHTML + css : trình diễn nội dung

DOM : hiển thị động và tương tác với các elements

XML + XSLT : định dạng dữ liệu cho trao đổi, thao tác

XMLHttpRequest : gửi và nhận Request

JAVASCRIPT: kết dính các thành phần

gổm :


Ajax

• ưu điểm của Aj ax

• Data-driven : giảm tải cho server do chỉ cần chuyền data

• Click và Wait nhưng không refresh -> giống Desktop

• Tốc độ response nhanh hơn

• Người dùng tiếp tục làm các thao tác khác khi đợi

• Là công nghệ của Browser, độc lập với Web Server

JUST-IN-TIMEC O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n

APTECHTM

Percentage of Ma lch ing Job Post ingsOO'!

dam

per)

J°y

c;w

A p lr i h L c k b u tc s

pyears OÍ Leadership

AjaxKiến trúc Ajax

rV

Wob server j

APTECHC O M P U T E R E D U C A T I O NW W W . aitr-aptech. edu.vn

ApLedi celebtales

/<' ỉvẹẬrs:df LéâÜËrsIiip

Classic web app

^ \Login_____________

Webpage

Webpage

Webpage

Exitpage

Logout

User'sdata

model

JFsusines nL logi-c M

H > r

Usersession

Shareddata

model

Ai axKiến trúc Ajax

Ajax app

Ajax

Nội dung gửi qua ứng dụng web thông thường

] ] Data

I Branding

I Content

Logout

APTECHC O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e ơ u . v n

ApLech Lckbutcs

/ ( ^vtan. o i Leadership

Nôi

(B)H

_ i ■ JZLLogin

i I I I I I I I I I r

Time

I Data

I Presentation□ Logic

Logout

APTECHC O M P U T E R E D U C A T I O Nwww. aiti-aptech. edu.vn

dung giri qua üng dung web bang Ajax

ApLech ccfcbfitles

tvtan. oJ Leadership

Ajax

Traffic tich lüy

(C)

Classic

^ Ajax


Ajax

• Khi nào và ở đâu sử dụng Ajax trong ứng dụng web

• Khi cần tự động Update nhưng loại bỏ Refresh (ví dụ: Bảng tỷ số,

chứng khoán, đấu giá, dự báo thời tiết...)

• Tối thiểu tần số tự động Update để giảm tải cho server, cung cấp link

refresh dễ nhận biết cho người dừng.

• Ý thức việc sử dụng Back/Forward button, hoặc chia sẻ URL của user

C O M P U T E R E D U C A T I O Nw w w . a i t i - a p t e c h . e d u . v n

APTECHTM

Ajax

• Khi nào và ở đâu sử dụng Ajax trong ứng dụng web (tiếp...)

• Loại bỏ sự phụ thuộc giữa thông tin và các trang web (ví dụ Google

Maps, Ajax pagination), sử dụng XM L và raw Data

• Ket hợp Ajax với Traditional HTML để hỗ trợ tối ưu hóa máy tìm kiếm

• Đơn giản hóa các thao tác thêm, sửa, xóa, thông báo

• Giúp người sử dụng nhận biết các action đang được thực hiện (Sử

dụng Ajax indicator image : Loading/Saving/Success .

oàn toàn bằng Ajax

C O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n

APTECHTM

Ajax

• Tại sao Ajax và PHP?

• Javascript và PHP có nhiều điểm chung.

• PHP là nền tảng mở ngày càng mở rộng và phổ biến

• Hỗ trợ bởi cộng đồng lớn (mã nguồn, tài nguyên,...)

• Nhẹ nhàng (lightweight) và tốc độ (speed) trong xử lý.

• Hoạt động độc lập, dễ triển khai trên mọi hệ thống (OS)

thao tác với định dạng dữ liệu.

C O M P U T E R E D U C A T I O Nw w w . a i t i - a p t e c h . e d u . v n

APTECHTM

Ba bước đề tạo một ứng dụngAjax đơn giản

APTECHC O M P U T E R E D U C A T I O Nwww. aiti-aptech. eơu.vn

vean» oẩ Leadership

Ba bước để tạo một ứng dụng Ajax đơn giản

■S Bước 1: Trigger sự kiện (JAVASCRIPT)

s Bước 2: Thao tác với Ajax (CLIENT-SERVER)

v' Bước 3: Cập nhập giao diện qua DOM (HTML+CSS+JS)

✓ Bước 1: Trigger sự kiện (JAVASCRIPT EVENT)years a i Leadership

Sự kiện trong Javascript

onClick onChange onError

onBlur onFocus onUnload

onSubmit onMouseUp onResize

onMouseDown onMouseOver onSelect

onMouseOut onMouseMove onMove

onKeyDown onKeyUp onLoad

onKeyPress onReset onAbort

ApLcdi celebrates

/«Mtars id LL’äiJerdüip

A jaxMo hinh dang ky su> kien

//xac dinh HTML element

var element = document.getElementByld("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

s Bước 2: Thao tác với Ajax (CLIENT-SERVER)

2.1. Khởi tạo đối tượng Request (XMLHttpRequest- XHR)2.2. Viết hàm Callback2.3. Gửi Request tói Server2.4. Nhận và parse dữ liệu trả về.

wyears iẨ Lrjtkrvh ip

Ajax2.1. Khởi tạo đốỉ tượng Request

• Vói IE6: sử dụng Msxml2.XMLHTTP:

XMLHttp = new Acti veXObj ect(" M sxml2. XMLHTTP");

• Với IE5.6: sử dụng Microsoft.XMLHTTP

XMLHttp = new ActiveXObject( "Microsoft. XM LHTTP“);

• Với trình duyệt khác: XMLHttpRequest (W3C)

XMLHttp=new XMLHttpRequestO;

AjaxMä khai tao tong quät

function GetXmlHttpObject { try {

//Tao XHR theo W3C}

catch(e) {try {

//Tao XHR cho IE6}

catch (el) {//Tao XHR cho IE5.6

return XHR

Các phưong thức củã XMLHttpRequestyearv i i i L rjtk rsh ip

Methods

open("method","url", Thiết lập request object để gửi mộtasynchFlag,urs,pass) request lên serversend(content) Gửi request lên server, nội dung CÓ

thể nullabort() Dừng request

getAHResponseHeaders () Trả lại tất cả response header cho HTTP request dạng key/value

getResponseHeader("header") Trả lại giá trị (string) của header cụ thể

setRequestHeader("header"," value")

Gán giá trị header cụ thể


Các thuộc tính của XMLHttpRequest

Properties

onreadystatechange Chỉ định hàm callbackreadyState Trạng thái Request : O-Khởi tạo,

Đang tải, 2-Đã tải, 3-Tương tác, Hoàn tất

1-4-

responseText Dữ liệu từ server ở dạng textresponseXML Dữ liệu từ server dạng XMLstatus Mã trạng thái HTTP từ server cho

request được gửi: 2OO-OK, 201- Created, 400-bad request, 403- forbidden, 500-internal server error

statusText Phiên bản text của mã trạng thái HTTP

Chi tiết về các trạng thái

• readyState=0: Chưa khởi tạo: sau khi tạo đối tượng

XMLHttpRequest nhưng chưa gọi open().

• readyState=l: Vừa khởi tạo: sau khi gọi open() nhưng chưa gọi

send().

• readyState=2: Vừa gửi đi: ngay sau khi gọi send().

• readyState=3: Đang xử lý: sau khi kết nối đến server nhưng server

chưa trả lời.

• readyState=4: Xong:sau khi server tính toán xong, dữ liệu đã gửi vềAPTECH

ytare OÍ L rjitk f ship

2.2. Viết hàm callback

• Callback function: là hàm javascript được gọỉ khỉ thuộc

tính readystate thay đổi trên đối tượng XHR

• Sơ đầ khốỉ của hàm callback dạng

function cbHandleAjaxResponse {

//thao tác với dữ liệu trả về từ đối tượng XHR

• Lấy đối tượng XHTTPRequest

var xhrObj = GetXmlHttpObject() ;• Thiết đặt onreadystatechange tới hàm callback

xhrObj.onreadystatechange = cbHandleAjaxResponse• Mở Request trên đối tượng XHR

xhrObj.open("method","url",asynchflag);- url: liên kết cần kết nối tới- asynchflag: true (nếu gửi bất đồng bộ)

• Gửi Request thông qua đối tượng XHR

■ =xhrObj . send (content) ; APTECHC O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n


Chọn Method gửi Request

Method = GET nếuMục đich nhận dữ liệu từ serverREST (Representational State Transfer) webservices Khi passing parameters Các URL không thay đổi Lượng dữ liệu gửi là nhỏ

Method = POST nếuThay đổi (CUD) trong CSDL

Lượng dữ liệu gửi lên server lớn

Các URL kô cố định

2.4. Nhận và parse dữ liệu trả về

function cbHandleAjaxResponse {

if (response is valid) {

//get responseText or resonseXML

//processing data

//get area that need updating

//stuff value to area

}

}

✓ Bước 3: Cập nhập DOM

• Trình duyệt hiển thị giao diện như một tập các elementsl/ • • o • • • M.

• Một trang web có dạng cây vái quan hệ chã-con

• Cây elements được gọi là Document Object Model

• Mọi thay đổi với DOM sẽ phản ánh ngay trên trình duyệt

yean» üd Leadership

Mot vi du vê DOM• •

html rVhead

r

title -»-Alchemy for beginners

script

body h i

img

Chapter 1: Equipment V ^ Th is is what an

em ^ alchemists' bottle

looks like:a !

APTECHC O M P U T E R E D U C A T I O N

AjaxS ử dụng DOM

• Tương tác với DOM nhờ Javascript

• Tìm DOM elements : document. getElementByld () , parentNode, chỉldNodes

• Thêm element mói : ỉnnerHTML, createElement () , createTextNode(), insertBefore()

• Loạỉ bỏ một element: removeChỉidO• • ' 9

nh element: setAttributeQ, style

C O M P U T E R E D U C A T I O NW W W . a i t i - a p t e c h . e d u . v n

APTECHTM

ApLcdi celebrates

/«years id LL’aiJerdüipAjax

Vi du sir dung DOM

<div id="seminar">

<div id="ajax">Hello Ajax</div>"

</div>

<script language="j avascript">

var divAjax = document.getElementByld("ajax" ) ;

var divSeminar =document.getElementByld("seminar");

var divPHP = document.createElement("div");

divPHP.setAttribute("id","php");

divPHP.innerHTML = "Hello PHP";

divSeminar.insertBefore(divPHP,divAj ax);

</script>

H ello A ja x

Hello PHP

Hello A ja x


Một số lưu ý

• Tách style, mã javascript ra khỏỉ nộỉ dung HTML để dễ

truy xuất và bảo trì hơn

• Tao văn bản HTML theo chuẩn XHTML

• Viết mã markup sạch

yean» o i Leadership

Demo Ajax Music Search

5. Đỉnh dang dữ liêu JSON và XML• • o •

6. Xây dựng Widget đơn giản cho Web với Ajax

7. Ajax Toolkits

8. Vấn đề và thách thức với ứng dụng Ajax

9. Giói thỉệu các tàỉ nguyên, tham khảo.

yearv i i i Leadership


5. Định dạng dữ liệu XML

• XML là gì ?

• extensible Markup Language

• Định dạng dữ liệu phổ biến nhất cho ỉập trình

• XHTML, Webservices, XML-based Database...

• X (Ajax) ~ XML và XMLHttpRequest XML

• XML liên kết với Ajax trong mọi trường họp ? -> WRONG !

• Thực tế : Không phải bất cứ ứng dụng Ajax nào cũng dùng XML

years oẩ Lrjd rrvh ip 5. Định dạng dữ liệu XML

• XMLHttpRequest thực tế chỉ gửi một HTTP request tói Server, bất kể dữ

liệu đi cùngnó là Plain Text, Attribute/Value, XML, hay JSON.

• Tuy nhiên không thể đổi tên vì đã có hàng triệu developer và ứng dụng sử

dụng tới đối tượng này.

A k .F

1 < ? x m ! ? >

rAPTECH

vean üí Lrditlei ship 5. Định dạng dữ liệu XML

<?xml version="l.0" encoding=" utf-8M?> <bookList>

<book isbn="123"><title> Ajax in depth</title> <author>Nicholas Peter</author> <publỉsher>Mannỉng</publỉsher>

</book> <book isbn="456"><title>Pro PHP </title> <author>Paul c. Zakas</author> <publisher>FirstNew</publisher>

</book></bookList>

years oẩ Lrjd rrvh ip 5. Định dạng dữ liệu XML

• XML là đinh dang chuẩn cho các dich vu Web■ • o • •

• XML thực tế chậm hơn khi truyền so với Plain Text và JSON

• Cấu trúc XML dễ hiểu nhưng không đơn giản để xây dựng

• Gặp phải vấn đề tương thích trình duyệt khi parse văn bản XML

• Trong mọi trường hợp, xem xét sử dụng Plain Text, Cặp Attribute /Value

hoặc JSON, sau đó mới tói XML


5. Định dạng dữ liệu JSON

JSON - Javascript Object Notion - JSON.org

• Định dạng dữ liệu “lightweight”

• Giựa trên cú pháp JavaScript (Array và Object literals)

JSON cho phép chuyến các đối tượng Javascript thành các chuỗi có thể

gửi cùng http request.

JSON được hỗ trợ bỏi hầu hết các ngôn ngữ, vói PHP : JSON.php ỉà thành

phần thư viện hỗ trợ encode/decode định dạng chuỗi sang PHP Object và

ngược lại

Thân thiện với Developer, ổn định, được chấp nhận rộng rãiAPTECH

5. Dinh dang dir lieu JSON• • o •

var people =

{ "programmers": [{ "firstName": "Brett", "lastName":"McLaughlin"},{ "firstName": "Jason", "lastName":"Hunter”},

{ "firstName": "Elliotte", "lastName":"Harold” } ],"authors": [

{ "firstName": "Isaac", "lastName": "Asimov", "genre": "Sciencefiction" },

{ "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" } ]

5. Đinh dang dữ liêu JSON• • o •

• Truy cập và thay đổi dữ liệu

people.programmers[0].lastName; people.programmers[0].lastName = "Boss";

• Chuyển mảng thành string

jsonText = JSON.stringify(people);• Chuyển đối tượng thành string

jsonText = JSON.stringify(aperson);

year» ư í Leadership

Demo Ajax & XML


www.netvibes.com

http://www.netvibes.com

years ũđ Leadership 6. Ajax, Widget, và Webservices

Web 2.0 - Web là nền tảng gồm nhiều dịch yụ (Web-services)

M a p s , Search, Desktop,

Picasa, Sitemaps, Geo, OpenSocial Adwords, Finance, Calendar, Authentication, Ajax Search, Ajax Language, Ajax Feed, Visualization, 03D, Book, Google Earth, Blogger Data, Google Base

del.icio.us, Finance, flickr, Hot Jobs, Maps, Merchant Solutions, Music, Design Patterns, RSS Feeds, Search, Search

Marketing, Shopping, Travel, Traffic,

upcoming.org, Ul library, weather,webjay,Widgets, JS Developer Center, PHP Developer Center

H ÿ x n o o f , DEVELOPER NETWORK

G ọ p Q ÌeCode Ơ

ApLeth Lckbutcs

i ' ivtfan. oi Leadership

AjaxWidget, và Webservices

inbox <or-Je lconie

J Mai tfW

Widget: là các Reusable module, CÓ

tính độc ỉập cao với ứng dụng

Widget cung cấp khả năng cá nhân

hóa cao với Website

years ü i Leadership 6. Ajax, Widget, và Webservices

Weather WidgetCurrent Conditions

Sunnyvale, CA (94089)

<I52°FHumidity: 61%B aro m ete r 3003"Wind: From MW a16 mph

gusting to HI A mph Dewpoinfc 39’ F Heat Index: 52‘ F ______

Sunlight 5ummarv

http://demos.openrico.org/weather_demo

Web server

Services

APTECHCOMPUTER EDUCATION

http://demos.openrico.org/weather_demo

ApLech ccfcbfitlES

i (vtan. oJ Leadership

Weather.com cung câp dich vu thài tiêt \ thông qua mot url bao gôm pamer_key

và license_key

A jaxWidget, và Webservices

http://xoap.weather.com/weather/local/30339?cc=*&dayf=5&link=xoap&prod=xoap&par=[PARTNER_KEY]&key=[LICENSE_KEY]

Services

Web serverThe

WeatherChannel

APTECHCOMPUTER EDUCATIONw ww . a iti-ap tech . edu.vn

http://xoap.weather.com/weather/local/30

ApLech ccfcbfitlES

V *vtars oJ Leadership

Web server

Services

TheWeatherChannel

A jax6. Ajax, Widget, và Webservices

cvrea ther v e r= "2.0">— <h ead >< head>- < lo c id=',3 0 3 3 9 " X 'lo c >— iln k s t j'p e — pnno ' X ln k s>— <cc>

<lsup>4 27 09 12:55 A M ED T< Isup- <obst>Dobbins ARB- G A < obst> <tm p>69</tm p>^ f lik > 6 9 < i l i k - <t>Fair<t>< ic o n > 3 3 < icon>

t <barx bar>+ <wiad><iviiid>

<hm id>62< hmid>< v is> 1 0 .0 < vis>

+ <uv>< uv><d ew p>56< d

+ <m o on >< moon>

<C€>— <dayf>

<lsup>4 27 09 1:11 A M E D T < lsup>+ ay d="0" t= "Sunday" dt="Apr 2 6 " x day>-*-<day d ="l" t="Monday" dt="Apr day>+ <day d="2" t="Tuesday" df=' Apr 2S”X da> >+ <day d="3’’ t= "Wednesday" dt="Apr 2 9 "> < d a y ’ + -;day d =”4" t="Thnrsday" dt="Apr 3 0 "> < day?1

< dayfc>< Tveather>

Weather.com response co dinh dang X M L

hoac JSON

w ww . a iti-a p tech edu .vn

A p lrd l ccfcbfiilES

ịvtían» o i Leadership

Ajax6. Ajax, Widget, vä Webservices

Demo Ajax & JSON Web service

Make Y! My Homepage

Y a H o O I t r a v e l

Home Research tr a v el g u id e s ▼ Book » Deals My Travel * Themes

SEARCH TRAVEL:

Find It FastSearch here for cheap airline tickets, hotels, cars cruises and vacations AVERTI SEMENT

Hotels Cars I Vacations I| CruisesFlights

(?) Flight Only 0 Flight * Hotel Book together 5 Si

FROM

HAN

Qne-Wav. Multi-City. More...

DEPART RETURN

05/18/09 B ;05/25/09 H ÿ jg ü y y il

Today's Picks forY ahoO O oo ! cOolTravelingfr.orrr Hanoi, V ietnam I CiiBrge Location | SHOW ME ► M y Recommendations '

Miami. FL » Cabo San Lucas. Mexico »

Today's Deals’

$485 - Riu Ocho Rios all-incl 4-nt trip w/flight BeachDestinations.com

$98 US flight sale Major Airlines

$87 - Swank Conrad Miami with bay-view

-Yahoo Travel Web Services (Ajax & JSON)-Keywords : [japan Search

Japan (Kansai)We landed at Kansai International in the afternoon, and made our way to Kyoto by the JR limited express train. Too late and too tired to explore the temples, we walked from Kyoto Station to the hotel passing Higashi Honganjii. The hotel, Ikoi-no-ie is a small guesthouse I minkishu. with spotless rooms. Japan doesn’t have daylight savings time, so the sunrise is early. Consequently, we woke up at 5am and walked down to Toji temple market. On the way we passed Nishi Honganji and walked under the railroad tracks. The market was just opening as we got there. The guidebooks we'd read advised us to ...

Yokoso! Japan!PROLOGUE I am making this journal to hopefully' inspire people to grab their bag and travel around the world This was my first trip alone outside of Canada, its a hastily planned trip so there were a lot of things that Ive overlooked like when to go, budget, memory cards, souvenirs - to name a few. I had no solid iterinary until I got to Matsumoto where I decided to go Castle hunting. On large cities I stayed in Business Hotels, on smaller ones in Ryokan (traditional inn)-with private facilities as I wake up early to beat the crowds. I highly recommend staying in a ryokan. I had no problem co...

APTECHC O M P U T E R E D U C A T I O NWWW. aiti-aptech. edu.vn

vean» oẩ Lrjdrrvhip 7. Ajax Toolkits

Thiết kế và xây dựng các ứng dụng Ajax với

Ajax Toolkits

(Frameworks, Libraries...)

< 9yean. oi Leadership

7. Ajax Toolkits

Bindows™Rich in ternet A pp lica tion Development Framework moo roofs

¡Quen/• w rit* less, do more. dojo

ASfinet

AJAX

O Ext JSprototype

YU I Library

DWR

APTECHC O M P U T E R E D U C A T I O Nwww. aiti-aptech. edu.vn

years oẩ Leadership 7. Ajax Toolkits

• ưu điểm của các thư viện Ajax

S Đóng gói sẵn các phương thức/đối tượng

S Tương thích trình duyệt (Cross-Browser)

S Giảm chi phí phát triển các ứng dụng RIA

S Hỗ trợ các hiệu ứng Javascript (animation, drag

s Thao tác với DOM dễ dàng

7. Ajax Toolkits

• Cần xem xét các yếu tố khỉ chọn lựa thư viện Ajax

'S Hỗ trợ Server-driven hay Client driven

'S Giấy phép mở - Open Licensing hay $$$

'S Tài liêu hỗ trơ, demos

'S Cộng đồng phát triển

'S Mửc abstraction hay highlevel

'S Ngôn ngữ hướng tói (C#, PHP, Python, Java)

'S Có khả năng phát triển không.

years oi Leadership 7. Ajax Toolkits

Prototype Library

❖ $('id_of_element') -> document.getElementByld()

❖ $F() -> get Value of element

❖ Try.these()

Ajax.request()

Ajax.Updater()

Element.show/hide/toggle/remove

Object-oriented extensionsAPTECHCOMPUTER EDUCATION

ytare u i LrjiJef ship 7. Ajax Toolkits

Xử lý Ajax Request/Response đơn giản

function createRequest(url) {var xhr = new Ajax.Request(url,{

method:1 get1 f

onComplete: showResponse });}

function showResponse(xhr) {$('div').innerHTML = xhr.responseText;

}

ytare ui LrjiJef ship 7. Ajax Toolkits

Xử lý Ajax Request/Response đơn giản

function createRequest(url) {var xhr = new Ajax.Request(url,{

method:1 get1 f

onComplete: showResponse });}

function showResponse(xhr) {$('div').innerHTML = xhr.responseText;

}

ApLedi LdctHjIc'.

4 r *<script src="prototype . j s"x/script><script language=MjavascriptM>

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>

years oi Lrjitkf ship 7. Ajax Toolkits

Tự động update nộỉ dung

new Ajax.Updater(1 products 1 , f/some_url!, { method: 1 get1,insertion: Insertion.Top

} ) ;

new Aj ax.PeriodicalUpdater(1 products 1,1/some_url1 , {method: 1 get1,insertion: Insertion.Top, f r e q u e n c y : If decay: 2 }) ;

8. Vấn đề và thách thức với ứng dụng Ajax

Ajax

• Trạng thái ứng dụng Ajax thay đôi, nhưng URL thì không

• Lịch sử trình duyệt, các dạng Navigation (TAB, TREE)

• Các bước trong một tiến trình

• Ngưòi sử dụng Confused với nút Undo

• Tối ưu hóa Engine tìm kiếm khó

• Bookmark trang web ỉà vấn đềỊ

mg xem hiện tại

C O M P U T E R E D U C A T I O Nwww. aiti-aptech. edu.vn

APTECHTM

• Sách Ajax

• Ajax in Action (Manning)

• HeadFirst Ajax (HeadFirst)

• Ajax Patterns and Best Practices

(Apress)

• Liên kết Web

www.aiaxian.com

http://www.aiaxlessons.com/

http://aiax.phpmagazine.net/

• http://aiaxworld.com/

Liên kết Web

http://developer.vahoo.com/

• http://code.google.com/apis/aiax/

• http://aiaxpatterns.org/

http://www.aiaxmatters.com/

• Link một số thư viện phổ biến

http://prototypeis.org

http://iauerv.com

• Nội dung hội thảo:

http://aptechvn. wordpress.com/

ytan od Ladenhlp * J 1 • Ạ r . > • ________ A 1 1 ______ 1 1 78. Giói thỉệu các tàỉ nguyên tham khảo

http://www.aiaxian.com

http://www.aiaxlessons.com/

http://aiax.phpmagazine.net/

http://aiaxworld.com/

http://developer.vahoo.com/

http://code.google.com/apis/aiax/

http://aiaxpatterns.org/

http://www.aiaxmatters.com/

http://prototypeis.org

http://iauerv.com

http://aptechvn

_ wyears oi Leadership

Demo Ajax with Prototype

APTECHCOMPUTER EDUCATIONw ww . a iti-ap tech . edu.vn

yean ũđ Leadership

Documents

Ajax Trong Php