›
›

Bài giảng Giới thiệu về PHP - AJAX

pdf 101 trang phuongnguyen 3570
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Giới thiệu về PHP - AJAX", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgioi_thieu_ve_php_ajax.pdf

Nội dung text: Bài giảng Giới thiệu về PHP - AJAX

  1. Ajax PHP 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
  2. Nội dung hội thảo • Giới thiệu về PHP • Cú pháp trong PHP • AJAX • Music website using PHP & AJAX
  3. Giới thiệu về PHP • 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ố
  4. 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
  5. PHP là gì ? • 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 HTML)
  6. Mô hình hoạt động
  7. Lịch sử phát triển • 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 )
  8. Lịch sử phát triển • 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à Andi 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, IMAP). • 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 trình hướng đối tượng.
  9. Lịch sử phát triển • 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.
  10. Lý do sử dụng 1. Dễ dàng sử dụng Code php được nhúng ngay trong code HTML. 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 HTML. Example
  11. Lý do sử dụng 2. Tốc độ thực 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
  12. Lý do sử dụng 3. Tính khả chuyển PHP được thiế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 UNIX, sau đó chuyển sang NT mà không gặp phải bất cứ vấn đề 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
  13. Lý do sử dụng 4. Giá thành cạnh tranh PHP không chỉ là phần mềm mã nguồn mở mà còn thực sự miễn phí (kể cả khi 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í. ` PHP Software Free Platform Free (Linux) Development Free Tools PHP Coder, jEdit
  14. Lý do sử dụng 5. PHP có một cộng đồng phát triển mạnh 6. Thời gian phát triển dự án nhanh Do 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 khi phát triển ứng dụng sẽ giảm được rất nhiều thời gian. `
  15. Các con số 1. Sử dụng PHP 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!, MyYearbook, Digg, WordPress và Tagged.
  16. Google trend
  17. Cú pháp PHP
  18. Cú pháp PHP Tag style Start Tag End Tag Standard Short ASP Script tags language=“ph p”> * Nên dùng kiểu Standard
  19. Cú pháp trong PHP Chú thích trong PHP This is a PHP program
  20. Cú pháp PHP Biến trong PHP  Biến không bắt đầu bằng số, không được trùng tên hàm, phân biệt kiểu chữ  Không cần khai báo trước  Để lấy giá trị biến dùng ký hiệu $ trước tên biến, biến có thể bị ép kiểu  Định nghĩa hằng dùng define vd: define(“pi”,3.14);  Biến có tầm vực trong hàm, trong script
  21. Cú pháp PHP Ví dụ:
  22. Cú pháp PHP Phép toán  PHP cung cấp các phép toán số học(+, - )  Các phép toán kết hợp (+=, -=)  Phép tham chiếu &  Phép so sánh (= =, !=, >, =, <= )  Phép toán logic (||, &&, !)  Phép toán Error “@”
  23. Cú pháp PHP Kiểu dữ liệu  Scalar : Boolean, Integer, Float, String  Composite : Array, Object  Special Types : Resource, NULL
  24. Cú pháp PHP Khai báo mảng "; $ar = array(5=>10, 20, 30, "q"=>40); echo var_dump($ar), " "; $ar = array(5=>10, 6=>20, 7=>30, "q"=>40); echo var_dump($ar), " "; $ar = array("a"=>10, 20, 30, 40); echo var_dump($ar), " "; $ar = array("a"=>array(1,2,3,4,5), 20, 30, 40); echo var_dump($ar); ?>
  25. Cú pháp PHP Câu lệnh IF if ($a > $b) { A is equal to 5 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"; } ?>
  26. Cú pháp PHP Câu lệnh SWITCH
  27. Cú pháp PHP Câu lệnh WHILE DO 0); $i = 1; ?> while ($i <= 10): print $i; $i++; endwhile;
  28. Cú pháp PHP Câu lệnh FOR 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
  29. Cú pháp PHP Khái báo hàm
  30. Kết nối CSDL Kết nối 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);
  31. Cài đặt PHP • Liên kết chính thức Apache PHP MySQL • Các bộ cài đặt tích hợp APPSERVER EASYPHP XAMPP WAMP Manual install
  32. Ajax I 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
  33. AJAX 1. Giới thiệu Ajax  Ứng dụng Desktop  Toàn bộ mã CT chạy trên Desktop  Tốc độ thực thi/Tính tương tác cao  Rich Client?  Ứng dụng Web  Click-wait-refresh-Click-wait-refesh  Ứng dụng RPC/RMI  Phức tạp, nặng nề trong xử lý  Ảnh hưởng bởi Network Latency
  34. Web 2.0 với RIA
  35. AJAX 1. Giới thiệu Ajax  Ứng dụng Rich Internet Application  Adobe Flash/Flex Apps  Microsoft Silverlight Apps  Ajax Applications  Ưu điểm  Truy cập bất đồng bộ  Đa dạng trong tương tác  Có thể tạo các ứng dụng phức tạp  Giảm tải cho server
  36. AJAX 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ệ ?
  37. AJAX • AJAX = Asynchronous JavaScript And XML : 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]
  38. AjaxAJAX • 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
  39. 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 gồm :  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
  40. Ajax • Ưu điểm của Ajax • 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-TIME
  41. Ajax Ajax Job trend
  42. Ajax Kiến trúc Ajax
  43. Ajax Kiến trúc Ajax Classic web app Ajax app
  44. Ajax • Nội dung gửi qua ứng dụng web thông thường
  45. Ajax • Nội dung gửi qua ứng dụng web bằng Ajax
  46. Ajax • Traffic tích lũy
  47. 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
  48. 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 XML và raw Data • Kết 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 . • Tránh tạo các ứng dụng hoàn toàn bằng Ajax
  49. 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) • Hỗ trợ nhiều kết nối, thao tác với định dạng dữ liệu.
  50. Ajax Ba bước để tạo một ứng dụng Ajax đơn giản
  51. Ajax Ba bước để tạo một ứng dụng Ajax đơn giản  Bước 1: Trigger sự kiện (JAVASCRIPT)  Bước 2: Thao tác với Ajax (CLIENT-SERVER)  Bước 3: Cập nhập giao diện qua DOM (HTML+CSS+JS)
  52. Ajax  Bước 1: Trigger sự kiện (JAVASCRIPT EVENT) 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
  53. Ajax Mô hình đăng ký sự kiện //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 }
  54. Ajax  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 Callback 2.3. Gửi Request tới Server 2.4. Nhận và parse dữ liệu trả về.
  55. Ajax 2.1. Khởi tạo đối tượng Request • Với IE6: sử dụng Msxml2.XMLHTTP: XMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); • Với IE5.6: sử dụng Microsoft.XMLHTTP XMLHttp = new ActiveXObject("Microsoft.XMLHTTP“); • Với trình duyệt khác: XMLHttpRequest (W3C) XMLHttp=new XMLHttpRequest();
  56. Ajax Mã khởi tạo tổng quát function GetXmlHttpObject { try { //Tao XHR theo W3C } catch(e) { try { //Tao XHR cho IE6 } catch(e1) { //Tao XHR cho IE5.6 } } return XHR }
  57. Ajax Các phương thức của XMLHttpRequest Methods open(“method”,”url”, Thiết lập request object để gửi một asynchFlag,urs,pass) request lên server send(content) Gửi request lên server, nội dung có thể null abort() Dừng request getAllResponseHeaders() 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”,” Gán giá trị header cụ thể value”)
  58. Ajax Các thuộc tính của XMLHttpRequest Properties onreadystatechange Chỉ định hàm callback readyState Trạng thái Request : 0-Khởi tạo, 1- Đang tải, 2-Đã tải, 3-Tương tác, 4- Hoàn tất responseText Dữ liệu từ server ở dạng text responseXML Dữ liệu từ server dạng XML status Mã trạng thái HTTP từ server cho request được gửi: 200-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
  59. Ajax 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=1: 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ề
  60. Ajax 2.2. Viết hàm callback • Callback function: là hàm javascript được gọi khi thuộc tính readystate thay đổi trên đối tượng XHR • Sơ đồ khối của hàm callback dạng function cbHandleAjaxResponse { //thao tác với dữ liệu trả về từ đối tượng XHR }
  61. Ajax 2.3. Gửi Request lên Server • 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);
  62. Ajax Chọn Method gửi Request Method = GET nếu Mục đích nhận dữ liệu từ server REST (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ếu Thay đổi (CUD) trong CSDL Lượng dữ liệu gửi lên server lớn Các URL kô cố định
  63. Ajax 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 } }
  64. Ajax  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 elements • Một trang web có dạng cây với quan hệ cha-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
  65. Ajax Một ví dụ về DOM
  66. Ajax Sử dụng DOM • Tương tác với DOM nhờ Javascript • Tìm DOM elements : document.getElementById(), parentNode, childNodes • Thêm element mới : innerHTML, createElement(), createTextNode(), insertBefore() • Loại bỏ một element : removeChild() • Thay đổi thuộc tính element : setAttribute(), style
  67. Ajax Ví dụ sử dụng DOM Hello Ajax 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);
  68. Ajax Một số lưu ý • Tách style, mã javascript ra khỏi nội dung HTML để dễ truy xuất và bảo trì hơn • Tạo văn bản HTML theo chuẩn XHTML • Viết mã markup sạch
  69. Demo Ajax Music Search
  70. Ajax II 5. Định dạng dữ liệu JSON và XML 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 thiệu các tài nguyên, tham khảo.
  71. Ajax 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 lậ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
  72. Ajax 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.
  73. Ajax 5. Định dạng dữ liệu XML Ajax in depth Nicholas Peter Manning Pro PHP Paul C. Zakas FirstNew
  74. Ajax 5. Định dạng dữ liệu XML • XML là định dạng chuẩn cho các dịch vụ Web • 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
  75. Ajax 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 là 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ãi
  76. Ajax 5. Định dạng dữ liệu JSON 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" } ] }
  77. Ajax 5. Định dạng dữ liệu JSON • 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);
  78. Demo Ajax & XML
  79. www.netvibes.com
  80. Ajax 6. Ajax, Widget, và Webservices • Web 2.0 – Web là nền tảng gồm nhiều dịch vụ (Web-services) del.icio.us, Finance, flickr, HotJobs, Maps, Merchant Solutions, Music, Design Maps, Search, Desktop, Patterns, RSS Feeds, Search, Search Picasa, Sitemaps, Geo, OpenSocial Marketing, Shopping, Travel, Traffic, Adwords, Finance, Calendar, upcoming.org, UI library, weather, Authentication, Ajax Search, Ajax webjay,widgets, JS Developer Center, PHP Language, Ajax Feed, Visualization, Developer Center O3D, Book, Google Earth, Blogger Data, Google Base
  81. Ajax 6. Ajax, Widget, và Webservices • Widget : là các Reusable module, có tính độc lập cao với ứng dụng • Widget cung cấp khả năng cá nhân hóa cao với Website
  82. Ajax 6. Ajax, Widget, và Webservices Weather Widget Web server Services The XHR Weather Channel
  83. Ajax 6. Ajax, Widget, và Webservices Weather.com cung cấp dịch vụ thời tiết thông qua một url bao gồm parner_key 339?cc=*&dayf=5&link=xoap&prod=xoap& và license_key par=[PARTNER_KEY]&key=[LICENSE_KEY] Services The Web server Weather Channel XHR
  84. Ajax 6. Ajax, Widget, và Webservices Weather.com response có định dạng XML Web server hoặc JSON Services The Weather Channel
  85. Ajax 6. Ajax, Widget, và Webservices Demo Ajax & JSON Web service
  86. Ajax 7. Ajax Toolkits Thiết kế và xây dựng các ứng dụng Ajax với Ajax Toolkits (Frameworks, Libraries )
  87. Ajax 7. Ajax Toolkits YUI Library
  88. Ajax 7. Ajax Toolkits • Ưu điểm của các thư viện Ajax  Đóng gói sẵn các phương thức/đối tượng  Tương thích trình duyệt (Cross-Browser)  Giảm chi phí phát triển các ứng dụng RIA  Hỗ trợ các hiệu ứng Javascript (animation, drag n drop )  Thao tác với DOM dễ dàng
  89. Ajax 7. Ajax Toolkits • Cần xem xét các yếu tố khi chọn lựa thư viện Ajax  Hỗ trợ Server-driven hay Client driven  Giấy phép mở - Open Licensing hay $$$  Tài liệu hỗ trợ, demos  Cộng đồng phát triển  Mức abstraction hay highlevel  Ngôn ngữ hướng tới (C#, PHP, Python, Java)  Có khả năng phát triển không.
  90. 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
  91. Ajax 7. Ajax Toolkits Xử lý Ajax Request/Response đơn giản function createRequest(url) { var xhr = new Ajax.Request(url,{ method:'get', onComplete: showResponse }); } function showResponse(xhr) { $(„div‟).innerHTML = xhr.responseText; }
  92. Ajax 7. Ajax Toolkits Xử lý Ajax Request/Response đơn giản function createRequest(url) { var xhr = new Ajax.Request(url,{ method:'get', onComplete: showResponse }); } function showResponse(xhr) { $(„div‟).innerHTML = xhr.responseText; }
  93. 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; }
  94. Ajax 7. Ajax Toolkits Tự động update nội 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 });
  95. Ajax 8. Vấn đề và thách thức với ứng dụng 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 là vấn đề • Khó chia sẻ các liên kết đang xem hiện tại •
  96. Ajax 8. Giới thiệu các tài nguyên tham khảo • Sách Ajax • Liên kết Web • Ajax in Action (Manning) • • HeadFirst Ajax (HeadFirst) • • Ajax Patterns and Best Practices • (Apress) • • Liên kết Web • Link một số thư viện phổ biến • www.ajaxian.com • • • • • Nội dung hội thảo: • •
  97. Demo Ajax with Prototype
  98. Hỏi đáp !