Tim hieu ve ajax

19
TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC ĐỒ ÁN KHẢO SÁT CÔNG CỤ VÀ MÔI TRƯỜNG PHÁT TRIỂN PHẦN MỀM TÊN ĐỀ TÀI Nhóm: Các thành viên: Đà Nẵng, 2011

Transcript of Tim hieu ve ajax

Page 1: Tim hieu ve ajax

TRƯỜNG ĐẠI HỌC SƯ PHẠM

KHOA TIN HỌC

ĐỒ ÁN KHẢO SÁT

CÔNG CỤ VÀ MÔI TRƯỜNG PHÁT TRIỂN PHẦN MỀM

TÊN ĐỀ TÀI

Nhóm:

Các thành viên:

Đà Nẵng, 2011

Page 2: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Nội dungMở đầu...........................................................................................................................................................4

Khái quát về ajax...........................................................................................................................................5

Lich sư hinh thành.....................................................................................................................................5

ajax là gi ?, các trinh duyêt hô trơ ajax.....................................................................................................5

ajax là gi?.................................................................................................................................5trinh duyêt hô trơ ajax..............................................................................................................5

các thê manh cua ajax so vơi các ưng dung truyền thông..........................................................................6

cơ chê hoat đông cua ajax..........................................................................................................................7

Công nghê ajax..............................................................................................................................................8

môt sô ưng dung cua ajax..........................................................................................................................8

các công nghê sư dung trong ajax..............................................................................................................9

CSS..........................................................................................................................................9Giơi thiêu về CSS................................................................................................................9các ưu điêm cua css trong thiêt kê wed.............................................................................10cu pháp cơ bản cua css.......................................................................................................10DOM- Document object....................................................................................................10làm viêc vơi DOM băng javascript...................................................................................11

tim kiêm môt DOM node.......................................................................................................11tao DOM node...................................................................................................................11Thêm style vào tài liêu.......................................................................................................11

XML và viêc truyền dữ liêu bất đồng bô.................................................................................................11

XML là gi?.............................................................................................................................11Các đặc điêm cua XML.........................................................................................................12

XML tương thích vơi SGML...................................................................................................................12

XSLT - (eXtensible Style Language Transforming).............................................................12XML & Javascript....................................................................................................................................12

các bươc xây dưng môt ưng dung ajax....................................................................................................12

ajax và bảo mât............................................................................................................................................12

Đôi tương XMLHttpRequest- trái tim cua ajax...........................................................................................12

Giơi thiêu về XMLHttpRequest...............................................................................................................12

Phân tích các đặc tính cua XMLHttpRequest..........................................................................................12

Các phương thưc và thuôc tính................................................................................................................12

Sư tương tác.............................................................................................................................................13

Gưi các request........................................................................................................................................14

Nhóm: 2

Page 3: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Các bươc cơ bản đê gưi request dùng đôi tương XMLHttpRequest là:...................................................14

Dùng môt tham chiêu tơi môt thê hiên cua XMLHttpRequest................................................................14

Khai báo cho đôi tương XMLHttpRequest về hàm sẽ xư lí các trang thái cua XMLHttpRequest.........14

Gán các thuôc tính cua request................................................................................................................14

Gưi request tơi server...............................................................................................................................14

DOM Level 3 và DOM............................................................................................................................14

DOM Level 3...........................................................................................................................................14

DOM........................................................................................................................................................14

Kêt luân....................................................................................................................................................14

Tông kêt...................................................................................................................................................15

tài liêu tham khảo.....................................................................................................................................15

Nhóm: 3

Page 4: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Mở đầuTrên đà phát triên cua công nghê thông tin cuôc sông cua ban trở nên “phăng ” hơn, tiên nghi hơn và ban đang sư dung các tiên ích sau: Gmail ? hay Google Map ? Ban yêu thích tính năng cua Google Suggest ? hay ưng dung web Ta-da List, Backpack, BaseCamp cua 37Signals? hay các tính năng tiên dung cua Flickr?Nhung gi ở trên là môt sô các ưng dung dich vu web nôi lên trong thời gian gần đây như là những ưng dung không chỉ giàu tính năng mà còn có tính chất "cách mang" trong lich sư phát triên cua các ưng dung web. Điêm chung cua các dich vu web này là gi? Câu trả lời là những tính năng và cách thưc nó tương tác vơi người dùng: rất tiên lơi và nhanh chóng đên nôi ban gần như tưởng minh đang sư dung môt phần mềm chư không phải đang xem trang web.Công nghê đưng đăng sau các dich vu này là AJAX, viêt tắt cua Ansynchronous JAvascript and XML ("ansynchronous" có nghĩa là "không đồng bô"), hay Advanced JAvascripting and XML. Còn Ajax đươc nhắc đên lần đầu tiên bởi Adaptive Path và nhanh chóng đươc chấp nhân rông rói trong công đồng những người phát triên ưng dung web và giờ đây có lẽ là cái tên đươc nhắc đên nhiều nhất và đươc xem là môt công nghê hưa hẹn sẽ mở ra thời kỳ mơi cua các ưng dung web (mặt khác, cung có rất nhiều ý kiên trái ngươc nhau về tên gọi này). Vây Ajax là gi? Vi sao nó làm đươc những điều mà các công nghê trươc đây không thưc hiên đươc? Cơ chê hoat đông cua nó? Nó có phưc tap không? Làm thê nào đê ưng dung nó cho các sản phẩm cua ban? Ajax có điêm yêu nào không? Và khi nào nên sư dung Ajax? Trong bài viêt này, nhóm em sẽ tông hơp những gi nhóm em tim hiêu đươc về công nghê AJAX gồm cả những điêm manh và điêm yêu cua nó, đồng thời nhóm em có môt sô ưng dung minh họa cho viêc ưng dung công nghê Ajax vơi đầy đu mã nguồn và giải thích chi tiêt từng bươc sư dung.

Nhóm: 4

Page 5: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Khai quat vê ajax.

Lich sư hinh thanh.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 cua tác giả Jesse James Garrett, công ty AdapativePath. Ông đinh nghĩa và tóm gọn lai từ cum từ “Asynchronous JavaScript + CSS + DOM + XMLHttpRequest”. Ngay sau đó thuât ngữ AJAX đươc phô 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 tim kiêm nhiều nhất trên Internet.

ajax la gi ?, cac trinh duyêt hô trơ ajax.

ajax la gi?. Ajax là môt kỹ thuât phát triên web có tính tương tác cao băng cách kêt hơp các ngôn ngữ:HTML (hoặc XHTML) vơi CSS trong viêc hiên thi thông tinMô hinh DOM (Document Object Model), đươc thưc hiên thông quaJavaScript, nhăm hiên thi thông tin đông và tương tác vơi những thông tin đươc hiên thiĐôi tương XMLHttpRequest đê trao đôi dữ liêu môt cách không đồng bô vơi máy chu web. (Mặc dù, viêc trao đôi này có thê đươc thưc hiên vơi nhiều đinh dang như HTML, văn bản thường, JSON và thâm chíEBML, nhưng XML là ngôn ngữ thường đươc sư dung).XML thường là đinh dang cho dữ liêu truyền, mặc dầu bất cư đinh dang nào cung có thê dùng, bao gồm HTML đinh dang trươc, văn bản thuần (plain text), JSON và ngay cả EBML.Trong các thành phần cấu thành trên, điêm mấu chôt cua AJAX năm ở XMLHttpRequest. Đây là môt kỹ thuât do Microsoft khởi xương và tích hơp lần đầu tiên vào IE5 dươi dang 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 cua Firefox đều có XMLHttpRequest) và hiên nay đã có trong trinh duyêt Safari 1.2 (Apple) và Opera 7 trở lên.

trinh duyêt hô trơ ajax.Apple Safari từ 1.2 trở lênKonquerorMicrosoft Internet Explorer từ 4.0 trở lênMozilla/Mozilla Firefox từ 1.0 trở lênNetscape từ 7.1 trở lênOpera từ 8.0 trở lênGreenBrowser 4.3Google Chrome tất cả các phiên bản.

Nhóm: 5

Page 6: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

cac thê manh cua ajax so vơi cac ưng dung truyên thông.Trong các ưng dung Web truyền thông, khi người dùng có môt cần thay đôi dữ liêu trên trang Web, yêu cầu thay đôi đươc gưi về server dươi dang HTTP request (hay còn gọi postback), server sẽ xư lý yêu cầu này và gưi trả lai trang HTML khác thay thê trang cu. Qui trinh này đươc mô tả là nhấp-chờ và tải lai (click-wait-and-refresh): ví du người dùng sau khi nhấn môt nut “Submit” trên trang Web phải chờ cho đên khi server xư lý xong mơi có thê tiêp tuc công viêc.Ngươc lai, trong các ưng dung AJAX, người dùng có thê nhấn chuôt, gõ phím liên tuc mà không cần chờ đơi. Nôi dung tương ưng vơi từng hành đông cua người dùng sẽ gần như ngay lâp tưc đươc hiên thi vào vi 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 lai toàn bô nôi dung. Đê tim hiêu kỹ hơn điều này, ta sẽ xem xét 2 mô hinh ưng dung như [1] đã đề câp, Mô hinh cô điên và Mô hinh 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ủa Garrett)

Mô hinh ưng dung Web sư dung AJAX (theo bài báo cua Garrett)

Rõ ràng điêm khác biêt là thay vi phải tải cả trang Web thi vơi AJAX trinh duyêt phía người dùng chỉ cần tải về phần cua trang Web mà người dùng muôn thay đôi. Điều này giup cho ưng dung Web phản hồi nhanh hơn, thông minh 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

Nhóm: 6

Page 7: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

cua minh tơi server và quay lai vơi công viêc cua minh mà không cần chờ trả lời. Khi nào server xư lý xong yêu cầu cua 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.

cơ chê hoat đông cua ajax.Các ưng dung web thông thường làm viêc trên mô hinh đồng bô, có nghĩa là khi có yêu cầu web cua ai đó thi đi cùng vơi nó là môt đáp ưng thưc hiên môt vài hành đông trong lơp trinh diễn (presentation). Ví du: viêc click môt link hay nhấn chuôt vào nut submit sẽ tao ra môt yêu cầu đên web server vơi các tham sô có liên quan. Thói quen “click và wait” này đã giơi han sư tương tác cua các ưng dung. Vấn đề này đươc làm giảm bơt băng viêc sư dung công nghê Ajax (Asychronous Javascript and XML). Ta có thê xem Ajax như môt phương thưc gọi không đồng bô cua nó tác đông đên web server mà không phải refresh toàn bô trang web. Loai tương tác này có thê thưc hiên đươc bơi ba thành phần: ngôn ngữ scripting trinh khách, đôi tương XmlHttpRequest(XHR) và XML.Sau đây chung ta hãy thảo luân về các thành phần này:Ngôn ngữ scripting trinh khách đươc sư dung đê khởi tao các lênh call đên server sau đó đươc sư dung đê truy câp chương trinh và update DOM bên trong trinh duyêt cua trinh khách. Sư lưa chọn phô biên nhất trên trinh khách là Javascript bởi vi sư hiên thi cua nó vơi các trinh duyêt là khá tôt. Thành phần thư hai là đôi tương XHR, đây mơi thưc sư là trái tim cua kỹ thuât này. Các ngôn ngữ như Javascript sư dung đôi tương XHR đê gưi các yêu cầu đên web server ẩn dươi kich bản và sư dung HTTP như môt trung gian truyền tải. XML sẽ đinh dang dữ liêu cho các messages mà có thê thay đôi.Nhiều trang sư dung JSON (Javascript Object Notation) trong phần XML bởi vi cu pháp cua nó dễ hơn. Khi sư dung Javascript đê phân tích cu pháp JSON thi nó đơn giản nhiều. Mặt khác ai đó cung có thê sư dung Xpath đê phân tích quay trở lai cu pháp XML. Cung có nhiều trang Ajax không sư dung XML hay JSON, thay vào đó chỉ gưi những mẩu HTML đã đươc chèn đông tính vào trong trang web. Ajax là môt sư kêt hơp các công nghê tồn tai trươc đó cùng nhau đê phát triên các ưng dung web có tính tương tác cao. Trong thưc tê, tất cả các thành phần trên đã xuất hiên trươc và đã đươc sư dung nhiều vơi IE 5.0. Các chuyên gia thiêt kê đã đưa ra các trường hơp sư dung Ajax như là “Suggestive” textboxes, và các bảng danh sách dữ liêu tư đông refresh. Tất cả các yêu cầu XHR vẫn đươc xư lý bởi server side frameworks điên hinh như các chuẩn giông J2EE, .Net và PHP. Tính không đồng bô cua các ưng dung Ajax đươc thê hiên trong hinh dươi đây:

Nhóm: 7

Page 8: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Tóm lai, AJAX cho phép tao 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 vi trả dữ liêu dươi dang HTML và CSS trưc tiêp cho trinh duyêt, Web server có thê gưi trả dữ liêu dang XML và AJAX Engine sẽ tiêp nhân, phân tách và chuyên hóa thành XHTML + CSS cho trinh duyêt hiên thi. 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ời người sư dung cảm thấy kêt quả xư lý đươc hiên thi tưc thi mà không cần nap lai trang. Mặt khác, sư kêt hơp cua các công nghê Web như CSS và XHTML làm cho viêc trinh bày giao diên trang Web tôt hơn nhiều và giảm đáng kê dung lương trang phải nap. Đây là những lơi ích hêt sưc thiêt thưc mà AJAX đem lai.

Công nghê ajax.

môt sô ưng dung cua ajax.Google Suggest hiên thi các thuât ngữ gơi ý gần như ngay lâp tưc khi người sư dung chưa gõ xong từ khóa.

Google Maps, mọi người có thê theo dõi những thay đôi, xê dich, kéo thả bản đồ như trên môi trường desktop.

Nhóm: 8

Page 9: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Google Suggest và Google Maps là hai ví du nôi bât về phương pháp ưng dung web thê hê mơi. Hãng dich vu tim kiê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ọi chương trinh họ giơi thiêu gần đây, từ Orkut, Gmail đên phiên bản thư nghiêm Google Groups, đều là những ưng dung 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à đang hiên diên ngay trong thê giơi thưc, từ mô hinh rất đơn giản như Google Suggest đên tinh vi và phưc tap như Google Maps.Tuy vây, Ajax chưa thê thưc hiên tất cả mọi thư. Những ưng dung phu thuôc nhiều vào máy tính cô đinh như Photoshop cua Adobe sẽ không xuất hiên sơm trên trinh duyêt. Ngay cả Google cung phải tao môt phần mềm bản đồ trên desktop (Google Earth) và yêu cầu tải chương trinh về đê có thê hiên thi hinh ả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 dung web đòi hỏi phải liên tuc kêt nôi vơi Internet, khiên công viêc trên sẽ trở nên khó khăn nêu bi gián đoan.

cac công nghê sư dung trong ajax.AJAX là môt tâp hơp các công nghê bô sung lẫn nhau. JavaScript có vai tròchất keo kêt dính các ưng dung lai vơi nhau. Giao diên người dùng đươc tao và táinap băng cách dùng JavaScript đê điều khiên Document Object Model, tao và tôchưc biêu diễn dữ liêu cho người dùng, đồng thời xư lí các tương tác trên chuôt và bàn phím. Cascading Style Sheets (CSS) cung cấp môt sư nhất quán trên cảm quan“look and feel” cho ưng dung và khả năng thao tác manh mẽ vơi DOM. Đôi tươngXMLHttpRequest (hay môt cơ chê tương đương nào đó) đươc dùng đê liên lacmôt cách bất đồng bô vơi server, đảm bảo viêc gưi yêu cầu người dùng và tái napdữ liêu trong khi người dùng vẫn làm viêc

CSS.

Giơi thiêu vê CSSCascading Style Sheet – tam dich là bảng kiêu xêp chồng - là môt phầnkhông thê thiêu trong thiêt kê Web. Môt stylesheet đưa ra cách kiêm soát các loaiđinh dang trưc quan, nó có thê đươc áp dung cho các thành phần riêng lẻ trên cáctrang. Vơi Ajax, stylesheet cung cấp môt “kho chưa” các giao diên xác đinh trươccó thê áp dung cho các phần tư đông vơi đô dài các đoan mã nguồn là nhỏ nhất.CSS đinh dang môt trang web theo ba cách :Sư dung trưc tiêp kèm vơi các thẻ HTML (Inline Style Sheet)Đinh nghĩa trong môt trang web (Internal Style Sheet).Đinh nghĩa thành môt file CSS riêng (External Style Sheet). Trang web cuachung ta sẽ tham chiêu đên file CSS này.Môt quy tắc đinh dang và bô trí gồm có hai phần: thành phần lưa chọn -selector và phần khai báo - style declaration. Selector đặc tả các phần tư đươc đinhdang và bô trí, và style declaration khai báo các thuôc tính đinh dang sẽ đươc ápdung.

cac ưu điêm cua css trong thiêt kê wed.CSS giup tiêt kiêm đươc rất nhiều thời gian và công sưc cho viêc thiêt kê web .

Nhóm: 9

Page 10: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

CSS cho phép điều khiên cách đinh dang và cách bô trí cua cùng luc nhiều trangweb vơi chỉ duy nhất môt lần thay đôi tai môt vi trí.Có thê đinh nghĩa nhiều style vào môt thẻ HTML. Thư tư áp dung các đinh dangInline Style (Style đươc qui đinh trong môt thẻ HTML cu thê)Internal Style (Style đươc qui đinh trong phần <HEAD> cua môt trangHTML)External Style (style đươc qui đinh trong file CSS ngoài)Browser Default (thiêt lâp mặc đinh cua trinh duyêt)

cu phap cơ ban cua css.Cu pháp cua CSS gồm ba thành phấn:Thành phần lưa chọn (thường là môt thẻ HTML) (Selector)Thuôc tính (Property)Giá tri (Value)có ba cách đê chèn CSS vào trang web.External Style Sheet(sư dung file CSS đươc đinh nghĩa thành trong file riêng)Internal Style Sheet(đinh nghĩa các style sheet ngay trong trang web)Internal Style Sheet(style đươc qui đinh ngay trong môi thẻ HTML)

DOM- Document object.DOM giup phân tích môt tài liêu (môt trang web chăng han) phuc vu chocơ chê cua JavaScript. Sư dung DOM, cấu truc cua tài liêu có thê đươc phân rãtheo cấu truc cây và thao tác theo các nut. Đây là môt khả năng đặc biêt hữu ích đêVêt môt ưng dung Ajax. Trong môt ưng dung Ajax, sư thay đôi giao diên ngườidùng chu yêu đươc tao ra bởi DOM. Các thẻ HTML trong trang web đươc tô chưctheo cấu truc cây. Gôc cua cây là thẻ <HTML>, đê biêu diễn tài liêu. Trong đó thẻ<BODY> biêu diễn phần thân cua tài liêu, là gôc cua phần hiên thi cua tài liêu.Trong thân cua tài liêu, có các bảng, paragraph, list, và các loai thẻ khác vơi cácthẻ ở mưc thấp hơn nữa

lam viêc vơi DOM băng javascriptTrong môt ưng dung bất kỳ, nêu muôn thay đôi giao diên người dùng khihọ đang làm viêc, thi phải cung cấp các phản hồi lai khi người dùng gưi các yêu cầu.tim kiêm môt DOM node.Yêu cầu đầu tiên đê làm viêc trên DOM vơi JavaScript là đi tim kiêm môt phần tư đê thay đôi. Trươc hêt cần bắt đầu tham chiêu qua nut gôc - root node, nut này thê hiên qua biên toàn cuc document. Môi nut trong DOM là môt nut con (hoặc nut con cấp hai, ba…) cua document. Môi phần tư HTML có môt thuôc tính ID. Môi môt nut DOM có thê có môt ID gán cho nó, và ID này có thê đươc dùng đê tham chiêu tơi nut qua hàm : var hello=document.getElementById('hello'); Môt cách khác đê tim kiêm là dưa trên loai thẻ HTML, dùng phương thưc getElementsByTagName().

Nhóm: 10

Page 11: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

tao DOM node.Trong nhiều trường hơp cần tao các nut mơi và thêm nó vào tài liêu. JavaScript cung cấp môt sô phương thưc đê làm điều đó. Các phương thưc chuẩn đê tao nut mơilà document.createElement() và document.createTextNode().createTextNode() tao môt nut thê hiên qua môt đoan text, thường đươc tim thấy trong các thẻ về heading, div, paragraph, và list item. Môt nut khi đươc tao ra phải đươc gắn vào tài liêu trươc khi hiên thi trên trinh duyêt, phương thưc appendChild() đươc dùng đê thưc hiên điều này.

Thêm style vao tai liêu.DOM cung cung cấp các phương thưc đê chỉnh sưa style. Thuôc tính classNamehello.className='declared';vơi hello tham chiêu tơi môt nut DOM.Thuôc tính style Ví du, đoan mã sau bô sung các thuôc tính style cho nut empty:

empty.style.border="solid green 2px";empty.style.width="200px";

XML va viêc truyền dữ liêu bất đồng bộ.

XML la gi?Năm 1969, IBM đã cho ra đời GML là ngôn ngữ dùng đê đặc tả cho ngôn ngữ khác. Về sau GML phát triên thành SGML là chuẩn lưu trữ và chuyên đôi dữ liêu. Nhưng quá phưc tap và tiêu tôn nhiều công sưc trong viêc hiên thưc. XML ra đời kêt hơp đươc sưc manh cua SGML và tính phô dung cua HTML.

Các đặc điểm của XML

XML tương thích với SGMLDễ dàng Vêt đươc những chương trinh xư lý tài liêu XMLTài liêu XML dễ đọc và có tính hơp lý caoXML đươc xây dưng vơi sư giảm thiêu những thuôc tính tùy chọn XML dễ dàng đươc sư dung trên Internet XML hô trơ nhiều ưng dungKhông đặt nặng tính hinh thưc trong nôi dung thẻ đánh dấu XMLCấu truc môt tài liêu XML.Môt tài liêu XML sẽ chưa những đặc tả về cấu truc dữ liêu. Môi cấu truc gồm nhiều phần tư (element), môi thành phần đươc bắt đầu vơi môt thẻ bắt đầu (Start–tag) và kêt thuc vơi môt thẻ kêt thuc (End–tag). Giữa Start–tag và End–tag là nôi dung cua phần tư này. Nôi dung có thê bao gồm dữ liêu văn bản hay có thê là môt phần tư khác.

Nhóm: 11

Page 12: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

XSLT - (eXtensible Style Language Transforming).XSLT là môt phần cua XSL (eXtensible Style Language). XSL là môt ngôn ngữ nền tảng

XML và ra đời vơi muc đích chuyên đôi môt tài liêu XML thành môt tài liêu XML khác hay chuyên môt tài liêu XML thành những đôi tương có thê thê hiên đươc.

XML & Javascript.  

cac bươc xây dưng môt ưng dung ajax.

ajax va bao mât.

Đối tương XMLHttpRequest- trái tim của ajax.

Giới thiêu về XMLHttpRequest.Trươc tiên cần tao môt đôi tương XMLHttpRequest băng JavaScript trươc khi sư dung đôi tương này đê gưi request và xư lý các response. XMLHttpRequest chưa là chuẩn cua W3C, vi thê phải dùng JavaScript theo nhiều cách đê tao môt thê hiên cua cua XMLHttpRequest. Đê tao môt thê hiên cua đôi tương XMLHttpRequest. Công viêc chỉ đơn giản là kiêm tra sư hô trơ đôi tương ActiveX cua trinh duyêt. Nêu hô trơ ActiveX, thi tao môt đôi tương XMLHttpRequest dùng ActiveX. Trường hơp khác, tao đôi tương này băng kỹ thuât tao đôi tương JavaScript nguyên thuy.

Phân tích các đặc tính của XMLHttpRequest

Các phương thức va thuộc tínhvoid open(string method, string url, boolean asynch, string username, string password): Phương thưc này thiêt lâp môt phiên gọi tơi server. Khởi tao môt request. Nó có hai tham sô yêu cầu và ba tham sô tùy chọn; ta phải cung cấp đặc tả cua phương thưc đươc triêu gọi (GET, POST, hay PUT) và đia chỉ URL cua tài nguyên đươc gọi.void send(content): Phương thưc này thưc hiên gưi request tơi server. Nêu request đươc khai báo bất đồng bô, kêt quả đươc trả về ngay, còn không nó sẽ đơi cho tơi khi nhân đươc response từ server.void setRequestHeader(string header, string value): Phương thưc thiêt lâp giá tri cho phần header đã cho trong HTTP request.void abort(): Phương thưc này rất dễ hiêu, nó sẽ huy request.

Nhóm: 12

Page 13: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

string getAllResponseHeaders(): Trả về môt biên kiêu string chưa response header cua HTTP request.string getResponseHeader(string header): Phương thưc này tương tư như getAllResponseHeaders();

Sự tương tácTa xét môt ví du đê tim hiêu các tương tác cua Ajax. Hinh sau cho thấy mô hinh tương tác chuẩn trong môt ưng dung Ajax.

Mô hinh tương tác chuẩn AjaxQuá trinh tương tác:Môt event client-side gây ra môt sư kiên - Ajax event. Bất kỳ môt tác đông nào cung có thê gây ra Ajax event, từ môt sư kiên onchange đơn giản cho đên môt sô tác đông cua người dùng.Môt thê hiên cua XMLHttpRequest đươc tao ra. Dùng phương thưc open(), tao lời gọi hàm - đia chỉ URL đươc thiêt lâp cùng vơi phương thưc HTTP yêu cầu, thông thường là GET hay POST. Request đươc tao ra qua viêc gọi phương thưc send().Môt request đươc tao và gưi đên server.Server xư lí các yêu cầuResponse đươc trả về cho trinh duyêt. Trường Content-Type đươc thiêt lâp ở dang text/xml; XMLHttpRequest chỉ có thê xư lí kêt quả dang text/html.Cấu hinh XMLHttpRequest đê gọi hàm callback() khi kêt quả xư lí đươc trả về. Hàm này kiêm tra thuôc tính readyState trên đôi tương XMLHttpRequest và sau đó xem xét mã trang thái trả về từ server.Các phương thưc GET và POSTTrên lý thuyêt, sư dung GET khi request không thay đôi giá tri, tưc là nhiều request sẽ trả về cùng kêt quả. Trong thưc tê, dùng GET đê truy luc dữ liêu từ server; hay nói cách khác tránh đươc viêc thay đôi trang thái trên vơi lời gọi GET. Phương thưc POST đươc dùng khi muôn thay đôi trang thái trên server.Remote ScriptingChung ta cùng xét môt công nghê gọi là remote scripting nó cung cấp môt cơ chê dùng đê tránh viêc tái nap các trang web.Tông quan về Remote Scripting

Nhóm: 13

Page 14: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Về cơ bản, remote scripting là môt loai lời gọi các thu tuc từ xa. Sư tương tác vơi server vẫn như các ưng dung Web thông thường, nhưng không tái nap (refresh) toàn bô trang web. Chỉ vơi Ajax, mơi có thê sư dung công nghê bất kỳ phía server đê có thê nhân các request, xư lí chung và trả về kêt quả. Vơi môi công nghê phía server, có môt sô lưa chọn cho phía client đê thưc hiên remote scripting.

Gửi các request

Các bước cơ bản để gửi request dùng đối tương XMLHttpRequest la:

Dùng một tham chiếu tới một thể hiên của XMLHttpRequest

Khai báo cho đối tương XMLHttpRequest về ham sẽ xử lí các trạng thái của XMLHttpRequest.

Gán các thuộc tính của request.

Gửi request tới server.

DOM Level 3 va DOM

DOM Level 3Môt chuẩn mơi đươc công bô: DOM Level 3 Load and Save Specification. Đặc tả này đươc thiêt kê như môt platform đôc lâp vơi các ngôn ngữ đê thay đôi nôi dung môt tài liêu DOM vơi XML.

DOMDOM là môt đặc tả cua W3C cho môt platform đôc lâp vơi ngôn ngữ lâp trinh đê truy câp và sưa đôi nôi dung và cấu truc cua tài liêu. Môt cách hiêu khác, nó là môt cách thông dung đê biêu diễn và thao tác môt tài liêu HTML hay XML. thiêt kê cua DOM dưa trên đặc tả cua Object Management Group, cho phép sư dung vơi bất kỳ ngôn ngữ lâp trinh nào. DOM là môt mô hinh đôi tương trong ngữ cảnh hương đôi tương. DOM xác đinh các đôi tương cần thiêt đê biêu diễn và thay đôi tài liêu, các hành V và thuôc tính cua các đôi tương này, và môi liên hê giữa các đôi tương. Lơi thê cua đặc tả DOM là nó cung cấp môt chuẩn đê tương tác vơi tài liêu.

Kết luậnTrong chương này, chung ta vừa xem xét các kỹ thuât cơ bản và là “trái tim” cua Ajax, đôi tương XMLHttpRequest.Vơi sư kêt hơp giữa JavaScript và môt sô thao tác DOM, Ajax cho phép môt mưc đô tương tác chưa từng có từ trươc đên nay. Vơi XMLHttpRequest ta không còn đơi quá trinh tái nap trang web và sư đồng bô vơi server nữa.

Nhóm: 14

Page 15: Tim hieu ve ajax

Đồ án khảo sát Đề tài: ks 24

Tổng kêt.

AJAX là môt công nghê mang tính đôt phá cho thê hê Web 2.0. Vơi AJAX, không chỉ là vấn đề cải thiên tôc đô duyêt Web, mà quan trọng hơn đó là viêc xóa nhòa ranh giơi giữa các ưng dung Web và và phần mềm.Viêc mô hinh hóa theo hương đôi tương (DOM) các trang web cho ta môt hương tiêp cân và thao tác vơi từng phần cua trang web vơi các ngôn ngữ script (như JavaScript) trở nên dễ dàng và hiêu quả. Đê hiên thi các trang web phía client thi CSS là môt giải pháp hoàn hảo. Sư kêt hơp các công nghê hiên thi và câp nhât.nôi dung phía trinh duyêt công vơi viêc truyền dữ liêu bất đồng bô qua XMLHtttpRequest đã hinh thành lên AJAX.AJAX có thê mở ra môt hương đi mơi cho CNTT, khi đó có thê chia sẻ và tiêt kiêm tôi đa. Môt sô hương nghiên cưu và phát triên vơi AJAX có thê đươc triên khai là:Xây dưng các ưng dung Web đê thay thê các ưng dung desktop.Nâng cao tính công đồng và chia sẻ trong các ưng dung Web (môt ví du là ưng dung flickr).Xây dưng các ưng dung web có tính tương tác cao vơi người dùng (như các ưng dung blog, wiki)Tao ra các ưng dung Web kiêu AJAX thay thê các ưng dung web truyền thông. Tất nhiên, AJAX đang trong quá trinh hoàn thiên, vẫn có nhiều vấn đề phải giải quyêt, nhưng trong tương lai gần, các ưng dung AJAX sẽ dần thay thê các ưng dung dùng công nghê truyền thông.

tài liêu tham khao.

Nhóm: 15