Bài giảng Ajax - PHP

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
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ề 
Ajax
2.2. Viết hàm callback
function cbHandleAjaxResponse {
//thao tác với dữ liệu trả về từ đối tượng XHR
}
• 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 
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);
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
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
}
}
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
Ajax
Một ví dụ về DOM
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
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);
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
Demo Ajax Music Search
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.
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
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. 
 Ajax in depth
Nicholas Peter
Manning 
Pro PHP 
Paul C. Zakas
FirstNew 
Ajax
5. Định dạng dữ liệu XML
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
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
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 dạng dữ liệu JSON
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);
Demo Ajax & XML
www.netvibes.com
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 
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à 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
Ajax
6. Ajax, Widget, và Webservices
XHR
The 
Weather 
Channel
Weather Widget 
Web server
Services
Ajax
6. Ajax, Widget, và Webservices
XHR
The 
Weather 
Channel
Web server
Services
339?cc=*&dayf=5&link=xoap&prod=xoap&
par=[PARTNER_KEY]&key=[LICENSE_KEY]
Weather.com cung cấp dịch vụ thời tiết 
thông qua một url bao gồm parner_key 
và license_key 
Ajax
6. Ajax, Widget, và Webservices
The 
Weather 
Channel
Web server
Services
Weather.com response 
có định dạng XML 
hoặc JSON
Ajax
6. Ajax, Widget, và Webservices
Demo Ajax & 
JSON Web service
Ajax
7. Ajax Toolkits
Thiết kế và xây dựng các ứng dụng Ajax với 
Ajax Toolkits 
(Frameworks, Libraries…)
Ajax
7. Ajax Toolkits
YUI Library
Ajax
• Ư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
7. Ajax Toolkits
Ajax
• 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.
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 giản
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 giản
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
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;
}
Ajax
Tự động update nội 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. 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
• …
Ajax
8. Giới thiệu các tài nguyên tham khảo
• Sách Ajax
• Ajax in Action (Manning)
• HeadFirst Ajax (HeadFirst)
• Ajax Patterns and Best Practices 
(Apress)
• Liên kết Web
• www.ajaxian.com
• 
• 
• 
• Liên kết Web
• 
• 
• 
• 
• Link một số thư viện phổ biến
• 
• 
• Nội dung hội thảo:
• 
Demo Ajax with Prototype
Hỏi đáp !