Tìm hiểu công nghệ ajax và ứng dụng của ajax trong thiết kế web động

Luận văn : Tìm hiểu công nghệ ajax và ứng dụng của ajax trong thiết kế web động

z

TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN

BỘ MÔN CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỀ ÁN MÔN HỌC

(Chuyên ngành Công Nghệ Thông Tin)

Mục lục

LỜI NÓI ĐẦU 3CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX 4

1 Sự xuất hiện của Ajax 4

2 Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax 4

3 Ưu điểm của Ajax so với các ứng dụng web truyền thống 4

4 Các ứng dụng AJAX phổ biến 6

CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX 7

1 Đối tượng XMLHttpRequest 7

2 Các phương thức của đối tượng XMLHttpRequest7

3 Các thuộc tính của đối tượng XMLHttpRequest 9

4 Ajax và PHP 16

CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN GIẢN SỬ DỤNG CÔNG NGHỆ AJAX 20

1 Thiết kế ứng dụng từ điển trực tuyến với công nghệ AJAX 20

2 Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) 23

CHƯƠNG IV:TỔNG KẾT, ĐÁNH GIÁ 25PHỤ MỤC: GIỚI THIỆU CÁC TOOLKIT HỖ TRỢ AJAX TRONG VIỆC THIẾT

LỜI NÓI ĐẦU

Khác với các phần mềm chạy độc lập ở máy khách (có khả năng tương tác gần như

tức thời với người dùng), các ứng dụng Web bị giới hạn bởi chính nguyên lý hoạt

động của nó: tất cả các giao dịch phải thực hiện thông qua phương thức giao dịchHTTP (HyperText Transport Protocol - Giao thức truyền tải qua các siêu liên kết)trong một mô hình có tên Client/Server

Bất kỳ một tác động nào của người dùng lên ứng dụng Web thông qua trình duyệt

đều cần thời gian gửi về Server và sau khi xử lý, Server sẽ trả về những thông tin

người dùng mong đợi Như vậy, độ trễ trong trường hợp này chính là điều mà các ứng

dụng Web khó có thể sánh với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt

là trong các ứng dụng như Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát hạchtrực tuyến có tính thời gian làm bài…)

Chính vì lý do như vậy mà cần phải có một số giải pháp khử độ trễ trên các ứng dụng

web AJAX ra đời đã giải quyết được phần nào vấn đề này AJAX là sự kết hợp của

nhiều công nghệ đã có sẵn như JavaScript, XMLHttpRequest, HTML, CSS,… Nó hỗtrợ việc truyền tải dữ liệu bất đồng bộ, tăng cường khả năng tương tác với server, giúp

tăng tốc ứng dụng web.

Nội dung của đề tài này sẽ tập trung tìm hiểu tổng quan công nghệ AJAX, và xâydựng một số ứng dụng cơ bản áp dụng công nghệ này Xin chân thành cảm ơn thầygiáo Phạm Minh Hoàn đã nhiệt tình hướng dẫn và giúp đỡ chúng em trong quá trìnhthực hiện đề tài!

Sinh viên thực hiện đề tài

Đỗ Anh Việt

CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX

1 Sự xuất hiện của Ajax

Thuật ngữ AJAX xuất hiện đầu tiên vào ngày 18/2/2005 trong một bài báo có tên

AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett,

công ty AdapativePath Ông định nghĩa và tóm gọn lại từ cụm từ “AsynchronousJavaScript + CSS + DOM + XMLHttpRequest” Ngay sau đó thuật ngữ AJAX đượcphổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó làmột trong những từ khóa được tìm kiếm nhiều nhất trên Internet

2 Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax

Nội dung định nghĩa của Garrett về AJAX trong bài báo của mình như sau:

AJAX không phải là một công nghệ Nó là tập hợp của nhiều công nghệ với thế mạnhcủa riêng mình để tạo thành một sức mạnh mới AJAX bao gồm:

 Thể hiện Web theo tiêu chuẩn XHTML và CSS;

 Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);

 Trao đổi và xử lý dữ liệu bằng XML và XSLT;

 Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest;

 Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript

Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm ởXMLHttpRequest Đây là một kỹ thuật do Microsoft khởi xướng và tích hợp lần đầutiên vào IE5 dưới dạng một ActiveX Mozilla tích hợp công nghệ này vào Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các version sau này của Firefox đều cóXMLHttpRequest) và hiện nay đã có trong trình duyệt Safari 1.2 (Apple) và Opera 7trở lên Các vấn đề về XMLHttpRequest và cách sử dụng nó trên các trình duyệt khácnhau sẽ được chúng ta quay trở lại ở các phần tiếp theo Sau đây là một số nét khácbiệt cơ bản giữa các ứng dụng Web truyền thống và ứng dụng Web sử dụng AJAX

3 Ưu điểm của Ajax so với các ứng dụng web truyền thống

Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ liệutrên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còngọi postback), server sẽ xử lý yêu cầu này và gửi trả lại trang HTML khác thay thếtrang cũ Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví

dụ người dùng sau khi nhấn một nút “Submit” trên trang Web phải chờ cho đến khiserver xử lý xong mới có thể tiếp tục công việc

Ngược lại, trong các ứng dụng AJAX, người dùng có thể nhấn chuột, gõ phím liên tục

mà không cần chờ đợi Nội dung tương ứng với từng hành động của người dùng sẽgần như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời)trong khi trang Web không cần phải refresh lại toàn bộ nội dụng Để tìm hiểu kỹ hơnđiều này, ta sẽ xem xét 2 mô hình ứng dụng như [1] đã đề cập, Mô hình cổ điển và Môhình AJAX-based:

Mô hình cổ điển của một ứng dụng Web (hình minh họa được lấy từ bài báo củaGarrett)

Mô hình ứng dụng Web sử dụng AJAX (theo bài báo của Garrett)

Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX trình duyệt phíangười dùng chỉ cần tải về phần của trang Web mà người dùng muốn thay đổi Điềunày giúp cho ứng dụng Web phản hồi nhanh hơn, thông minh hơn Ngoài ra, điểm đặcbiệt quan trọng trong công nghệ AJAX nằm ở chữ A (Asynchronous) – không đồng

bộ – tức là người dùng cứ gửi yêu cầu của mình tới server và quay lại với công việccủa mình mà không cần chờ trả lời Khi nào server xử lý xong yêu cầu của phía ngườidùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện những thay đổicần thiết

Vậy tất cả cơ chế này hoạt động thực sự thế nào?

AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này Khi đó, các yêu cầugửi (resquest) và nhận (response) do AJAX Engine thực hiện Thay vì trả dữ liệu dướidạng HTML và CSS trực tiếp cho trình duyệt, Web server có thể gửi trả dữ liệu dạngXML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSScho trình duyệt hiển thị Việc này được thực hiện trên client nên giảm tải rất nhiều choserver, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì màkhông cần nạp lại trang Mặt khác, sự kết hợp của các công nghệ Web như CSS vàXHTML làm cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kểdung lượng trang phải nạp Đây là những lợi ích hết sức thiết thực mà AJAX đem lại Chúng ta sẽ xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động vàviệc sử dụng Javascript kết nối chúng trong phần tiếp theo

4 Các ứng dụng AJAX phổ biến

Google Suggest hiển thị các thuật ngữ gợi ý gần như ngay lập tức khi người sử dụngchưa gõ xong từ khóa Còn với Google Maps, mọi người có thể theo dõi những thayđổi, xê dịch, kéo thả bản đồ như trên môi trường desktop Google Suggest và GoogleMaps là hai ví dụ nổi bật về phương pháp ứng dụng web thế hệ mới Hãng dịch vụ tìmkiếm hàng đầu thế giới đã đầu tư rất nhiều vào việc phát triển AJAX Hầu như mọichương trình họ giới thiệu gần đây, từ Orkut, Gmail đến phiên bản thử nghiệm GoogleGroups, đều là những ứng dụng AJAX

Những dự án trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đanghiện diện ngay trong thế giới thực, từ mô hình rất đơn giản như Google Suggest đếntinh vi và phức tạp như Google Maps

Tuy vậy, Ajax chưa thể thực hiện tất cả mọi thứ Những ứng dụng phụ thuộc nhiềuvào máy tính cố định như Photoshop của Adobe sẽ không xuất hiện sớm trên trìnhduyệt Ngay cả Google cũng phải tạo một phần mềm bản đồ trên desktop (GoogleEarth) và yêu cầu tải chương trình về để có thể hiển thị hình ảnh 3D và thực hiện một

số tính năng cải tiến khác Hơn nữa, ứng dụng web đòi hỏi phải liên tục kết nối vớiInternet, khiến công việc trên sẽ trở nên khó khăn nếu bị gián đoạn

CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX

1 Đối tượng XMLHttpRequest

Yếu tố then chốt trong công nghệ Ajax là đối tượng XMLHttpRequest

Tất cả các trình duyệt ngày nay (IE7+, Firefox, Chrome, Safari, and Opera) đều có một đối tượng được xây dựng sẵn (XMLHttpRequest) hỗ trợ công nghệ này

Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với server Với công nghệ này, một phần của trang web sẽ được cập nhật mà không phải tải lại toàn bộ trang

Cú pháp cho việc tạo một đối tượng XMLHttpRequest:

2 Các phương thức của đối tượng XMLHttpRequest

Để gửi một request tới server, chúng ta sử dụng hai phương thức là open() và send() của đối tượng XMLHttpRequest

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

method method: có hai loại là GET và POST

GET thì đơn giản và nhanh hơn POST, và nó được sử dụng trong hầu hết các trường hợp Tuy nhiên ta sử dụng POST request khi mà:

 Gửi một lượng lớn dữ liệu lên server (POST không giới hạnkích thước dữ liệu)

 Gửi đi thông tin trên một form nhập liệu người dùng (POSTthì mạnh và bảo mật hơn là GET)

url Đặc tả vị trí của file trên server

File này có thể là bất kì loại nào, txt hay xml hay là một file mã kịch bản asp hay php

Với AJAX, ta không phải đợi trả lời từ server , thay vào đó là:

 Thực hiện hay những đoạn mã khác trong khi đợi response

từ server

 Giải quyết ngay với response khi mà nó đã ở trạng thái sẵn sàng

chỉ được sử dụng cho request dạng POST

Một GET request đơn giản:

Để POST dữ liệu như một form HTML, ta thêm một HTTP header bằng phương thức

setRequestHeader() Rồi đặc tả dữ liệu muốn gửi đi bằng phương thức send():

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)

Thêm HTTP headers vào request

header: đặc tả tên header value: đặc tả giá trị header

3 Các thuộc tính của đối tượng XMLHttpRequest

Để nhận phản hồi từ server, ta sử dụng hai thuộc tính responseText hoặc responseXML của đối tượng XMLHttpRequest

responseText nhận dữ liệu phản hồi là một string

responseXML Nhận dữ liệu phản hồi là một tài liệu XML

3.1 Thuộc tính responseText

Nếu phản hồi từ server không phải là một tài liệu XML, ta sử dụng thuộc tính

responseText Thuộc tính responseText trả về một chuỗi kí tự nhận được từ server.document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ví dụ:

Khi nút được click, hàm changeContent() được kích hoạt với tham

số text file.txt , nội dung file text file.txt sẽ được đọc ra và thay thế vào vị trí ô text trêntrình duyệt

Nếu phản hồi từ server là một tài liệu XML, ta sử dụng thuộc tính responseXML

(nhận thông tin từ file cd_catalog.xml và hiện lên trình duyệt)

Khi một request được gửi tới server, khi đó thì server sẽ phản hồi lại (response), điều chúng ta muốn là thực hiện một vài hành động dựa trên response này Ta sử dụng 3

thuộc tính quan trọng của đối tượng XMLHttpRequest Đó là : onreadystatechange,

readyState và status

Ví dụ: Ajax nhận dữ liệu từ một file XML

Khi nút được nhấn, nó gọi hàm loadXMLDoc() với tham số xml file.xml,

hàm này sẽ đọc nội dung của tài liệu xml file.xml, bóc tách nội dung và đẩy vào một bảng rồi hiện lên trình duyệt

Nội dung file ajax_test2.xml

Lưu trữ trạng thái của XMLHttpRequest

Có 5 trạng thái của readyState

0: request chưa đượckhởi tạo

1: kết nối tới server được thiết lập

2: nhận được request

3: đang tiến hành xử lý request

4: request đã hoàn thành và response ở trạng thái sẵn sàng

3.5 Thuộc tính status

200: "OK"

404: Page not found

Ví dụ sau đây sẽ hiện lên trình duyệt dữ liệu trả về từ server khi readyState chuyển

trạng thái sang 4, và status là 200

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

Sau đây là một ví dụ về việc sử dụng Ajax phối hợp với PHP

Chú ý là site này bắt buộc phải chạy trên webserver, nếu sử dụng WampServer hay Appserv, hãy copy site này vào thư mục www

Khi ta gõ một vài chữ cái trong ô text box, sự kiện onkeyup sẽ kích hoạt hàm

showHint(), hàm này có gọi ra file suggestion.php với param tương ứng, để lấy nội dung rồi điền vào Suggestions trên trình duyệt

Nội dung hàm showHint()

//lookup all hints from array if length of q>0

// Set output to "no suggestion" if no hint were found

// or to the correct values

Kết quả khi ta ấn vào một phím bất kì

Khi ấn phím e

Khi ấn phím a

CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN GIẢN SỬ DỤNG CÔNG NGHỆ AJAX

1 Thiết kế ứng dụng từ điển trực tuyến với công nghệ AJAX

Website được lưu trong cùng thư mục với bản tài liệu này, hãy copy vào thư mục htdocs trên web server (hay thư mục www nếu cài đặt Appserv hoặc WampServer), hoặc có thể truy cập website tại http://deancnttk49a.tk

Sau đây là giao diện và các chức năng của website

Tra từ đã có trong Cơ sở dữ liệu

Với một từ chưa có trong Cơ sở dữ liệu, ta thêm từ đó bằng cách nhấn vào chức năng Thêm từ

Nếu suôn sẻ, việc thêm từ sẽ thành công

Nếu từ này đã có trong Cơ sở dữ liệu, việc thêm từ sẽ thất bại

Tra từ sau khi đã thêm

2 Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion)

Khi gõ một từ khóa, các trang web được gợi ý sẽ được hiện ra

Khi gõ vào từ khóa css

Khi gõ vào từ khóa html

CHƯƠNG IV:TỔNG KẾT, ĐÁNH GIÁ

Để đánh giá tốc độ của AJAX so với ứng dụng web truyền thống, ta cần tính toán tốc

độ thực thi đến khi trả về kết quả của trang web có ứng dụng công nghệ AJAX, rồi so sánh với tốc độ của trang web không ứng dụng công nghệ này

Trước tiên là xây dựng một ứng dụng web truyền thống, ta viết lại ứng dụng tra từ

điển đã có ở chương trước, xây dựng lại website bằng mã PHP.

Hình dưới đây là giao diện của website

Để đo thời gian hoàn thành tải trang sau mỗi lần tra từ, ta đặt 2 mốc thời gian là t1 và

t2 (t1 là khi nhấn nút tra từ, t2 là khi trang đã được tải xong), thời gian tra từ của

website được tính bằng t2 – t1 và được hiện ra ngay trên trang web (xem hình trên)

Tiếp theo, ta thiết kế lại website này có ứng dụng công nghệ AJAX

Thời gian hoàn thành tra từ được tính bằng t2 – t1 (với t1 là thời điểm khi bắt đầu

nhấn nút tra từ, t2 là lúc kết quả được AJAX tải về và điền vào trang web), thời gian

tra từ này được hiện ra ngay trên trang web (xem hình trên)

Để đánh giá tổng quan tốc độ thực hiện các truy vấn trên hai website sử dụng hai côngnghệ khác nhau này, ta thống kê thời gian tra từ ở mỗi site, bảng kết quả thu được nhưsau:

Thử nghiệm trên trình duyệt IE8

Không sử dụng Ajax Có sử dụng Công nghệ AJAX

Tra các từ Thời gian (ms) Thời gian (ms)

10 House 2372 1560

tổng thời gian 41674 16665 tốc độ trung bình 3788.5 1515

tỉ lệ chênh lệch tốc độ 2.50

Thử nghiệm trên trình duyệt Firefox 3.6

Không sử dụng Ajax Có sử dụng Công nghệ AJAX

Tra các từ Thời gian (ms) Thời gian (ms)

tỉ lệ chênh lệch tốc độ 1.51

Trên đây là bảng tổng kết thời gian tra các từ ở hai trang web, ta thấy rằng, website sử dụng công nghệ AJAX có tốc độ nhanh hơn hẳn website không ứng dụng công nghệ này

Trên trình duyệt IE8 website AJAX có tốc độ nhanh hơn là 2.5 lần (*)

Trên trình duyệt Firefox 3.6 tốc độ nhanh hơn là 1.5 lần (*)

(*) chỉ mang tính ước lượng, có thể khác trên các máy tính khác

Điều này làm giảm thời gian người dùng phải chờ đợi, giúp tăng tốc ứng dụng web, tiết kiệm chi phí và thông lượng đường truyền cho người sử dụng

Lưu ý: