Bài giảng HTML và AJAX - Một số vấn đề cần quan tâm

Một số vấn đề cần quan tâm
Nguyễn Duy Hải
TT CNTT-ĐHSP Hà Nội
Nội dung
9XML
9 Lập trình AJAX
9RSS
9RDF
9Một số chức năng
XML
Giới thiệu
9 XML = eXtensible Markup Language
9 XML được thiết kế để miêu tả dữ liệu, tập trung
vào dữ liệu đó là gì.
9 XML là ngôn ngữ đánh dấu tương tự như HTML
9 các thẻ của XML không được định nghĩa trước.
9 XML sử dụng Document Type Definition (DTD) 
hoặc XML Schema để mô tả dữ liệu
9 XML được W3C khuyến cáo sử dụng
Đặc điểm
9XML được thiết kế để lưu trữ, làm công cụ
trung gian để trao đổi dữ liệu.
9XML không thể thay thế HTML
9XML có thể mở rộng
9XML có thể sử dụng để bổ trợ cho HTML 
khi thiết kế web.
Cú pháp các thẻ XML
9 Tương tự thẻ HTML, tên thẻ do người sử dụng tự
định nghĩa.
9 Mọi thẻ XML phải có thẻ đóng.
9 Thẻ XML phân biệt chữ hoa, chữ thường.
9 Thẻ XML có thể lồng nhau, không thể “cắt” nhau
9 XML bắt buộc có 1 thẻ gốc.
9 Mọi giá trị thuộc tính của XML phải để trong
ngoặc kép.
9 Khoảng trống trong XML được bảo toàn.
9 Ghi chú trong XML giống với HTML: 
Thẻ XML
9Thẻ:
– Có thể gồm chữ, số, và một số ký tự khác.
– Không được bắt đầu bằng số hoặc ký tự đặc
biệt.
– Không được bắt đầu bằng “XML”.
– Không được chứa khoảng trống.
9Thuộc tính: tương tự HTML
– Thẻ có thể có thuộc tính.
– Giá trị thuộc tính phải đặt trong nháy đơn hoặc
kép.
Ví dụ XML
1
Nguyễn Văn A
Hà Nội
2
Trần Văn B
Hà Nam
Xem trang XML
9Sự hỗ trợ của các trình duyệt
– Mozilla Firefox 1.0.2.
– IE 5 hỗ trợ XML nhưng chưa hoàn chỉnh, IE 6 
hỗ trợ đầy đủ.
9Xem file XML trên trình duyệt:
– Hiển thị dưới dạng cây.
– Cho phép mở rộng
hoặc thu gọn các cấp
– File XML không đúng
sẽ bị báo lỗi.
Kết hợp XML và CSS
9Có thể dùng CSS để quy định cách hiển thị
file XML.
9Cách quy định:
<?xml-stylesheet type="text/css" 
href=“tên_file.css"?>
9Có thể dùng CSS để quy định cách hiển thị
file XML.
Ví dụ
id{
display:block;
}
ten{
color:#FF0000;
font-weight:bold;
display:block;
}
que{
font-style:italic;
display:block;
}
<?xml version="1.0" 
encoding="utf-8"?>
<?xml-stylesheet type="text/css" 
href="danhsachsinhvien.css"?>
1
Nguyễn Văn A
Hà Nội
2
Trần Văn B
Hà Nam
Kết hợp XML và XSL
9XSL (eXtensible Stylesheet Language)
9Mở rộng của CSS
9XSL “chuyển đổi” XML thành HTML trước
khi hiển thị.
Xử lý XML
9Có các công cụ xử lý. Thường được tích
hợp trong ngôn ngữ lập trình.
9….
9….
Lập trình AJAX
Giới thiệu
9AJAX = Asynchronous JavaScript And XML
9AJAX không phải là ngôn ngữ mới mà là
một cách mới sử dụng các ngôn ngữ đã
có.
9AJAX giúp ta tạo các trang web nhanh
hơn, tiện lợi hơn, thân thiện hơn khi sử
dụng.
9AJAX dựa trên JavaScript và các yêu cầu
HTTP.
Đặc điểm AJAX
9 Là công nghệ của web browser. Độc lập
với web server.
9Sử dụng JavaScript để gửi và nhận dữ liệu
giữa client và server.
9AJAX dựa trên:
– JavaScript
– XML
– HTML
– CSS
9AJAX sử dụng XML và yêu cầu HTTP
Ví dụ minh họa
Truy xuất dữ liệu từ server trong JavaScript
9Với IE6: sử dụng Msxml2.XMLHTTP:
XMLHttp = 
new ActiveXObject("Msxml2.XMLHTTP")
9Với IE5.6: sử dụng Microsoft.XMLHTTP
XMLHttp =
new ActiveXObject("Microsoft.XMLHTTP")
9Với trình duyệt khác: XMLHttpRequest
XMLHttp=new XMLHttpRequest()
Mã lệnh tổng quát
function GetXMLHttpObject(){
var oXMLHttp=null
try{
oXMLHttp=new ActiveXObject("Msxml2.XMLHttp")
}
catch(e){
try{
oXMLHttp=new ActiveXObject("Microsoft.XMLHttp")
}
catch (e){}
}
if (oXMLHttp==null)
oXMLHttp=new XMLHttpRequest()
return oXMLHttp;
}
function GetXMLHttpObject(){
var oXMLHttp=null
try{
oXMLHttp=new ActiveXObject("Msxml2.XMLHttp")
}
catch(e){
try{
oXMLHttp=new ActiveXObject("Microsoft.XMLHttp")
}
catch (e){}
}
if (oXMLHttp==null)
oXMLHttp=new XMLHttpRequest()
return oXMLHttp;
}
Đối tượng XMLHttpRequest
9Các phương thức
– open(): Thiết lập yêu cầu đến server (địa chỉ
trang cần kết nối đến)
– send(): Gửi yêu cầu đến server.
– abort(): Hủy yêu cầu hiện tại
9Các thuộc tính
– readyState: Trạng thái hiện tại của đối tượng.
– onreadystatechange: Địa chỉ hàm gọi lại
(callback)
– responseText: Chuỗi dữ liệu trả về.
Phương thức open
9 void open(
in DOMString method, 
in DOMString url);
9 void open(
in DOMString method, 
in DOMString url, 
in boolean async);
9 void open(
in DOMString method, 
in DOMString url, 
in boolean async, 
in DOMString user);
Phương thức open (tt)
9 void open(in DOMString method, 
in DOMString url, 
in boolean async, 
in DOMString user, 
in DOMString password);
Thuộc tính readyState
9 readyState=0: Chưa khởi tạo: sau khi tạo đối
tượng XMLHttpRequest nhưng chưa gọi open().
9 readyState=1: Vừa khởi tạo: sau khi gọi open() 
nhưng chưa gọi send().
9 readyState=2: Vừa gửi đi: ngay sau khi gọi
send().
9 readyState=3: Đang xử lý: sau khi kết nối đến
server nhưng server chưa trả lời.
9 readyState=4: Xong: sau khi server tính toán
xong, dữ liệu đã gửi về xong.
Minh họa
RSS
Giới thiệu
9RSS = Really Simple Syndication
9RSS là cách sử dụng XML để phát tán nội
dung của 1 website đến nhiều website 
khác. 
9RSS cho phép ta có được những thông tin 
cập nhật nhất một cách nhanh nhất.
9RSS có nhiều phiên bản. Phiên bản đầu
tiên năm 1997, từ 2003 là phiên bản 2.0
Đặc điểm
9Viết bằng XML
9Có thể tự động cập nhật
9Có cú pháp chặt chẽ nhưng đơn giản, dễ
học, dễ sử dụng
Ví dụ RSS
Khoa CNTT Home Page
Gioi thieu khoa CNTT
Dien dan CNTT
Noi trao doi tin tuc cua GV va SV
Thu vien CNTT
Danh muc tai lieu cua khoa CNTT
Khoa CNTT Home Page
Gioi thieu khoa CNTT
Dien dan CNTT
Noi trao doi tin tuc cua GV va SV
Thu vien CNTT
Danh muc tai lieu cua khoa CNTT
Cú pháp RSS
9 Dòng đầu tiên là khai báo XML, quy định phiên bản XML và mã ký
tự: 
9 Dòng thứ hai là khai báo RSS. Xác định phiên bản RSS qua thuộc
tính version:
9 Dòng tiếp theo là thẻ sử dụng để diễn giải kênh RSS. 
9 Thẻ này bắt buộc phải có 3 thẻ con:
– : Tiêu đề
– : Liên kết
– : Mô tả
9 Mỗi thẻ có thể có 1 hoặc nhiều thẻ bên trong. 
Mỗi thẻ xác định một nội dung thông tin RSS. Mỗi 
cần có 3 thẻ con quy định các thuộc tính:
– : Tiêu đề
– : Liên kết
– : Mô tả
9 Cuối cùng là các thẻ đóng
Công bố RSS
1. Tạo tệp chứa RSS. Có đuôi là .XML
2. Kiểm tra tính hợp lệ VD: 
(
3. Đưa file chứa RSS lên server
4. Đặt 1 trong 2 ảnh màu cam liên kết đến file XML 
vừa tạo lên trang web 
5. Đăng ký vào danh mục RSS (Tìm từ "RSS Feed 
Directories“)
6. Đăng ký với các máy tìm kiếm
7. Thường xuyên cập nhật RSS của mình
Đọc RSS
9RSS Reader (
9News Gator (
9…
9Mozilla Firefox (www.mozilla.com/firefox/)
Đọc RSS bằng PHP
9 Sử dụng thư viện mã nguồn mở lastRSS
– Download: 
– Hỗ trợ các phiên bản RSS 0.9, 1.0 và 2.0
– Cache
– pubDate/ngày lastBuildDate có thể chuyển đổi sang các
định dạng
– Chuyển đổi mã ký tự (tất cả các bộ mã đều được hỗ trợ
bằng cách sử dụng thư viện iconv)
– Kết quả trả ra là mảng
– Tốc độ cao
– Cho phép tách HTML từ trường mô tả
– Tùy chọn giới hạn số lượng tin trả ra
– Hai cách xử lý với CDATA (get/strip CDATA content)
– Mã nguồn mở
Mã lệnh
Minh họa
RDF
Giới thiệu
9 RDF stands for Resource Description Framework
9 RDF is a framework for describing resources on 
the web
9 RDF provides a model for data, and a syntax so 
that independent parties can exchange and use it
9 RDF is designed to be read and understood by 
computers
9 RDF is not designed for being displayed to people
9 RDF is written in XML
9 RDF is a part of the W3C's Semantic Web Activity
9 RDF is a W3C Recommendation
RDF - Examples of Use
9 Describing properties for shopping items, such as 
price and availability
9 Describing time schedules for web events
9 Describing information about web pages, such as 
content, author, created and modified date
9 Describing content and rating for web pictures
9 Describing content for search engines
9 Describing electronic libraries
RDF Rules
9RDF uses Web identifiers (URIs) to identify 
resources.
9RDF describes resources with properties 
and property values.
Một số chức năng
Đếm số người truy cập
Quản lý file
9Upload
9Download
Xử lý ảnh