Tìm hiểu về AJAX và xây dựng Website có ứng dụng công nghệ AJAX

Tài liệu tham khảo kỹ thuật công nghệ, chuyên ngành tin học Tìm hiểu về AJAX và xây dựng Website có ứng dụng công nghệ AJAX

CHƯƠNG 1 : TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu về cơ sở thực tập

Công ty VDC-Net2E là công ty hàng đầu trong lĩnh vực cung cấp các dịch

vụ trực tuyến Công ty VDC-Net2E được thành lập bởi các sáng lập viên: Công

ty Điện toán và Truyền số liệu (VDC) trực thuộc Tổng Công ty Bưu chính Viễnthông Việt Nam, Công ty TNHH Kalet, Công ty TNHH Thiết bị bảo vệ và Điện

tử tin học Việt Anh và Công ty Cổ phần Điện tử, Công nghiệp và Hoá Chất ViệtNam

Các lĩnh vực hoạt động chính của Công ty bao gồm: + Dịch vụ Giải trítrực tuyến

+ Dịch vụ Gia tăng giá trị trên mạng Internet

+ Thương mại điện tử

+ Dịch vụ tư vấn và thiết kế các phần mềm máy tính …

Công ty VDC- Net2E đã và đang phát hành 2 sản phẩm giải trí trực tuyến,game online :

+ Con đường tơ lụa (www.conduongtolua.com.vn)

+ Ongame – Thiên đường giải trí (www.ongame.com.vn), cổng gameportal số 1 tại Việt nam hiện nay

Silkroad luôn được coi là những bước đột phá trong làng Game OnlineHàn Quốc khi được công bố năm 2004

Các game thủ yêu thích Silk Road không chỉ vì đồ hoạ đẹp, cách chơi hay

mà còn chứa đựng những giá trị về văn hoá và lịch sử thế giới Chính vì thế màtrong năm 2005, game này đã liên tiếp đoạt 2 giải thưởng Nội dung điện tử xuấtsắc của Bộ Thông tin - Viễn thông Hàn Quốc (9/2005) và Giải Công nghệ vàSáng tạo trong liên hoan Game Hàn Quốc do Bộ Du lịch - Thông tin Hàn Quốc

tổ chức (10/2005)

Mục tiêu của VDC- Net2E là sẽ trở thành công ty hàng đầu trong lĩnh vựcgiải trí trực tuyến, chiếm lĩnh thị phần học tập và giải trí trực tuyến trong nước

và hội nhập Quốc tế

Công Ty: Công ty VDC-Net2E

Loại hình công ty: Công ty cổ phần

Địa chỉ: Nhà B1 – DN 13 đường Nguyễn Khánh Toàn – Quan Hoa Cầu Giấy - Hà Nội ( Nguyễn Phong Sắc kéo dài )

-Quận Huyện: Cầu giấy

1.2 Giới thiệu về đề tài :

Đề tài : Tìm hiểu về AJAX và xây dựng Website có ứng dụng công nghệ AJAX.

1.2.1 Lý do chọn đề tài

Trong thời đại bùng nổ thông tin hiện tại với sự phát triển nhanh chóng vàvượt bậc của truyền thông đa phương tiện Internet gần như là mái nhà chungcủa thế giới , một thế giới thứ 2 Đi liền Internet là sự phát triển của các côngnghệ Web Ban đầu các ứng dụng Web chỉ mang tính chất tham khảo kiến thứckhông chú trọng tới hình thức cũng như giao tiếp người dùng Khi internet pháttriển mạnh mẽ cũng là lúc kèm theo các nhu cầu mới về các ứng dụng Web.Người ta đòi hỏi ở Web App ngày càng nhanh nhậy hơn thân thiện hơn , trựcquan hơn

Quá trình phát triển các công nghệ trong ứng dụng Web :

Ban đầu, các trang Web là tĩnh; người dùng gửi yêu cầu một tài nguyên nào đó,

và server sẽ trả về tài nguyên đó Các trang Web không có gì hơn là một văn bảnđược định dạng và phân tán Đối với các trình duyệt, thì các trang Web tĩnhkhông phải là các vấn đề khó khăn, và trang Web lúc đầu chỉ để thông tin về các

sự kiện, địa chỉ, hay lịch làm việc qua Internet mà thôi, chưa có sự tương tác quacác trang Web Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML

đơn giản và dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến và cơ bản Tuynhiên, không lâu sau đó, nhu cầu về các trang Web động, có sự tương tác ngàymột tăng, chính vì thế sự ra đời các công nghệ Web động là một điều tất yếu.Sau đây là một số công nghệ Web động cơ bản:

CGI

Giải pháp đầu tiên để làm các trang Web động là Common Gateway Interface(CGI) CGI cho phép tạo các chương trình chạy khi người dùng gửi các yêu cầu.Giả sử khi cần hiển thị các các mục để bán trên Web site – với một CGI script ta

có thể truy nhập cơ sở dữ liệu sản phẩm và hiển thị kết quả Sử dụng các formHTML đơn giản và các CGI script, có thể tạo các “cửa hàng” ảo cho phép bánsản phẩm cho khách hàng qua một trình duyệt CGI script có thể được viết bằngmột số ngôn ngữ từ Perl cho đến Visual Basic Tuy nhiên, CGI không phải làcách an toàn cho các trang Web động Với CGI, người khác có thể chạy chươngtrình trên hệ thống Vì thế có thể chạy các chương trình không mong muốn gâytổn hại hệ thống Nhưng dù vậy, cho đến hôm nay thì CGI vẫn còn được sửdụng

Applet

Tháng 5/1995, John Gage của hãng Sun và Andressen (nay thuộc NetscapeCommunications Corporation) đã công bố một ngôn ngữ lập trình mới có tênJava Netscape Navigator đã hỗ trợ ngôn ngữ mới này, và một con đường mớicho các trang Web động được mở ra, kỷ nguyên của applet bắt đầu

Applet cho phép các nhà phát triển viết các ứng dụng nhỏ nhúng vào trang Web.Khi người dùng sử dụng một trình duyệt hỗ trợ Java, họ có thể chạy các applettrong trình duyệt trên nền máy ảo Java Virtual Machine (JVM) Dù rằng appletlàm được nhiều điều song nó cũng có một số nhược điểm: thường bị chặn bởiviệc đọc và ghi các file hệ thống, không thể tải các thư viện, hoặc đôi khi khôngthể thực thi trên phía client Bù lại những hạn chế trên, applet được chạy trên

một mô hình bảo mật kiểu sandbox bảo vệ người dùng khỏi các đoạn mã nguyhiểm.

Có những lúc applet được sử dụng rất nhiều, nhưng nó cũng có những vấn đềnảy sinh: đó là sự phụ thuộc vào máy ảo Java JVM, các applet chỉ thực thi khi

có môi trường thích hợp được cài đặt phía client, hơn nữa tốc độ của các applet

là tương đối chậm vì thế applet không phải là giải pháp tối ưu cho Web động

Việc người ta coi các trang như là một đối tượng đã làm nảy sinh một khái niệmmới gọi là Document Object Model (DOM) Lúc đầu thì JavaScript và DOM cómột sự kết hợp chặt chẽ nhưng sau đó chúng được phân tách DOM hoàn toàn làcách biểu diễn hướng đối tượng của trang Web và nó có thể được sửa đổi vớicác ngôn ngữ kịch bản bất kỳ như JavaScript hay VBScript

Tổ chức World Wide Web Consortium (W3C) đã chuẩn hóa DOM, trong khiEuropean Computer Manufacturers Association (ECMA) phê duyệt JavaScriptdưới dạng đặc tả ECMAScript

JSP/Servlet, ASP và PHP

Cùng với Java, Sun đồng thời đưa ra một công nghệ mới gọi là servlet Các đoạn

mã Java sẽ không chạy phía client như với applet; chúng sẽ được chạy trên mộtứng dụng phía server Servlet cũng đồng thời phục vụ các CGI script Servlet là

một bước tiến lớn, nó đưa ra một thư viện hàm API trên Java và một thư việnhoàn chỉnh để thao tác trên giao thức HTTP JavaServer Page (JSP) là một côngnghệ lập trình Web của Sun, cùng với nó là một công nghệ khác của Microsoft -Active Server Pages (ASP), JSP là công nghệ đòi hỏi một trình chủ hiểu đượcJava.Microsoft đã nghiên cứu các nhược điểm của servlet và tạo ra ASP dễ dànghơn để thiết kế các trang web động Microsoft thêm các bộ công cụ rất mạnh và

sự tích hợp rất hoàn hảo với các Web server JSP và ASP có những nét tươngđương vì chúng đều được thiết kế để phân tách qua trình xử lí khỏi quá trìnhbiểu diễn Có sự khác biệt về kỹ thuật, song cả hai đều cho phép các nhà thiết kếWeb tập trung vào cách bố trí (layout) trong khi các nhà phát triển phần mềm thìtập trung vào các kỹ thuật lập trình logic

Tất nhiên Microsoft và Sun không độc quyền ở các giải pháp phía server Còn

có các công nghệ khác, trong đó phải kể đến là PHP (Hypertext Preprocessor)cho tới Cold Fusion Các công nghệ này cung cấp các bộ công cụ rất mạnh chocác nhà phát triển

Flash

Năm 1996, FutureWave đã đưa ra sản phẩm FutureSplash Animator Sau đóFutureWave thuộc sở hữu của Macromedia, và công ty này đưa ra sản phẩmFlash Flash cho phép các nhà thiết kế tạo các ứng dụng hoạt họa và linh động.Flash không đòi hỏi các kỹ năng lập trình cao cấp và rất dễ học Cũng giống nhưcác nhiều giải pháp khác Flash yêu cầu phần mềm phía client Chẳng hạn nhưgói Shockwave Player plug-in có thể được tích hợp trong một số hệ điều hànhhay trình duyệt

DHTML

Khi Microsoft và Netscape đưa ra các version 4 của các trình duyệt của họ, thìcác nhà phát triển Web có một lựa chọn mới: Dynamic HTML (DHTML).DHTML không phải là một chuẩn của W3C; nó giống một bộ công cụ thương

mại hơn Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets(CSS), JavaScript, và DOM Tập hợp các công nghệ trên cho phép các nhà pháptriển sửa đổi nội dung và cấu trúc của một trang Web một cách nhanh chóng.Tuy nhiên, DHTML yêu cầu sự hỗ trợ từ các trình duyệt Mặc dù cả InternetExplorer và Netscape hỗ trợ DHTML, nhưng các thể hiện của chúng là khácnhau, các nhà phát triển cần phải biết được loại trình duyệt nào mà phía clientdùng DHTML thật sự là một bước tiến mới, nhưng nó vẫn cần một sự qui chuẩn

để phát triển Hiện nay DHTML vẫn đang trên con đường phát triển mạnh

XML

Kể từ khi ra đời vào giữa năm 1990, eXtensible Markup Language (XML) củaW3C dẫn xuất của SGML đã trở nên rất phổ biến XML có mặt ở khắp nơi,Microsoft Office 12 cũng sẽ hỗ trợ định dạng file XML

Ngày nay chúng ta có rất nhiều dạng dẫn xuất của XML cho các ứng dụng Web(tất nhiên là có cả XHTML): XUL của Mozilla; XAMJ, một sản phẩm mãnguồn mở trên nền Java; MXML từ Macromedia; và XAML của Microsoft

Công nghệ Web thế hệ thứ hai – Web 2.0

Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có nhữngthay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sửdụng - hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham giađóng góp cho xã hội “ảo” chứ không chỉ “duyệt và xem”

Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ

“Web 2.0″ đang trở nên thịnh hành Thực chất, Web 2.0 có nghĩa là sử dụngweb đúng với bản chất và khả năng của nó

Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết nốicác nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin

hiệu quả Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũngnhằm mục tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lênInternet và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-Lee viết bao gồm cả công cụ soạn thảo trang web) Tuy nhiên, sau đó web đãphát triển theo hướng hơi khác mục tiêu ban đầu.

Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0) chủyếu gồm các website “đóng” của các hãng thông tấn hay các công ty nhằm mụcđích tiếp cận độc giả hay khách hàng hiệu quả hơn Nó là phương tiện phát tinhơn là phương tiện chia sẻ thông tin Chỉ đến gần đây, với sự xuất hiện củanhiều kỹ thuật mới như blog (hay weblog), wiki… web mới trở nên có tính cộngđồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sựcủa nó

Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của O’ReillyMedia, đưa ra tại hội thảo Web 2.0 lần thứ nhất do O’Reilly Media vàMediaLive International tổ chức vào tháng 10/2004 Dougherty không đưa rađịnh nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0:

“DoubleClick là Web 1.0; Google AdSense là Web 2.0 Ofoto là Web 1.0;Flickr là Web 2.0 Britannica Online là Web 1.0; Wikipedia là Web 2.0 v.v…”.Sau đó Tim O’Reilly, chủ tịch kiêm giám đốc điều hành O’Reilly Media, đã đúckết lại 7 đặc tính của Web 2.0:

1 Web có vai trò nền tảng, có thể chạy mọi ứng dụng

2 Tập hợp trí tuệ cộng đồng

3 Dữ liệu có vai trò then chốt

4 Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật khôngngừng

5 Phát triển ứng dụng dễ dàng và nhanh chóng

6 Phần mềm có thể chạy trên nhiều thiết bị

7 Giao diện ứng dụng phong phú

Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trònền tảng ứng dụng Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.Chính vì vậy lí do em chọn đề tài này là để nghiên cứu một công nghệ Web 2.0nổi bật nhất hiện nay, áp dụng nó vào bài toán thực tế khi ta xây dựng mộtwebsite , đi từ những viên gạch đầu tiên

1.2.2 Mục tiêu và yêu cầu của đề tài

Xây dựng 1 website nhằm giới thiệu, tìm kiếm tra cứu thông tin và chia sẻthông tin kiến thức , cũng như viết lưu bút Từ đó cho phép mọi người có thể thểhiện cái tôi cá nhân của mình

Xây dựng 1 website có đầy đủ hình ảnh và thông tin

Xây dựng website có ứng dụng công nghệ AJAX vào quản lí và tra cứu

Đảm bảo tính an toàn và bảo mật

Đảm bảo thân thiện và dễ sử dụng với mọi người,

CHƯƠNG 2 : TỔNG QUAN VỀ AJAX.

2.1 Khái niệm về AJAX, công nghệ AJAX

2.1.1 Mở đầu

Ban đầu khi người ta làm quen với mạng internet đều bằng hình thức thư điện tử, và World Wide Web Web từ thủa sơ khai chỉ là Web tĩnh Người dùng gửiyêu cầu tới một máy chủ và máy chủ sẽ trả về thông tin có sẵn trên nó mà không

có bất kì tương tác lựa chọn nào kết nối của người xem thông tin và nhà pháthành tin tức Đối với các trình duyệt một trang Web tĩnh được thể hiện hết sứcđơn giản và cơ bản Chỉ với một mục đích là tra cứu thông tin, tham khảo tàiliệu Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML (HyperText Markup Language), ngôn ngữ đánh dấu siêu văn bản HTML rất đơn giản

và dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến và cơ bản.115

Web động ra đời cho phép các nhà phát triển , các lập trình viên nhanh chóng sửdụng nó như một công cụ để tương tác với bên người dùng Web động với chứcnăng tương tác hai chiều giữa người viết và người đọc đã tạo nên một làn sóngmới, mở ra một tương lai đầy hứa hẹn cho Internet Nhiều người đã hi vọngrằng các ứng dụng Web sẽ phát triển thay các phần mềm chạy độc lập trên máy

tính client đơn lẻ ( các ứng dụng offline PC ) Quả thật, với sự phát triển chóng

mặt của mạng Internet cùng với những ưu điểm của các ứng dụng Web (truy cậptại mọi nơi, không cần nâng cấp nhiều về phía máy sử dụng,…), tương lai củacác phần mềm chắc chắn sẽ gắn chặt với các ứng dụng Web, nếu không muốnnói là có thể sẽ bị thay thế Tuy nhiên, cho đến giờ, hy vọng đó vẫn chưa đượcđáp ứng một cách triệt để bởi một số điểm đặc trưng của ứng dụng Web lạichính là những giới hạn tưởng chừng như không thể vượt qua nổi Đó chính làcách thức mà người dùng và ứng dụng Web tương tác với nhau

2.1.3 AJAX là gì ?

JavaScript, ngôn ngữ lập trình chạy trên trình duyệt đã quá quen thuộc vớithế giới web kể từ khi Netscape phát minh ra nó Sự phát triển của công nghệ vànhu cầu người sử dụng ngày càng cao buộc các nhà phát triển tạo ra một kĩ thuậtkhác cho phép xử lý các tác vụ phức tạp hơn Tháng 2/2005, trên Internet bắtđầu lan truyền thuật ngữ Ajax như là một kỹ thuật mới cho ứng dụng web.Những thành công vang dội và sự hấp dẫn kì lạ của Gmail, Google Suggest vàGoogle Maps đã khiến cho Ajax được chú ý một cách đặc biệt

Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết hợphai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:

• Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang

• Phân tách và làm việc với XML

Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest Các

kĩ sư của dự án Mozilla bắt đầu hỗ trợ tính năng này ở bản Mozilla 1.0 (vàNetscape 7) Apple cũng đã thực hiện một tính năng tương tự kể từ Safari 1.2

Ajax là sự phối hợp một loạt các công nghệ đang thu hút sự quan tâm của giớicông nghiệp trong thời gian gần đây Đó là:

• Trình bày trang web dựa trên XHTML và CSS, các chuẩn của W3C, được

Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rấttốt;

• Biểu diễn động và tương tác sử dụng Document Object Model, chuẩn của

W3C;

• Trao đổi và xử lý dữ liệu dùng XML và XSLT, chuẩn của W3C;

• Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest;

• Dùng JavaScript để liên kết mọi thứ lại với nhau JavaScript ở đây làECMAScript, chuẩn của ECMA, không phải là JScript của Microsoft

Ở các ứng dụng web truyền thống, client sẽ gửi HTTP Request đến webserver và web server sẽ gửi trả response chứa các thông tin dưới dạng HTML và

CSS 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ầu gửi resquest và nhận response do Ajax Engine thực hiện Thay vì trả

dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửitrả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóathành XHTML+CSS cho trình duyệt hiển thị Việc này được thực hiện trênclient nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kếtquả 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ợpcủa các công nghệ web như CSS và XHTML làm cho việc trình bày giao diệntrang 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

Ứng dụng Web truyền thông - AJAX

Mô hình cổ điển :

và AJAX

Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAXtrình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người dùngmuốn thay đổi Điều này giúp cho ứng dụng Web phản hồi nhanh hơn, thôngminh hơn

Ngoài ra, điểm đặc biệ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ìnhtới server và quay lại với công việc của mình mà không cần chờ trả lời Khi nàoserver xử lý xong yêu cầu của phía người dù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 đổi cần thiết Vậy tất cả cơ chế nàyhoạt động thực sự thế nào? AJAX cho phép tạo ra một AJAX Engine nằm giữagiao tiếp này Khi đó, các yêu cầu gửi (resquest) và nhận (response) do AJAXEngine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp chotrình duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX Engine sẽtiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiểnthị

Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thờingườ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ạitrang Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML làmcho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dunglượ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

2.1.3 Một số ứng dụng AJAX

Atlas: Ajax kiểu Microsoft

Công nghệ mới của Microsoft tích hợp thư viện script phía client với nền tảngphía server của ASP.NET 2.0, hứa hẹn cung cấp nền tảng phát triển toàn diệnhơn và đơn giản hoá việc phát triển ứng dụng web kiểu Ajax.

Bản đồ trực tuyến

Các trang web bản đồ biết được sở thích của bạn là gì cũng như bạn làm gì.Nhiều dịch vụ bản đồ trực tuyến mới có được thông tin đó bằng cách cho bạnchia sẻ kinh nghiệm và suy nghĩ về những địa điểm bạn yêu thích - trong khuvực bạn sống hoặc bên phía kia của địa cầu Ta cùng xem 5 dịch vụ phổ biến:Flagr, 43 Places, Platial, Plazes và Wayfaring

Từ GMail

Các ứng dụng web sẽ như thế nào nếu bạn không kết nối được Internet? Mụcđích của API Gears mà Google đưa ra là để biến dữ liệu trực tuyến luôn sẵn cómọi lúc, mọi nơi

Các ứng dụng web sẽ như thế nào nếu bạn không kết nối được Internet? Mụcđích của API Gears mà Google đưa ra là để biến dữ liệu trực tuyến luôn sẵn cómọi lúc, mọi nơi.

Nếu dùng ứng dụng web, bạn sẽ vấp phải một trở ngại chung: khi không nốimạng (offline) thì bạn không thể lấy được dữ liệu Nhưng một số ứng dụng đangxoay chuyển vấn đề này

Google tung ra Gears kèm với ứng dụng đầu tiên để áp dụng, đó là một phiênbản Google Reader mới cho bạn đọc tin RSS offline Các công ty khác cũng bắtđầu sử dụng framework Gears; ứng dụng đầu tiên mà chúng tôi tìm thấy được làcông cụ Remember the Milk để theo dõi khối lượng công việc trực tuyến(rememberthemilk.com)

Cả Google Reader và Remember the Milk đều đưa ra phương thức hỗ trợ offlineđơn giản như nhau Bạn chỉ việc nhấn vào một biểu tượng mũi tên màu xanh látrên thanh công cụ ở đầu màn hình để tải về hoặc đệm dữ liệu mà bạn cần làmviệc offline Một khi đã đồng bộ dữ liệu, bạn có thể ngắt kết nối và vẫn tiếp tụclàm việc, thậm chí nếu bạn đóng và mở lại trình duyệt Khi có kết nối trở lại,bạn nhấn vào biểu tượng mũi tên màu xanh dương ở cùng vị trí cũ và nhữngthay đổi của bạn ánh xạ lại vào bản trực tuyến

Milk cũng gặp vấn đề tương tự Xóa một tác vụ ở chế độ offline thì bạn không

có cách nào để phục hồi lại tác vụ đó mặc dù bạn có thể dễ dàng undo hànhđộng đó ở chế độ online

Dù sao đi nữa, khi chạy offline với một ứng dụng Gears thì bạn nên lên kế hoạch

sử dụng Bạn đừng hy vọng có thể bắt đầu công việc trong Reader mà không cókết nối ban đầu Với những ứng dụng Gears hiện thời bạn cần kết nối ban đầu vàchuyển tất cả chúng sang chế độ offline trước khi ngắt kết nối Đây có thể là tùychọn tốt để đồng bộ tự động bất cứ khi nào bạn online

Cho đến web Mail mạnh mẽ :

YAHOO MAIL

Yahoo Mail đưa ra những tính năng giống với một chương trình thư điện tử trênmáy tính, ví dụ có đầy đủ các phím tắt quen thuộc và khả năng dùng phím và đểchọn cùng lúc nhiều thư Dù chỉ là bản thử nghiệm beta nhưng ứng dụng nàykhá đẹp mắt và mạnh Giao diện với vùng 3 cửa sổ tương tự như OutlookExpress của Microsoft và Thunderbird của Mozilla

Yahoo Mail cũng bắt chước tính năng tab có trong nhiều trình duyệt, cho phép

mở nhiều thư trong một cửa sổ duy nhất và chuyển qua lại giữa chúng mà khôngcần mở thêm cửa sổ mới Bạn cũng có thể nhanh chóng duyệt chi tiết hộp thưđến Inbox nhờ vào thanh cuộn quen thuộc hoặc phím

Công cụ tìm kiếm của Yahoo Mail khá ấn tượng, "sờ" đến cả tập tin đính kèmtrong thư và hiển thị một đoạn nhỏ tài liệu trong đó có từ mà bạn tìm YahooMail cũng tương tác một cách hợp lý với nút Back trên trình duyệt – đối với cácứng dụng Ajax đây thường là điểm rắc rối vì khi nhấn nút này, chương trình liêntục cập nhật một trang web Ngược lại, Gmail giải quyết vấn đề này bằng cách

vô hiệu hóa nút Back, trong khi Zimbra cảnh báo nếu sử dụng nút này thì sẽ bị

"đẩy" ra khỏi chương trình

WINDOWS LIVE MAIL

Nếu không quen với các ứng dụng thư điện tử trên máy tính thì Windows LiveMail của Microsoft có thể thích hợp với bạn, nhưng ứng dụng này có phần giốngvới bản nâng cấp dịch vụ Hotmail hơn là một chương trình mới hoàn chỉnh.Giống như Yahoo Mail, Live Mail cho phép thực hiện kéo thả thư và nhấn chuộtphải để in, chuyển tiếp và trả lời mà không cần mở chúng ra Live Mail tập trungvào các công cụ, cho phép người dùng thêm các biểu tượng vui (emotion), địnhdạng thư điện tử và cũng tích hợp tính năng lịch làm việc, chống thư rác và tínhnăng chống giả mạo địa chỉ

Microsoft nhấn mạnh đây vẫn chỉ là bản tiền thử nghiệm Trong bản beta kếtiếp, Microsoft hứa hẹn hộp thư đến Inbox sẽ có thêm thanh trượt, tính năngkiểm tra chính tả trực tiếp và trình đơn ngữ cảnh (nhấn phải chuột) được cải tiến

2.2 Các công nghệ sử dụng trong AJAX

2.2.1 HTML

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là "Ngôn ngữĐánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nêncác trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web.Được định nghĩa như là một ứng dụng đơn giản của SGML, vốn được sử dụngtrong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trởthành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duytrì Phiên bản mới nhất của nó hiện là HTML 4.01 Tuy nhiên, HTML hiệnkhông còn được phát triển tiếp Người ta đã thay thế nó bằng XHTML

Dùng HTML động hoặc Ajax, có thể được tạo ra và xử lý bởi số lượng lớn cáccông cụ, từ một chương trình soạn thảo văn bản đơn giản – bạn có thể gõ vàongay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYGphức tạp

HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nốivào mạng Internet Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị chochương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy Cácfile này thường được truyền đi trên mạng internet thông qua giao thức mạngHTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua mộttrình duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc vănbản của trang cho người sử dụng), phần mềm đọc email , hay một thiết bị khôngdây như một chiếc điện thoại di động.

Tạo lập trang Web = HTML là chỉ cần đánh văn bản của bạn vào rồi chèn thêmcác ký hiệu đánh dấu, gọi là thẻ có dạng như sau:

<TAG>văn bản chịu tác động</TAG> Phần thẻ là một mã (thường chỉ có mộthoặc hai chữ) xác định hiệu ứng mà bạn yêu cầu Ví dụ, cho thẻ nét đậm là <B>.Cho nên nếu bạn muốn câu “Tìm Hiểu AJAX” xuất hiện theo kiểu chữ đậm(bold), bạn phải đưa dòng sau đây vào tài liệu của mình:

<B>“Tìm Hiểu AJAX” </B>

Thẻ đầu tiên báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theobằng phông chữ đậm, liên tục cho đến thẻ <B> Dấu gạch chéo (/) xác định đó làthẻ kết thúc, và báo cho trình duyệt ngưng hiệu ứng đó

HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê, liên kết, và nhiều thứ nữa.

HTML động hay DHTML : (viết tắt tiếng Anh: Dynamic HTML) là một thể

hiện của việc tạo ra một trang web bằng cách kết hợp các thành phần: ngôn ngữđánh dấu HTML tĩnh, ngôn ngữ kịch bản máy khách (như là Javascript), vàngôn ngữ định dạng trình diễn Cascading Style Sheets và Document ObjectModel (DOM)

XHTML (viết tắt của tiếng Anh Extensible HyperText Markup Language,

"Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng") là một ngôn ngữ đánh dấu cócùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn XHTML 1.0 làKhuyến cáo của World Wide Web Consortium (W3C) vào ngày 26 tháng 2,2000

Về phương diện kĩ thuật, XHTML là một họ các kiểu tài liệu hiện tại và tươnglai cùng các mô đun nhằm tái tạo lại, mở rộng, thâu nạp HTML, tái cấu trúc lạidưới dạng XML Các dạng tài liệu thuộc họ XHTML tất cả đều dựa trên XML,

và được thiết kế để làm việc tuyệt đối với các trình đại diện người dùng hiểuXML XHTML là thế hệ kế tiếp HTML, và đã có một loại các đặc tả được pháttriển cho XHTML

Chúng ta sẽ bàn về nó sâu hơn trong phần XML

2.2.2 CSS

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là CascadingStyle Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằngngôn ngữ HTML và XHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng cóthể dùng cho XML, SVG, XUL v.v

Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium(W3C)

Thay vì đặt các thẻ qui định kiểu dáng cho văn bản HTML (hoặc XHTML) ngaytrong nội dung của nó, bạn nên sử dụng CSS

CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúcnhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí

Có thể định nghĩa nhiều style vào một thẻ HTML CSS cho phép đưa cácthông tin định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thểđược qui định ở trong chỉ một thẻ HTML, được qui định trong một trang webhoặc ở trong một file CSS bên ngoài

Thứ tự áp dụng các định dạng Như trên đã nói, có thể sử dụng nhiều cáchkhác nhau để làm CSS Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng chomột thẻ HTML? Theo một cách chung nhất ra có thể nói các style sẽ được "xếptầng" (cascade) Việc xếp tầng này tuân theo thứ tự ưu tiên giảm dần như sau:

* Inline Style (Style được qui định trong một thẻ HTML cụ thể)

* Internal Style (Style được qui định trong phần <HEAD> của một trangHTML)

* External Style (style được qui định trong file CSS ngoài)

* Browser Default (thiết lập mặc định của trình duyệt)

2.2.3 DOM - Document Object Model

DOM là chữ viết tắt từ tiếng Anh Document Object Model ("Mô hình Đối tượng

Tài liệu"), là một giao diện lập trình ứng dụng (API) Thường thường DOM, códạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu dạng HTML

và XML Mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trìnhhướng đối tượng để mô tả tài liệu

Ban đầu, chưa có chuẩn thống nhất nên các thành phần trong một tài liệu HTML

mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chươngtrình duyệt web thông qua JavaScript Điều này buộc World Wide WebConsortium (W3C) phải đưa ra một loạt các mô tả kĩ thuật về tiêu chuẩn choDOM để thống nhất mô hình này

Mặc dù một tài liệu hay văn bản có cấu trúc chặt chẽ (well-structured document)luôn luôn có thể được mô hình hóa bằng một cấu trúc dạng cây, DOM không cógiới hạn về cấu trúc dữ liệu của một tài liệu

Hầu hết các bộ phân tích XML (XML parsers) (ví dụ: Xerces) và bộ xử lí XSL(ví dụ: Xalan) đã được phát triển để sử dụng cấu trúc cây này Những hiện thựcnhư vậy đòi hỏi toàn bộ nội dụng của một văn bản phải được phân tích và lưutrong bộ nhớ Vì thế, DOM được sử dụng tốt nhất trong các ứng dụng mà trong

đó các thành phần của tài liệu có thể được truy xuất và thao tác một cách ngẫunhiên Với các ứng dụng dựa trên XML, bao gồm yêu cầu đọc/ghi có chọn lọccho mỗi lần phân tích (one-time selective read/write per parse), DOM cho thấyđược sự tối ưu về mặt bộ nhớ Trong các trường hợp đó thì giao diện lập trìnhứng dụng SAX trở nên rất tiện lợi về cả mặt tốc độ và bộ nhớ

Các phiên bản mô hình DOM được xếp theo cấp độ hay bậc (level) Hiện tại thì,bản chi tiết kĩ thuật hiện hành của DOM đang ở cấp độ 2 Tuy vậy một số ở bản

mô tả chi tiết kĩ thuật cấp độ 3 đang là khuyến khích sử dụng của W3C

Cấp độ 0

Bao gồm mọi chi tiết DOM theo qui định của từng nhà phát triển riêng biệttồn tại trước khi DOM cấp độ 1 ra đời Ví dụ: document.images,document.forms, document.layers, và document.all Chú ý: đây là mô tả chi tiết

kĩ thuật chính thức bởi W3C hơn là một tham khảo đến những thứ tồn tại trướckhi xảy ra quá trình chuẩn hóa

Cấp độ 1

Cách duyệt qua tài liệu (cấu trúc cây) của DOM (HTML và XML) và thao tácnội dung (bao gồm việc thêm thành phần) Các thành phần riêng cho HTMLcũng được đưa vào

2.2.4 XML HTTP REQUEST

Các ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khigửi yêu cầu đến server, điều này thường dẫn đến một sự ngắt quãng cho côngviệc của người dùng Vì thế yêu cầu đặt ra là làm cho các request của serverkhông đồng bộ và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời

từ server Giải pháp đầu tiên để giải quyết vấn đề này là dùng IFrame Cho đếngần đây, XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ vàhiệu quả

Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩnDOM mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trìnhduyệt Các đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript Cáctrình duyệt khác đều có thực thi các đối tượng trên có các chức năng tươngđương và các lời gọi hàm API

Mục đích chủ yếu của tối tượng XMLHttpRequest là cho phép Js chỉnh sửa lạicác yêu cầu HTTP và chuyển chúng tới server Những ứng dụng Web truyềnthông thường hoạt động đồng bộ, nghĩa là tương ứng với một sự kiện như mộtsubmit hoặc một siêu liên kết a href được click thì toàn bộ kết quả sẽ được trả ramột trang mới gồm cả các thành phần cũ và mới Nhưng trên hết tất cả mọithành phần đều phải load lại một lần nữa

XMLHttpRequest giải quyết khâu này bằng cách hoạt động ngầm sử lí requesttới server và trả về kết quả trong lúc đó người dùng vẫn có thể thấy được trangweb đang đọc Khi có được kết quả , javascript có chức năng thay đổi thànhphần người dùng đã tương tác để đưa ra một kết quả mới Các khâu hoạt độngtrên hoàn toàn không đồng bộ với một sự kiện Không những đợi response trả về

từ trang chủ người dùng còn có thể tiếp tục gửi các request khác tới trang chủ.Tất cả kết quả sẽ được js thay đổi cục bộ thành phần của trang web thông quacác hàm DOM bởi các kết quả được phân tích bởi bộ hàm XML DOM

Cụ thể như sau:

// Khởi tạo một đối tượng XMLHttpRequest

Var request = new XMLHttpRequest() ;

// XMLHttpRequest là một đối tượng trong các trình duyệt như Mozilla , Opera ,Chrome v.v…

Nhưng trong IE nó lại là một activeX Do vậy ta cần kiểm tra xem việc khởi tạo

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP");}

catch (e) { }}

Thử hình dung khi người khác sử dụng các đoạn mã Javascript của bạntrên site của họ, cũng như sử dụng tài nguyên của bạn Chúng ta hoàn toàn cóthể bị kiểm soát nếu không có anti-cross domain

Phương thức của đối tượng XMLHttpRequest

getAllResponseHeaders() Trả về header dạng chuỗi

getresponseHeader(x) Trả về header X dạng chuỗi

Open(method , url , a) Thể hiện phương thức request , url

header để gửi đi cùng với request

Xét một ví dụ gửi một yêu cầu tới server

Var name = “up”

Khi đã khởi tạo được một đối tượng XMLHttpRequest đặt là xhr

xhr.open(“GET” , “checkname.php?name=” + name , true )

xhr.send(null)

xhr.onreadystatechange = Tên hàm;

Đặc biệt các trình duyệt thông thường đều lưu trữ cache để tiết kiệm quá trìnhtải nạp Nhưng đối với Ajax thì đó là một khó khăn do vậy khi sử dụng Ajaxchúng ta cần ngắt bỏ cache của trình duyệt điều này có thể thể hiện bằng 3 cách.Dùng Pragma:no-cache hoặc Cache-Control: must-revalidate

1 setRequestHeader(“Pragma” , “no-cache”)

2 Trong file checkname.php có thể đặt hàm Header(“Pragma: no-cache”)

3 Đặt một request tring random cho URL

Onreadystatechange Dùng để đáp ứng một công việc nào đó

khi thuộc tính ReadyState thay đổireadyState Nhận 5 giá trị tương ứng với 5 trạng thái:

0 : Chưa được khởi tạo ( Uninitialized )

1 : Đang được nạp ( Loading )

2 : Đã nạp xong ( Loaded )

3 : Tương tác ( Interactive )

4 : Hoàn thành ( Complete )ResponseText Dữ liệu trả về dạng string thuần

StatusText Thông điệp trả về dạng chuỗi thông báo

kém thêm mã trạng thái HTTP Response

Hàm callback()

xhr.onreadystatechange = Tên hàm;

Ta vừa thực hiện gán một hàm sẽ liên tục được gọi khi thuộc tính readystatebiến đổi Hãy xem hàm này nên làm gì Đầu tiên, hàm cần kiểm tra trạng tháicủa request Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhậnđược response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp tục xử lý nó

Tiếp theo cần kiểm tra mã trạng thái của HTTP server response Tất cả

các mã có thể thàm khảo ở site của W3C Trong bài viết này, chúng ta

quan tâm đến response 200 (OK)

statusText ( status + description ) Mô tả

204 - No content Văn bản trống

301 - Moved Premanently Tài nguyên đã bị di chuyển

401 - Not Authorized Yêu cầu chưa được chứng thực

403 - Forbidden Từ chối đáp ứng

404 - Not Found Không tồn tại

408 - Request Timeout Yêu cầu không hoàn thành do vượt

quá thời gian kết nối cho phép

500 - Server Error Máy chủ gặp sự cố

Xhr.responseText Trả về kết quả dạng chuỗi

Ta hoàn toàn có thể xử lí chúng bằng các biểu thức chính qui ( RegularExpress )

Xhr.responseXML Trả về kết quả dạng XML

Một cách xử lí kết quả mạnh mẽ hơn là yêu cầu gửi về dưới dạng tài liệu XML

ta có thể phân tách kết quả bằng các hàm XML DOM

2.2.5 XML & Javascript

Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhịphân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trìnhduyệt Khi triển khai một ứng dụng JavaScript, ta đặt mã nguồn trên web server,

và mã nguồn này được truyền trực tiếp qua Internet tới web browser

Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán

và các tác vụ JavaScript cơ bản hỗ trợ các kiểu số - number, string, date vàtime, array, các biểu thức toán học được xử lí trong văn bản, và các hàm toánhọc như các hàm lượng giác và bộ tạo số ngẫu nhiên Hoàn toàn có thể địnhnghĩa cấu trúc một đối tượng bằng JavaScript, điều này mang đến nguyên lý cơbản cho lập trình và để viết lên nhưng đoạn mã phức tạp

Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồmCSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện

của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độkhác nhau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

// say hello to the world

var msg = 'Hello, World! Today is ' + dt;

Nếu XML là tài nguyên đưa tới người dùng thì javascript là công cụ để thể hiện

nó trực quan hơn Trong tất cả các tác vụ của AJAX Javascript là một phầnkhông thể thiểu Đặc biệt là các hàm xử lí XML DOM Javascript là một lĩnhvực tương đối rộng lớn hiện này các nhà phát triển vẫn tiếp tục phát triển nó như

là một ngôn ngữ máy khác đa năng , và hoàn hảo nhất Mặc dù hiện tạiJavascript chưa thể là chuẩn của một ngôn ngữ nhưng người ta vẫn luôn cố gắng

để đưa nó lên một tầm cao mới

Giả sử ta có một đoạn văn bản XML