Báo cáo tìm hiểu công nghệ Ajax

Báo cáo tìm hiểu công nghệ Ajax

z

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

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)

Đề tài:

TÌM HIỂU CÔNG NGHỆ AJAX

Giảng viên hướng dẫn:

Sinh viên thực hiện:

Trần Phan Thanh

Lê Văn Đảo Lớp: Công Nghệ Thông Tin 12150301

Mục lục

LỜI NÓI ĐẦU 3

CHƯƠ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 XMLHttpRequest 7

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 ASP.NET AJAX Control Toolkit 27

2 jQuery 30

TÀI LIỆU THAM KHẢO 32

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

Trần Phan Thanh

Lê Văn Đảo

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 Mozilla1.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ạn kí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 (POST thì 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

2.2 Phương thức send()

Phương thức được sử dụng để gửi yêu cầu tới server

Cú pháp:

send(string)

Miêu tả:

string Chuỗi các giá trị truyền lên server

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

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

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)

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ế thêm, xóa sử dụng Ajax, Mysql và Php

Thêm nội dung vào CSDL

Cơ sở dữ liệu sau khi thêm

Xóa dữ liệu chỉ cận click vào dấu X

Kết quả xóa nội dung

2 Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) sử dụng Ajax, Php và Mysql

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

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

CSDL của trang tìm kiếm

3 Thiết kế ứng dụng Web Chat sử dụng Ajax, Php và Mysql

Giao diện chính

CSDL gồm 2 bảng

webchat_lines

webchat_users

Đăng nhập vào để chat

Sauk khi login

CSDL lưu nội dung chat

- Các 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)

PHỤ MỤC: GIỚI THIỆU CÁC TOOLKIT HỖ TRỢ

AJAX TRONG VIỆC THIẾT KẾ WEB ĐỘNG

1 ASP.NET AJAX Control Toolkit

1.1 ASP.NET AJAX Control Toolkit là gì?

ASP.NET AJAX Control Toolkit là một dự án mã nguồn mở được xây dựng trên nền tảng Microsoft ASP.NET AJAX framework, đây là nỗ lực lớn giữa Microsoft và cộngđồng sử dụng ASP.NET Ajax để cung cấp một nền tảng vững mạnh với khả năng chỉnh sửa, sử dụng lại, mở rộng cao Với hàng loạt những công cụ và cũng như một loạt những công cụ cho phép dùng từ cửa sổ công cụ trong Viusal Studio, AACT cho phép tạo ra sự tương tác mạnh mẽ trong môi trường web

1.2 Download và cài đặt AJAX Control Toolkit

AJAX Control Toolkit chứa hơn 30 điều khiển cho phép bạn tạo cho trang web của bạn tính tương tác mạnh mẽ và dễ dàng nhất

Trên trình duyệt, gõ vào địa chỉ sau: http://AjaxControlToolkit.CodePlex.com

Click vào Download (xem hình 1) để download phiên bản mới nhất của bộ công cụ này

Hình 1: Tải về AJAX Control Toolkit

Sau khi tải xong, ta được một file nén dạng zip là:

AjaxControlToolkit.Binary.NET35.zip

Thêm AJAX Control Toolkit vào Toolbox

Đầu tiên, ta thêm một AJAX Control Toolkit tab vào trong toolbox Thực hiện theo các bước sau:

• Tạo một project ASP.NET Website

mới bằng cách click vào menu File,

chọn New Website Click đúp chuột

vào Default.aspx trong cửa sổ

Solution Explorer để mở cửa sổ soạn

thảo

• Chuột phải vào phía dưới toolbox trên

tab General và chọn Add Tab (xem

hình 2).

• Nhập vào tên cho tab mới là AJAX

Control Toolkit

Hình 2: Thêm một tab mới

Tiếp theo, ta sẽ thêm các điều khiển AJAX Control Toolkit vào trong tab mới này Ta thực hiện theo các bước sau:

• Chuột phải vào phía dưới tab AJAX

Control Toolkit và lựa chọn menu

Choose Items (xem hình 3)

• Trỏ đến vị trí đã giải nén gói AJAX

Control Toolkit và thao tác chọn file

AjaxControlToolkit.dll

Hình 3: Chọn các control vào trong toolbox

Khi hoàn thành các bước trờn thỡ cỏc

control sẽ xuất hiện trong toolbox của bạn

2.2 Download và cài đặt jQuery

Để dùng jQuery trước tiên bạn phải truy cập vào trang web http://jquery.com/ Và

click vào Download để tải về gói jQuery, sau khi tải xong ta được file jquery.js

Copy file này vào thư mục chứa file html của bạn Trong phần mã html, ta thêm thẻ

<script> trỏ đến gói file jquery.js

<script type="text/javascript" src="jquery.js"></script>

Đoạn mã javascript sử dụng jQuery ta sẽ viết tiếp vào thẻ <script> tiếp theo