Created by TempAIDS




Nhập môn AJAX (1)
I, Quá trình phát triển công nghệ Web - Nguyên nhân xuất hiện công nghệ AJAX.
Tr...
Created by TempAIDS

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
...
Created by TempAIDS

hiện của nhiề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...
Created by TempAIDS

Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web...
Created by TempAIDS

nó tương tác với người dùng. Khác với các phần mềm chạy độc lập ở máy khách có những khả năng
dường n...
Created by TempAIDS



        Gửi yêu cầu (request) đến server
    
        Phân tách và làm việc với XML
    


Các ứn...
Created by TempAIDS




Còn đây là mô hình tương tác trong một ứng dụng Web dùng Ajax:




Rõ ràng điểm khác biệt là thay ...
Created by TempAIDS

ra, điểm đặc biệt quan trọng trong công nghệ Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi
y...
Created by TempAIDS

        chiếu đến file CSS này.

Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn...
Created by TempAIDS


V,Công nghệ trong AJAX - Javascript
JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống...
Created by TempAIDS

          Thuộc tính (Property)
      •
          Giá trị (Value)
      •

Thể hiện của cú pháp CSS

...
Created by TempAIDS

This is a paragraph
</p>



Các thuộc tính của CSS Style
Mỗi phần tử trong trang HTML có thể được qui...
Created by TempAIDS

của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao
...
Created by TempAIDS

hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,quot;reader ofq...
Created by TempAIDS

Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName().
Ví dụ, ...
Created by TempAIDS

Trên đây ta vừa xét một cách sơ lược về JavaScript, CSS, và DOM. Chúng được tập hợp trong một
công ng...
Created by TempAIDS

    5.   XML dễ dàng được sử dụng trên Internet
    6.   XML hỗ trợ nhiều ứng dụng
    7.   Không đặt...
Created by TempAIDS

đầu tiên để giải quyết vấn đề này là dùng IFrame. Cho đến gần đây, XMLHttpRequest đã được đưa ra như ...
Created by TempAIDS

if (!HttpMethod){
HttpMethod=quot;POSTquot;;
}
var req=getXMLHTTPRequest();
if (req){
req.open(HttpMe...
Created by TempAIDS

Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này
để gử...
Created by TempAIDS

tới cách tạo các thể hiện này. Điều này làm cho việc phát triển các ứng dụng đơn giản hơn và làm cho
...
Created by TempAIDS

        thế của việc dùng Ajax, vì vậy thiết lập tham số này ở giá trị false đã thay đổi mục đích việ...
Created by TempAIDS


Nhập môn AJAX (11)
Wednesday, 21.03.2007, 08:38am (GMT7)


Đối tượng XMLHttpRequest - Phân tích các ...
Created by TempAIDS

    if (window.ActiveXObject) {

        xmlHttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;);

 ...
Created by TempAIDS

các phiên bản và có thên các thư viện mới. Một số giải pháp để thực thi Ajax là các thư viện Ajax.NET...
Created by TempAIDS

dùng một số công nghệ như XML-RPC, nhưng sự phức tạp của phương pháp này làm giảm tính phổ
biến của n...
Created by TempAIDS

window.parent.handleResponse();
</script>
<body>
</body>
</html>




Nhập môn AJAX (13)
Wednesday, 28...
Created by TempAIDS


2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Ta
hoàn ...
Created by TempAIDS

   if (window.ActiveXObject) {
     xmlHttp = new   ActiveXObject(quot;Microsoft.XMLHTTPquot;);
   }
...
Created by TempAIDS

người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định
kỳ...
Created by TempAIDS

<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>


Có thể biểu diễn theo DOM của bảng trên. Lợi thế ...
Created by TempAIDS



GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozill...
Created by TempAIDS

Một HTTP request luôn chứa một dòng trống sau Request-Line và bất kỳ header nào. Nếu request bao
gồm ...
Created by TempAIDS

 HTTP request và response có thể có một hay nhiều message header. Message header bắt đầu với tên
trườ...
Created by TempAIDS




   www.my-ebooks.tk
Created by TempAIDS




   www.my-ebooks.tk
Upcoming SlideShare
Loading in …5
×

Ajax

1,444 views

Published on

Published in: Technology, Sports
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,444
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
106
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Created by TempAIDS Nhập môn AJAX (1) I, Quá trình phát triển công nghệ Web - Nguyên nhân xuất hiện công nghệ AJAX. Trước khi tìm hiểu về Ajax, chúng ta cùng xem xét quá trình phát triển các công nghệ Web, nguyên nhân và hoàn cảnh xuất hiện công nghệ Ajax. 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ĩnh khô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 qua các trang Web. Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML (Hyper Text 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. Tuy nhiên, không lâu sau đó, nhu cầu về các trang Web động, có sự tương tác ngày mộ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: 1. 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 form HTML đơn giản và các CGI script, có thể tạo các “cửa hàng” ảo cho phép bán sản phẩm cho khách hàng qua một trình duyệt. CGI script có thể được viết bằng mộ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ương trình trên hệ thống. Vì thế có thể chạy các chương trình không mong muốn gây tổ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. 2. Applet Tháng 5/1995, John Gage của hãng Sun và Andressen (nay thuộc Netscape Communications Corporation) đã công bố một ngôn ngữ lập trình mới có tên Java. Netscape Navigator đã hỗ trợ ngôn ngữ mới này, và một con đường mới cho 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 applet trong trình duyệt trên nền máy ảo Java Virtual Machine (JVM). Dù rằng applet làm được nhiều điều song nó cũng có một số nhược điểm: thường bị chặn bởi việ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ông thể www.my-ebooks.tk
  2. 2. Created by TempAIDS 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ã nguy hiể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. 3. JavaScript Cùng thời gian này, Netscape đã tạo ra một ngôn ngữ kịch bản gọi là JavaScript. JavaScript được thiết kế để việc phát triển dễ dàng hơn cho các nhà thiết kế Web và các lập trình viên không thành thạo Java. (Microsoft cũng có một ngôn ngữ kịch bản gọi là VBScript). JavaScript ngay lập tức trở thành một phương pháp hiệu quả để tạo ra các trang 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ệm mớ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ới các ngôn ngữ kịch bản bất kỳ như JavaScript hay Nhập môn AJAX (2) Monday, 05.03.2007, 09:48am (GMT7) II, 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ững thay đổ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 quot;ảoquot; chứ không chỉ quot;duyệt và xemquot;. 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ữ quot;Web 2.0quot; đang trở nên thịnh hành. Thực chất, Web 2.0 có nghĩa là sử dụng web đú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ối cá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ũng nhằ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ên Internet 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 quot;đóngquot; 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 tin hơn là phương tiện chia sẻ thông tin. Chỉ đến gần đây, với sự xuất www.my-ebooks.tk
  3. 3. Created by TempAIDS hiện của nhiề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’Reilly Media, đư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: quot;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...quot;. Sau đó Tim O’Reilly, chủ tịch kiêm giám đốc điều hành O’Reilly Media, đã đúc kế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ông ngừ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áng 10/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. Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0. Hàng loạt công nghệ mới được phát triển nhằm làm cho ứng dụng trên web mạnh hơn, nhanh hơn và dễ sử dụng hơn, được xem là nền tảng của Web 2.0. Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng. Cung cấp nội dung Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin). Có nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML. Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác. Dịch vụ web Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0. Có hai loại giao thức chính là REST và SOAP. REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access www.my-ebooks.tk
  4. 4. Created by TempAIDS Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại lệ. Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển. Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng quot;là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần. Phần mềm máy chủ Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở background. Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn. Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm hai loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng quot;gắn thêmquot; cho máy chủ web, có sử dụng giao tiếp API. AJAX là gì ? Sau đây là định nghĩa của Garrett về Ajax: AJAX là tập hợp của nhiều công nghệ với thế mạnh củ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, các chuẩn của W3C, được Firefox (Mozilla),  Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất tốt. Nâng cao tính năng động và phản hồi bằng DOM (Document Object Model); một chuẩn của  W3C Trao đổi và xử lý dữ liệu bằng XML và XSLT; cũng là một chuẩn của W3C  Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest  Và tất cả các công nghệ trên được liên kết lại với nhau bằng JavaScript.  Các vấn đề nảy sinh và sự ra đời của AJAX Trước khi tìm hiểu tại sao Ajax lại được xem là quot;cứu tinhquot; của các ứng dụng Web, hãy thử phân tích những giới hạn của các ứng dụng web hiện tại khiến nó chưa thể thay thế cho các phần mềm phía client truyền thống. Chỉ cách đây vài năm, khi mà các dịch vụ web bùng nổ, người ta đã nghĩ đến một lúc nào đó tất cả các ứng dụng mà ta sử dụng sẽ là các ứng dụng Web thay vì các phần mềm chạy độc lập trên các máy tính đơn lẻ. 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ập tại mọi nơi, không cần nâng cấp,…), tương lai của cá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ốn nói là có thể sẽ bị thay thế. Tuy nhiên, cho đến giờ, giấc mơ đó vẫn chưa thành sự thật và người ta bắt đầu nghĩ rằng, có lẽ nó sẽ không bao giờ trở thành sự thật. Tại sao vậy? Bởi vì một trong những giới hạn quan trọng của các ứng dụng Web hiện tại là cách thức www.my-ebooks.tk
  5. 5. Created by TempAIDS nó tương tác với người dùng. Khác với các phần mềm chạy độc lập ở máy khách có những khả năng dường như vô tận trong cách thức tương tác 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ịch HTTP (HyperText Transport Protocol - Giao thức truyền tải qua các siêu liên kết). Để hiểu tại sao tính chất này lại trở thành một rào cản của các ứng dụng web, hãy phân tích cách thức hoạt động của các dịch vụ web hiện tại xử lý một tác vụ đơn giản như xóa email trong YahooMail. Ta đang duyệt qua hòm thư “Inbox” của Yahoo!Mail. Khi chọn một số email và nhấn nút Delete để xóa chúng (chuyển vào thùng rác). Yahoo!Mail trước hết sẽ lấy danh sách các email được chọn (quá trình này chạy trên máy local), sau đó gửi danh sách này cùng với mã lệnh qua một siêu liên kết đến server của Yahoo, yêu cầu server thực hiện tác vụ xóa đối với các email đó và gửi lại trang web Yahoo!Mail với nội dung mới, rồi cập nhật để trình duyệt hiển thị. Việc gửi nhận yêu cầu này mất một khoảng thời gian trễ, nếu ta sử dụng ADSL thì thời gian này cũng không quá lâu, còn nếu dùng dịch vụ dial-up thì thời gian chờ đợi là rất lớn. Ta cũng sẽ phải trải qua một quá trình tương tự đối với các tác vụ khác, ví dụ như chuyển từ thư mục “Inbox”(hòm thư đến) sang “Sent” (hòm thư đi). Ta sẽ không bao giờ phải trải qua việc chờ đợi trên khi sử dụng các phần mềm chạy trên máy tính đơn lẻ: không bao giờ thấy phần mềm một khi đã được mở ra lại phải “vô hiệu” trong vài giây để cập nhật dù chỉ là một tác vụ đơn giản nhất, và ngay cả khi phần mềm cần thời gian xử lý một tác vụ nào đó thì ta vẫn thấy nó vẫn tương tác với người dùng. Nếu xét về khía cạnh khả năng ứng dụng trong các tác vụ hàng ngày thì hạn chế trên của các ứng dụng web là không thể chấp nhận được. Tất nhiên, bên cạnh rào cản về cách thức tương tác, các ứng dụng Web còn vấp phải nhiều giới hạn khác (ví dụ như bản thân việc phải hoạt động dựa trên các trình duyệt đã là một rào cản quan trọng) nhưng một khi chưa giải quyết được vấn đề trên thì các ứng dụng web sẽ không bao giờ có thể thay thể cho các phần mềm độc lập. Ajax ra đời là một giải pháp cho các ứng dụng Web hiện nay, và như ta nói, nó là một trong số các công nghệ Web thế hệ thứ hai. Nhập môn AJAX (3) Tuesday, 06.03.2007, 09:01am (GMT7) III,Các thế mạnh của AJAX: Bài này bắt đầu đi vào những cái nền tảng nhất, cần học chậm và hiểu được vấn đề cốt yếu: Ajax là viết tắt của Asynchronous JavaScript and XML – công nghệ kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao: www.my-ebooks.tk
  6. 6. Created by TempAIDS Gửi yêu cầu (request) đến server  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 ứng dụng 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 dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả response chứa các thông tin dưới dạng HTML và CSS, trang HTML này sẽ 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 khi server xử lý xong mới có thể tiếp tục công việc. Dưới đây là: Mô hình tương tác trong một ứng dụng Web truyền thống: 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ử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ển thị. 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ử 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. Có thể nhìn vào 2 hình vẽ để so sánh hai mô hình ứng dụng Web: truyền thống và sử dụng Ajax. www.my-ebooks.tk
  7. 7. Created by TempAIDS Còn đây là mô hình tương tác trong một ứng dụng Web dùng Ajax: Rõ ràng điểm khác biệt là thay vì phải tải cả trang web thì với AJAX ta chỉ cần tải về phần của trang Web muốn thay đổi. Điều này giúp cho ứng dụng web của phản hồi nhanh hơn, thông minh hơn. Ngoài www.my-ebooks.tk
  8. 8. Created by TempAIDS ra, điểm đặc biệt quan trọng trong công nghệ Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi yêu cầu của mình tới server và tiếp tục thực thi tác vụ hiện tại mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết Nhập môn AJAX (4) Wednesday, 07.03.2007, 09:34am (GMT7) IV, Các công nghệ trong AJAX - CSS - Giới thiệu Từ bài này, chúng ta sẽ tìm hiểu các công nghệ trong AJAX và mối liên hệ giữa chúng. 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 dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, tạo 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 dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc mộ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 nạp dữ liệu trong khi người dùng vẫn làm việc. Cascading Style Sheet – CSS Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax. Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang. Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ. Trong ứng dụng Web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.Với AJAX, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất. CSS định dạng một trang web theo ba cách : 1. Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet) 2. Định nghĩa trong một trang web (Internal Style Sheet). 3. Định nghĩa thành một file CSS riêng (External Style Sheet). Trang web của chúng ta sẽ tham www.my-ebooks.tk
  9. 9. Created by TempAIDS chiếu đến file CSS này. Một quy tắc định dạng 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 định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng. Giả sử muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ <h1>) có màu đỏ. Có thể khai báo thuộc tính CSS như sau: h1 {color: red} Chúng ta cũng nên phân tích: Các ưu điểm của CSS trong thiết kế web a. CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ. Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. b. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí. c. Có thể định nghĩa nhiều style vào một thẻ HTML . CSS cho phép đưa các thô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 web hoặc ở trong một file CSS bên ngoài. d. Thứ tự áp dụng các định dạng Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ra có thể nói các style sẽ được quot;xếp tầngquot; (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 của một trang HTML)  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  Bài sau chúng ta sẽ đi vào: Cú pháp cơ bản của CSS. Nhập môn AJAX (5) Thursday, 08.03.2007, 10:41am (GMT7) www.my-ebooks.tk
  10. 10. Created by TempAIDS V,Công nghệ trong AJAX - Javascript JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C. JavaScript được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo cụ thể như string, integer, hay object, và các biến giống nhau có thể được gán bới các kiểu khác nhau. Ví dụ, đoạn mã sau là hợp lệ: var x=3.1415926; x='pi'; Biến x lúc đầu được định nghĩa là giá trị số và sau đó được gán lại bởi giá trị xâu kí tự. 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ình duyệ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án họ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ể định nghĩ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ồm CSS, 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. Trong chồng công nghệ của Ajax, JavaScript là chất kết dính các thành phần lại với nhau. Bạn có thể tải về tài liệu học JavaScript tại đây Nhập môn AJAX (6) Friday, 09.03.2007, 10:20am (GMT7) VI, Các công nghệ trong AJAX - CSS - Cú pháp & thuộc tính CSS Style. Cú pháp cơ bản của CSS Cú pháp của CSS gồm ba thành phấn: Thành phần lựa chọn (thường là một thẻ HTML) (Selector) • www.my-ebooks.tk
  11. 11. Created by TempAIDS Thuộc tính (Property) • Giá trị (Value) • Thể hiện của cú pháp CSS Selector { Property1: Value1; Property2: Value2; } Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử. Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web. a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng) Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>. <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;mystyle.cssquot; /> </head> b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web) Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>. <head> <style type=quot;text/cssquot;> hr {color: sienna} p {margin-left: 20px} body {background-image: url(quot;images/back40.gifquot;)} </style> </head> c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML) Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS. <p style=quot;color: sienna; margin-left: 20pxquot;> www.my-ebooks.tk
  12. 12. Created by TempAIDS This is a paragraph </p> Các thuộc tính của CSS Style Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph: .robotic{ font-size: 14pt; font-family: courier new, courier, monospace; font-weight: bold; color: gray; } Nhập môn AJAX (7) Monday, 12.03.2007, 08:27am (GMT7) VII, Các công nghệ trong AJAX - DOM A, Document Object Model. Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server. Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu. Trong đó thẻ <BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa. Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế. JavaScript làm việc với nút gốc www.my-ebooks.tk
  13. 13. Created by TempAIDS của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối. Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web. B, Làm việc với DOM bằng JavaScript. Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu. Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản. <html> <head> <link rel='stylesheet' type='text/css' href='hello.css' /> <script type='text/javascript' src='hello.js'></script> </head> <body> <p id='hello'>hello</p> <div id='empty'></div> </body> Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ <div> với một ID. Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML: .declared{ color: red; font-family: arial; font-weight: normal; font-size: 16px; } .programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; } Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript. window.onload=function(){ var hello=document.getElementById('hello'); www.my-ebooks.tk
  14. 14. Created by TempAIDS hello.className='declared'; var empty=document.getElementById('empty'); addNode(empty,quot;reader ofquot;); addNode(empty,quot;Ajax in Action!quot;); var children=empty.childNodes; for (var i=0;i<children.length;i++){ children[i].className='programmed'; } empty.style.border='solid green 2px'; empty.style.width=quot;200pxquot;; } function addNode(el,text){ var childEl=document.createElement(quot;divquot;); el.appendChild(childEl); var txtNode=document.createTextNode(text); childEl.appendChild(txtNode); } Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập. C, Tìm 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 tìm kiếm một phần tử để thay đổi. Trước hết cần bắt đầu tham chiếu qua nút gốc - root node, nút này thể hiện qua biến toàn cục document. Mỗi nút trong DOM là một nút con (hoặc nút con cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn. Vì thế có các cách sau để tìm kiếm một nút nhanh chóng hơn. Mỗi phần tử HTML có một thuộc tính ID, ví dụ như, <p id='hello'> hay <div id='empty'></div> Mỗi một nút 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 nút qua hàm : Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi nút DOM có một nút cha và nhiều nút con. Chúng có thể được truy cập bởi các thuộc tính parentNode và childNodes, thuộc tính parentNode trả về một đối tượng DOM node khác, trong khi childNodes trả về một mảng javascript: var children=empty.childNodes; for (var i=0;i<children.length;i++){ ... } www.my-ebooks.tk
  15. 15. Created by TempAIDS Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName(). Ví dụ, document.getElementsByTagName(quot;ULquot;) sẽ trả về chuỗi tất cả các thẻ <UL> trong tài liệu. Tạo DOM Node Trong nhiều trường hợp cần tạo các nút 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 để tạo nút mới là document.createElement() và document.createTextNode(), phương thức createElement() có thể được dùng để tạo ra bất kỳ phần tử HTML nào, tham số là kiểu của loại thẻ HTML; var childEl=document.createElement(quot;divquot;); createTextNode() tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item. var txtNode=document.createTextNode(quot;some textquot;); Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML. Chúng không có các stye để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn. Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt, phương thức appendChild() được dùng để thực hiện điều này el.appendChild(childEl); Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu. D, Thêm style vào tài liệu DOM cũng cung cấp các phương thức để chỉnh sửa style của các phần tử và tạo định dạng lại cho cấu trúc đã được định nghĩa trong stylesheet. Mỗi phần tử trong trang web có thể có nhiều giao diện trực quan có thể được áp đặt qua DOM, như vị trí, chiều dài và rộng, mằu sắc, canh lề và đường viền. Các trình duyệt ngày nay đều cung cấp các ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng một cách nhất quán và dễ dàng với các lớp CSS. Thuộc tính className Ví dụ đoạn code sau sẽ áp đặt các quy tắc biểu diễn của lớp declared cho một nút: hello.className='declared'; với hello tham chiếu tới một nút DOM. Thuộc tính style Ví dụ, đoạn mã sau bổ sung các thuộc tính style cho nút empty empty.style.border=quot;solid green 2pxquot;; empty.style.width=quot;200pxquot;; Sử dụng thuộc tính innnerHTML Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là innerHTML, cho phép các nội dung kiểu string tùy ý được gán cho các phần tử theo thuộc tính này, như trong đoạn mã sau: function addListItemUsingInnerHTML(el,text){ el.innerHTML+=quot;<div class='programmed'>quot;+text+quot;</div>quot;; } www.my-ebooks.tk
  16. 16. Created by TempAIDS Trên đây ta vừa xét một cách sơ lược về JavaScript, CSS, và DOM. Chúng được tập hợp trong một công nghệ gọi là Dynamic HTML (DHTML), và có thể thấy Ajax sử dụng rất nhiều kỹ thuật DHTML. Như vậy, các bạn đã nắm được 2 công nghệ dùng trong AJAX: CSS và DOM. Trong các phần tiếp theo chúng ta cùng nhau thảo luận về: XML và việc truyền dữ liệu bất đồng bộ (Giới thiệu về XML và XSLT, XMLHttpRequest) và có lẽ cũng nên nói qua một chút về JS (JavaScript). Nhập môn AJAX (8) Tuesday, 13.03.2007, 11:26am (GMT7) VIII, Các công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XML. XML là gì? Năm 1969, IBM đã cho ra đời ngôn ngữ đánh dấu đầu tiên của mình với tên gọi Generalized Markup Language (GML). GML là một ngôn ngữ tự đặc tả sử dụng cho việc đánh dấu cấu trúc của một tập dữ liệu nhất định đồng thời GML được định hướng để trở thành một meta language (siêu ngôn ngữ) – nghĩa là ngôn ngữ dùng để đặc tả cho ngôn ngữ khác. Về sau GML phát triển thành SGML (Standard Generalized Markup Language). Vào năm 1986, SGML được tổ chức ISO công nhận là chuẩn lưu trữ và chuyển đổi dữ liệu. SGML được sử dụng để xây dựng những tài liệu như sách vở, báo cáo, hay cẩm nang tham khảo….Những tài liệu này sẽ được chuyển thành dạng thức biểu diễn được và sau đó gởi chúng ra thiết bị xuất như máy in, màn hình... Tuy nhiên, trở ngại lớn nhất đối với người dùng SGML là chúng quá phức tạp và tiêu tốn nhiều công sức trong việc hiện thực. Vì vậy hầu hết người dùng cá nhân và doanh nghiệp đều không thể đáp ứng những yêu cầu để sử dụng công nghệ hữu dụng này. Năm 1996, Word Wide Web Consortium (W3C) khởi động kế hoạch xây dựng một ngôn ngữ được gọi là XML (eXtensible Markup Language – ngôn ngữ đánh dấu mở rộng) kết hợp được sức mạnh của SGML và tính phổ dụng của HTML. Sự xuất hiện của XML mang lại cho người dùng sức mạnh của SGML với tốn kém ít hơn và không phải đối mặt với sự phức tạp của SGML. Hơn nữa việc viết parser (bộ phân tích từ vựng và cú pháp) cho tài liệu XML cũng đơn giản hơn. Ngoài ra, XML tương thích với các giao thức Internet và phần mềm xử lý, chuyển đổi dữ liệu. XML được xem là một tập con của SGML, vì vậy XML có được khả năng tương thích với những hệ thống dựa trên SGML, giúp nhà phát triển vẫn có thể duy trì được những hệ thống đã được xây dựng trên nền tảng SGML mà không phải tốn kém trong việc chuyển đổi. (đoạn trên là copy n paste) Các đặc điểm của XML 1. XML tương thích với SGML 2. Dễ dàng viết được những chương trình xử lý tài liệu XML 3. Tài liệu XML dễ đọc và có tính hợp lý cao 4. XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn www.my-ebooks.tk
  17. 17. Created by TempAIDS 5. XML dễ dàng được sử dụng trên Internet 6. XML hỗ trợ nhiều ứng dụng 7. Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML Cấu trúc một tài liệu XML Tài liệu XML chỉ chứa đựng dữ liệu và cách lưu trữ dữ liệu mà không hề đề cập tới cách thức trình bày dữ liệu. Một tài liệu XML sẽ chứa những đặc tả về cấu trúc dữ liệu. Mỗi cấu trúc 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 thúc với một thẻ kết thúc (End–tag). Giữa Start–tag và End–tag là nội dung của 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. Dưới đây là một file XML: <?xml version=quot;1.0quot;?> <Catalog> <Product> <ProductID>F10</ProductID> <ProductName>Shimano Calcutta </ProductName> <ListPrice>47.76</ListPrice> </Product> <Product> <ProductID>F20</ProductID> <ProductName>Bantam Lexica</ProductName> <ListPrice>49.99</ListPrice> </Product> </Catalog> Một tài liệu HTML có thể tồn tại một số thẻ không đúng quy định (trình biên dịch sẽ bỏ qua những thẻ này). Tuy nhiên với một tài liệu XML thì điều này không thể xảy ra. Khi xây dựng một tài liệu XML, nó phải tuân thủ theo một số quy luật nào đó. Những tài liệu XML tuân thủ đúng những quy luật này được gọi là well-formed (tạm dịch là định dạng đúng). Với một tài liệu không phải là well–formed, Internet Explorer sẽ thông báo lỗi khi nạp tài liệu này. Một tài liệu XML well–formed chưa chắc là một tài liệu hợp lệ. Một tài liệu XML được xem là hợp lệ nếu nó đảm bảo những quy tắc đặc tả trong tài liệu Document Type Definition (DTD) hay giản đồ (schema). Một DTD hay schema sẽ định nghĩa mọi thứ từ cấu trúc dữ liệu tới kiểu dữ liệu, những thuộc tính được yêu cầu, và những ràng buộc về thành phần và thuộc tính được kết hợp trong tài liệu. Phương thức kiểm tra tài liệu này thường được sử dụng trong giao tiếp giữa ứng dụng - ứng dụng, đảm bảo dữ liệu trao đổi hợp lệ tránh dẫn tới những ảnh hưởng của dữ liệu không hợp lệ trên toàn hệ thống. XSLT - (eXtensible Style Language Transforming) XSLT là một phần của XSL (eXtensible Style Language). XSL là một ngôn ngữ nền tảng XML và ra đời với mục đí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. Internet Explorer được tích hợp XSL transformer giúp tự động chuyển đổi tài liệu XML thành tài liệu HTML. Để sử dụng XSLT, chúng ta phải xây dựng tài liệu XSL chứa những template. Trong những template chúng ta sẽ kết hợp những phần tử HTML sẽ được xuất ra. Công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XMLHttpRequest Các ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khi gử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ông việc của người dùng. Vì thế yêu cầu đặt ra là làm cho các request của server khô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 www.my-ebooks.tk
  18. 18. Created by TempAIDS đầu tiên để giải quyết vấn đề này là dùng IFrame. Cho đến gần đây, XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả. XmlDocument và XMLHttpRequest Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩn DOM mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trình duyệt. Các đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript. Các trì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ột ví dụ sử dụng XmlDocument: function getXMLDocument(){ var xDoc=null; if(document.implementation&&document.implementation. createDocument){ xDoc=document.implementation.createDocument(quot;quot;,quot;quot;,null); }else if (typeof ActiveXObject != quot;undefinedquot;){ var msXmlAx==null; try{ msXmlAx=new ActiveXObject(quot;Msxml2.DOMDocumentquot;); }catch (e){ msXmlAx=new ActiveXObject(quot;Msxml.DOMDocumentquot;); } xDoc=msXmlAx; } if (xDoc==null || typeof xDoc.load==quot;undefinedquot;){ xDoc=null; } return xDoc; } Hàm vừa thực hiện trên sẽ trả về một đối tượng XmlDocument với các hàm API giống nhau trong các trình duyệt hiện nay. Ví dụ sau có chức năng tương tự nhưng dùng cho đối tượng XMLHttpRequest. function getXMLHTTPRequest() { var xRequest=null; if (window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if (typeof ActiveXObject != quot;undefinedquot;){ xRequest=new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } return xRequest; } Gửi một yêu cầu đến server Gửi một yêu cầu đến server từ một đối tượng XMLHttpRequest rất dễ dàng. Tất cả những việc ta cần làm là truyền cho nó địa chỉ URL của server. Ta sẽ làm như sau: function sendRequest(url,params,HttpMethod){ www.my-ebooks.tk
  19. 19. Created by TempAIDS if (!HttpMethod){ HttpMethod=quot;POSTquot;; } var req=getXMLHTTPRequest(); if (req){ req.open(HttpMethod,url,true); req.setRequestHeader(quot;Content-Typequot;,quot;application/ x-www-form urlencodedquot;); req.send(params); } } XMLHttpRequest hỗ trợ một miền rất rộng các lời gọi HTTP, gồm các tham số truy vấn cho các trang web động. Dùng các hàm callback để giám sát các yêu cầu Các hàm callback đón bắt các sự kiện trong cách tiếp cận lập trình hướng sự kiện trong hầu hết các bộ công cụ UI hiện nay – như nhấn bàn phím, click chuột, vì không thể biết được các sự kiện nào sẽ xảy ra, nên các lập trình viên phải đón bắt các sự kiện có thể xảy ra. Khi tạo các giao diện người dùng UI bằng JavaScript, ta gán các hàm onkeypress, onmouseover, và đặt tên tương tự cho các thuộc tính tương đương cho các đối tượng. Khi lập trình cho các yêu cầu cho server, chúng ta gặp các thuộc tính tương tự onload và onreadystatechange. Nhập môn AJAX (9) Friday, 16.03.2007, 01:42pm (GMT7) Đối tượng XMLHttpRequest - Giới thiệu. Bây giờ ta sẽ xét vấn đề trọng tâm của Ajax: đối tượng XMLHttpRequest. XMLHttpRequest được đưa ra ban đầu trong Internet Explorer 5 như là một ActiveX component. Nó chỉ hoạt động trong Internet Explorer điều này làm cho số ít các nhà phát triển làm việc với XMLHttpRequest, cho tới khi nó trở thành một chuẩn không chính thức trong Mozilla 1.0 và Safari 1.2. Một điều rất quan trọng cần chú ý là XMLHttpRequest không là chuẩn của W3C, mặc dù rất nhiều chức năng của nó được đề xuất trong các đặc tả: DOM Level 3 Load and Save Specification. Vì XMLHttpRequest không phải là một chuẩn, nên có những sự khác biệt nhỏ trong các trình duyệt về hỗ trợ đối tượng này, tuy nhiên hầu hết các phương thức và thuộc tính của nó đều được hỗ trợ. Hiện thời, Firefox, Safari, Opera, Konqueror, và Internet Explorer tất cả đều hỗ trợ XMLHttpRequest tương tự nhau. Nếu một số lượng người dùng đáng kể vẫn truy cập website với các trình duyệt phiên bản cũ, thì phải cân nhắc về sự lựa chọn công nghệ sẽ ứng dụng. Giới thiệu về XMLHttpRequest www.my-ebooks.tk
  20. 20. Created by TempAIDS Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi request và xử lý các response. XMLHttpRequest chưa là chuẩn của W3C, vì thế phải dùng JavaScript theo nhiều cách để tạo một thể hiện của của XMLHttpRequest. Internet Explorer thực thi XMLHttpRequest như một đối tượng ActiveX, và các trình duyệt khác như Firefox, Safari, và Opera thực thi nó như một đối tượng JavaScript nguyên thủy. Vì sự khác nhau này, đoạn mã JavaScript phải chứa các cấu trúc logic để tạo một thể hiện của XMLHttpRequest dùng kỹ thuật ActiveX hay đối tượng JavaScript nguyên thủy. Rất may mắn, trong trường hợp này không cần phải viết mã một cách tỉ mỉ để xác định kiểu trình duyệt và làm thế nào để tạo một thể hiện của đối tượng XMLHttpRequest. Công việc chỉ đơn giản là kiểm tra sự hỗ trợ đối tượng ActiveX của trình duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng ActiveX. Trường hợp khác, tạo đối tượng này bằng kỹ thuật tạo đối tượng JavaScript nguyên thủy. Đoạn mã JavaScript sau dễ dàng tạo ra các thể hiện của đối tượng XMLHttpRequest mà không quan tâm tới trình duyệt. Tạo một thể hiện của đối tượng XMLHttpRequest: var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } Việc tạo một đối tượng XMLHttpRequest khá là đơn giản. Trước tiên, tạo một biến toàn cục (giả sử có tên là) xmlHttp để lưu trữ một tham chiếu đến đối tượng. Phương thức createXMLHttpRequest thực hiện việc tạo một thể hiện của XMLHttpRequest. Đoạn chương trình này chứa một câu lệnh rẽ nhánh đơn giản để xác định cách thức tạo một đối tượng. Lệnh gọi window.ActiveXObject sẽ trả về một biến kiểu object hay giá trị null, tương đương với điều kiện true hay false của câu lệnh if, đây là dấu hiệu chỉ ra cho ta biết trình duyệt hỗ trợ ActiveX control, đó là Internet Explorer. Nếu thế, XMLHttpRequest được tạo ra là một thể hiện của ActiveXObject, truyền một chỉ báo kiểu string để xác định loại đối tượng ActiveX cần tạo. Trong thể hiện này, ta cung cấp tham số Microsoft.XMLHTTP cho hàm tạo, để chỉ ra rằng cần tạo một thể hiện của XMLHttpRequest. Nếu lệnh gọi tới window.ActiveXObject không được thực thi (điều kiện false của lệnh if), lệnh JavaScript sẽ rẽ nhánh tương ứng với lệnh else, để xác định rằng trình duyệt thực thi XMLHttpRequest dưới dạng một đối tượng JavaScript nguyên thủy. Nếu window.XMLHttpRequest tồn tại, sau đó một thể hiện của XMLHttpRequest được tạo ra. Kiểu dữ liệu XMLHttpRequest của JavaScript tương thích với rất nhiều trình duyệt khác nhau, có thể truy cập các thuộc tính và phương thức của một thể hiện của XMLHttpRequest mà không cần quan tâm www.my-ebooks.tk
  21. 21. Created by TempAIDS tới cách tạo các thể hiện này. Điều này làm cho việc phát triển các ứng dụng đơn giản hơn và làm cho JavaScript không phụ thuộc vào trình duyệt cụ thể. Nhập môn AJAX (10) Monday, 19.03.2007, 08:48am (GMT7) Đối tượng XMLHttpRequest - Phân tích các đặc tính - Phương thức và thuộc tính Phân tích các đặc tính của XMLHttpRequest: Các phương thức và thuộc tính Danh mục sau chỉ ra các phương thức điển hình của đối tượng XMLHttpRequest: abort() Hủy request hiện thời. getAllResponseHeaders() Trả về tất cả các response header cho HTTP request dưới dạng cặp key/value. getResponseHeader(quot;headerquot;) Trả về giá trị kiểu string của header xác định. open(quot;methodquot;, quot;urlquot;) Thiết lập giai đoạn cho một lời gọi tới server. Tham số của method có thể là GET, POST, hay PUT. Tham số url có thể là quan hệ hay trực tiếp. Phương thức này còn có 3 tham số tùy chọn. send(content) Gửi request tới server. setRequestHeader(quot;headerquot;, quot;valuequot;) Thiết lập header xác định cho giá trị cung cấp. open() phải được gọi trước khi cố gắng thiết lập bất kỳ một header nào. Bây giờ ta xét cụ thể các phương thức này: void 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. Ý nghĩa của nó này là khởi tạo 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ả của phương thức được triệu gọi (GET, POST, hay PUT) và địa chỉ URL của tài nguyên được gọi. Cũng có thể truyền một biến chỉ báo kiểu Boolean, xác định việc truyền là bất đồng bộ - giá trị mặc định là true, nghĩa là các request luôn bất đồng bộ theo mặc định. Nếu truyền một giá trị false, quá trình xử lí sẽ phải đợi cho đến khi có phản hồi từ server. Việc truyền dữ liệu bất đồng bộ là một lợi www.my-ebooks.tk
  22. 22. Created by TempAIDS thế của việc dùng Ajax, vì vậy thiết lập tham số này ở giá trị false đã thay đổi mục đích việc sử dụng XMLHttpRequest. Ta thấy nó rất hữu ích trong một số trường hợp chẳng hạn như chứng thực người dùng (validating user) trong khi trang web của không hề bị thay đổi. Hai tham số cuối tùy chọn, cho phép sử dụng username và password. 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. Tham số có thể là một thể hiện của một đối tượng DOM, một luồng dữ liệu vào (input stream), hay một kiểu string. Nội dung truyền cho phương thức này được gửi đi như một phần trong request. void setRequestHeader(string header, string value): Phương thức thiết lập giá trị cho phần  header đã cho trong HTTP request. Tham số bao gồm một biến kiểu string biểu thị header được thiết lập và một string khác biểu diễn giá trị để thay thế trong header. Chú ý là nó cần phải được gọi trước khi gọi đến open(). Trong hầu hết các phương thức thì cặp open() và send() thường xuyên được gọi. void abort(): Phương thức này rất dễ hiểu, nó sẽ hủy request.  string getAllResponseHeaders(): Trả về một biến kiểu string chứa response header của HTTP  request. Header bao gồm các trường Content-Length, Date, và URI. string getResponseHeader(string header): Phương thức này tương tự như  getAllResponseHeaders(); ngoại trừ việc nó nhận một tham số biểu diễn giá trị xác định header mà ta cấn đón bắt, giá trị trả về cũng có kiểu string. Ngoài những phương thức chuẩn này, đối tượng XMLHttpRequest còn có các thuộc tính được liệt kê sau đây. Anh em chú ý ta sẽ phải sử dụng các thuộc tính mở rộng này khi làm việc với XMLHttpRequest. onreadystatechange Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi trạng thái. readyState Trạng thái của request. Có 5 giá trị là 0 = uninitialized,1 = loading, 2 = loaded, 3 = interactive, và 4 = complete. responseText Response trả về từ server dưới dạng string. responseXML Response trả về từ server dưới dạng XML. Đối tượng này có thể được phân tách và khảo sát như một đối tượng tài liệu DOM. status Mã trạng thái HTTP từ server (chẳng hạn 200 nếu không có lỗi, 404 cho lỗi Not Found, …). statusText Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not Found, …). www.my-ebooks.tk
  23. 23. Created by TempAIDS Nhập môn AJAX (11) Wednesday, 21.03.2007, 08:38am (GMT7) Đối tượng XMLHttpRequest - Phân tích các đặc tính - Sự tương tác Sự tương tác Ta xét một ví dụ để tìm hiểu các tương tác của Ajax. Hình sau cho thấy mô hình tương tác chuẩn trong một ứng dụng Ajax. Không giống như các cách tiếp cận kiểu request/response thông thường trong các chuẩn Web client, một ứng dụng Ajax có những khác biệt, sau đây là mô tả quá trình tương tác: 1. 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 cũng 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 của người dùng. Ví dụ với đoạn mã sau: <input type=quot;textquot; id=quot;emailquot; name=quot;emailquot; onblur = quot;validateEmail()quot;;> 2. Một thể hiện của XMLHttpRequest được tạo ra. Dùng phương thức open(), tạo lời gọi hàm - địa 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 tạo ra qua việc gọi phương thức send(). Đoạn mã nguồn sau thể hiện điều đó: var xmlHttp; function validateEmail() { var email = document.getElementById(quot;emailquot;); var url = quot;validate?email=quot; + escape(email.value); www.my-ebooks.tk
  24. 24. Created by TempAIDS if (window.ActiveXObject) { xmlHttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } xmlHttp.open(quot;GETquot;, url); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } 3. Một request được tạo và gửi đến server. Có thể là một lời gọi tới một servlet, một CGI script, hay một công nghệ phía server nào đó tương tự như ASP.NET, JSP, hay PHP… 4. Server xử lí các yêu cầu, chẳng hạn như truy cập cơ sở dữ liệu hay một tác vụ hệ thống nào đấy. 5. Response được trả về cho trình duyệt. Trường Content-Type được thiết lập ở dạng text/xml; XMLHttpRequest chỉ có thể xử lí kết quả dạng text/html. Trong các thể hiện phức tạp hơn, response khá rắc rối và bao gồm JavaScript, các thao tác trên đối tượng DOM, hoặc các công nghệ liên quan khác. Chú ý là cũng cần thiết lập header vì thế trình duyệt sẽ không lưu kết quả một cách cục bộ. Ta sẽ làm như sau: response.setHeader(quot;Cache-Controlquot;, quot;no-cachequot;); response.setHeader(quot;Pragmaquot;, quot;no-cachequot;); 6. Trong ví dụ sau, cấu hình 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ã trạng thái trả về từ server. Mọi thứ hoàn toàn bình thường, hàm callback() có thể làm nhiều việc trên phía client. Một phương thức callback thường có dạng sau: function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } } } Có một số khác biệt với mô hình request/response thông thường nhưng không quá lạ lẫm đối với các lập trình viên Web. Rõ ràng, phải xem xét thêm về việc tạo và thiết lập một đối tượng XMLHttpRequest và sau đó (hàm) callback sẽ kiểm tra các trạng thái. Thường thì các lời gọi chuẩn này được đóng gói vào một thư viện để dùng trong ứng dụng, hay nói cách khác là dùng một thư viện có sẵn để thực thi Ajax cho ứng dụng Web (có rất nhiều thư viện như thế, ta sẽ xét trong các phần sau). Ajax là vấn đề tuy còn mới mẻ, nhưng đã có một lượng đáng kể các thư viện và ứng dụng mã nguồn mở được công bố. Hầu hết các framework và toolkit Ajax trên các trang Web đều dùng các kĩ thuật cơ bản và trừu tượng hóa các trình duyệt, và thêm vào một số component giao diện người dùng (UI). Một số là các framework thuần client; còn lại làm việc trên server. Nhiều framework trong số này mới được bắt đầu xây dựng, nhưng chúng liên tục có www.my-ebooks.tk
  25. 25. Created by TempAIDS các phiên bản và có thên các thư viện mới. Một số giải pháp để thực thi Ajax là các thư viện Ajax.NET, Atlas, libXmlRequest, RSLite, sarissa, JavaScript Object Notation (JSON), JSRS, Direct Web Remoting (DWR), và Ruby on Rails… Bài sau chúng ta sẽ phân tích quot;Các phương thức GET và POSTquot;. Nhập môn AJAX (12) Friday, 23.03.2007, 09:03am (GMT7) Đối tượng XMLHttpRequest - Phân tích các đặc tính - GET & POST Các phương thức GET và POST Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều request sẽ trả về cùng kết quả. Trong thực tế, nếu phương thức tương ứng ở server thay đổi trạng thái theo một vài cách, thì điều này không còn đúng nữa. Điều này có nghĩa, nó là một chuẩn. Có rất nhiều sự khác biệt với chuẩn trong điều kiện kích thước của phần đệm (payload) - trong nhiều trường hợp, các trình duyệt và server sẽ giới hạn độ dài của địa chỉ URL sử dụng để gửi dữ liệu tới server. Tóm lại, dùng GET để truy lục dữ liệu từ server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi GET. Phương thức POST được dùng khi muốn thay đổi trạng thái trên server. Không giống như GET, phải thiết lập phần Content-Type header trên đối tượng XMLHttpRequest như sau: xmlHttp.setRequestHeader(quot;Content-Typequot;,quot;application/ x-www-form-urlencodedquot;); POST không hạn chế kích thước của payload được gửi tới server, và POST request không cần bảo đảm tính không đổi. Hầu hết các request được thiết lập ở GET request; tuy nhiên trạng thái POST cũng luôn sẵn sàng khi cần thiết. Đối tượng XMLHttpRequest - Remote Scripting - Giới thiệu Remote Scripting Về cơ bản, remote scripting là một loại lời gọi các thủ tục từ xa. Sự tương tác với server vẫn như các ứng dụng Web thông thường, nhưng không tái nạp (refresh) toàn bộ trang web. Chỉ với AJAX, mới có thể sử dụng công nghệ bất kỳ phía server để có thể nhận các request, xử lí chúng 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. Có thể nhúng vào các đoạn Flash, Java applet, hay các ActiveX vào ứng dụng. Thậm chí cũng có thể www.my-ebooks.tk
  26. 26. Created by TempAIDS dùng một số công nghệ như XML-RPC, nhưng sự phức tạp của phương pháp này làm giảm tính phổ biến của nó. Cách thực thi cơ bản đối với remote scripting bao gồm phối hợp một cripting với một IFRAME và server trả về các đoạn mã JavaScript, các đoạn mã này sẽ được chạy trong trình duyệt. Microsoft có giải pháp riêng về remote scripting, được gọi là Microsoft Remote Scripting (MSRS), cho phép gọi các server script giống như là chúng cục bộ. Một Java applet được nhúng vào trang web để làm cho sự liên lạc với server được dễ dàng, một trang asp được dùng để chứa các script phía server, một file .html quản lí bên phía client. Có thể dùng các giải pháp của Microsoft với Netscape và Internet Explorer 4.0 trở nên. Các lời gọi hàm này có thể đồng bộ hay bất đồng bộ. Tuy nhiên giải pháp này yêu cầu Java, có nghĩa là cần có sự cài đặt thêm vào, và nó phụ thuộc vào trình Internet Information Services (IIS), từ đó làm giảm sự lựa chọn cho phía server. Ví dụ về Remote Scripting Để so sánh, chúng ta cùng xét một ví dụ về công nghệ tương tự AJAX được thực thi như thế nào dùng IFRAME. Ví dụ sau chỉ ra việc dùng IFRAME cho remote scripting. Trong ví dụ này có hai file iframe.html và server.html. Server.html giả lập một response được trả về từ server. iframe.html <html> <head> <title>Example of remote scripting in an IFRAME</title> </head> <script type=quot;text/javascriptquot;> function handleResponse() { alert('this function is called from server.html'); } </script> <body> <h1>Remote Scripting with an IFRAME</h1> <iframe id=quot;beforexhrquot; name=quot;beforexhrquot; style=quot;width:0px; height:0px; border: 0pxquot; src=quot;blank.htmlquot;></iframe> <a href=quot;server.htmlquot; target=quot;beforexhrquot;>call the server </a> </body> </html> server.html <html> <head> <title>the server</title> </head> <script type=quot;text/javascriptquot;> www.my-ebooks.tk
  27. 27. Created by TempAIDS window.parent.handleResponse(); </script> <body> </body> </html> Nhập môn AJAX (13) Wednesday, 28.03.2007, 11:00am (GMT7) Đối tượng XMLHttpRequest - Gửi các request. Bây giờ ta sẽ thảo luận xem cách sử dụng đối tượng XMLHttpRequest. Ở các phần trước đã đề cập đến cách tạo đối tượng này, bây giờ ta sẽ chỉ ra làm thế nào để gửi request tới server và xử lí các response từ server. Request đơn giản nhất là một request mà không chứa một thông tin nào cả, tức là các form tham số truy vấn hay form gửi dữ liệu là trống. Trong thực tế thì luôn gửi các request mang thông tin đến server. Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là: 1. Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách tạo mới hay truy cập vào một biến có thể hiện của XMLHttpRequest. www.my-ebooks.tk
  28. 28. Created by TempAIDS 2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Ta hoàn thành việc này bằng cách thiết lập thuộc tính onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript. 3. Gán các thuộc tính của request. Phương thức open() của đối tượng XMLHttpRequest được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ. 4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên. Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request. Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng XMLHttpRequest, chỉ ra xem nó cần làm gì khi thay đổi trạng thái, khi nào thì gửi các request và gửi như thế nào, và cuối cùng là định hướng XMLHttpRequest để truyền request. Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa chỉ trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham số qua con trỏ hàm rất linh động và mềm dẻo hay lưu trữ một con trỏ hàm trong một thuộc tính của lớp. Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ tới hàm callback. Hàm callback được gọi khi trạng thái nội tại của đối tượng XMLHttpRequest thay đổi. Khi một lời gọi bất đồng bộ được tạo ra, request được truyền đi, và script tiếp tục xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp tục. Mỗi lần request được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi. Ví dụ về một Request đơn giản Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi tạo một request bất đồng bộ gửi tới server. Server sẽ đáp ứng bằng cách gửi một file text đơn giản. Response được hiển thị nội dung trên một cửa sổ alert. simpleRequest.html <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <title>Simple XMLHttpRequest</title> <script type=quot;text/javascriptquot;> var xmlHttp; function createXMLHttpRequest() { www.my-ebooks.tk
  29. 29. Created by TempAIDS if (window.ActiveXObject) { xmlHttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(quot;GETquot;, quot;simpleResponse.xmlquot;, true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert(quot;The server replied with:quot; + xmlHttp.responseText); } } } </script> </head> <body> <form action=quot;#quot;> <input type=quot;buttonquot; value=quot;Start Basic Asynchronous Requestquot; onclick=quot;startRequest();quot;/> </form> </body> </html> File response của server, simpleResponse.xml, chứa một dòng text duy nhất. Khi nhấn vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background (còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response của server cần vài giây để trả về, trình duyệt sẽ không thể đáp ứng người dùng trong thời gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục làm việc trong khi server tiếp tục làm việc với request trước trong background. Khả năng liên lạc với server; không có lỗi ngắt; với luồng làm việc của người dùng đã mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như chứng thực dữ liệu nhập từ www.my-ebooks.tk
  30. 30. Created by TempAIDS người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm chứng mà không cần ngắt quãng quá trình điền dữ liệu vào form nhập. Nếu nhập dữ liệu không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được gửi đến server để xử lí, điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu trên server, nội dung của form sẽ không được nạp lại sau một form đệ trình không thành công. Vấn đề bảo mật: Bất kỳ một công nghệ nào dựa trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt. Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và cho phép người dùng sự lựa chọn có tiếp tục với request đó nữa hay không. Trình duyệt Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript. Đối tượng XMLHttpRequest - DOM Level 3 và DOM. DOM Level 3 Các giải pháp đã thảo luận ở trên không phải là các chuẩn. Mặc dù XMLHttpRequest đã được hỗ trợ rất rộng, song vẫn có thể thấy một số sự khác biệt với từng trình duyệt. Nhiều người tin rằng Ajax dựa vào sự hỗ trợ của W3C; tuy nhiên thực tế không phải vậy. W3C đã bắt đầu chú trọng vào điều này và mộ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. Phiên bản 1.0 được giới thiệu vào tháng 4/2004, nhưng hiện thời chưa trình duyệt nào thực hiện theo nó DOM DOM là một đặc tả của W3C cho một platform độc lập với ngôn ngữ lập trình để truy cập và sửa đổi nội dung và cấu trúc của tài liệu. Một cách hiểu khác, nó là một cách thông dụng để biểu diễn và thao tác một tài liệu HTML hay XML. Một điều quan trọng cần lưu ý là thiết kế của DOM dựa trên đặc tả của Object Management Group, cho phép sử dụng với bất kỳ ngôn ngữ lập trình nào. Ban đầu DOM được thiết kế để làm cho JavaScript linh động với các trình duyệt, sau đó nó phát triển ra khỏi giới hạn này. DOM là một mô hình đối tượng trong ngữ cảnh hướng đối tượng. DOM xác định các đối tượng cần thiết để biểu diễn và thay đổi tài liệu, các hành vi và thuộc tính của các đối tượng này, và mối liên hệ giữa các đối tượng. Có thể coi DOM như một cây biểu diễn dữ liệu và cấu trúc của trang web, mặc dù thực tế nó có thể không theo cách như vậy. Simple Table <table> <tbody> <tr> www.my-ebooks.tk
  31. 31. Created by TempAIDS <td>Foo</td> <td>Bar</td> </tr> </tbody> </table> Có thể biểu diễn theo DOM của bảng trên. Lợi thế của đặc tả DOM là nó cung cấp một chuẩn để tương tác với tài liệu. Không có DOM, không thể thực thi được Ajax. DOM không chỉ cho phép duyệt và chỉnh sửa nội dung, mà còn làm cho trang web trở thành các trang động. Kết luận cho các loạt bài về: Đối tượng XMLHttpRequest Chúng ta vừa xem xét các kỹ thuật cơ bản và là “trái tim” của 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á trình tái nạp trang web và sự đồng bộ với server nữa. Trong phần sau chúng ta sẽ cùng nhau nghiên cứu về: Gửi các request và xử lý response Sau đó mới đến: Kỹ thuật lập trình với AJAX. Nhập môn AJAX (14) Friday, 30.03.2007, 08:02am (GMT7) Trước hết chúng ta cùng tìm hiểu hoạt đông của giao thức HTTP truyền thống - Hypertext Transfer Protocol, xem xét các bản tin – message của giao thức này. Thay vì quan tâm đến các bit hay byte, chúng ta để ý đến các từ ngữ (thông báo) được xác định trong đặc tả HTTP và các quy tắc kết hợp chúng lại với nhau. Một HTTP message bắt đầu với một dòng request hay status, tiếp theo có thể là nhiều loại headers và phần message body. Cấu trúc của HTTP Message HTTP là một giao thức kiểu client/server; client đưa ra các request, và server sẽ trả lời các request này. Cấu trúc các HTTP message vì thế cũng thay đổi theo yếu tố này. Có một định dạng cho HTTP request và cho các response. HTTP Request Mỗi request bắt đầu với một Request-Line. Dòng này chỉ ra phương thức mà client yêu cầu, tài nguyên, và phiên bản của HTTP mà client có thể hỗ trợ. Request-Line có thể có tiếp sau một hay nhiều header và một message body. Một HTTP request bắt đầu với một Request-Line và có thể bao gồm các header và message body. Phần header có thể mô tả quá việc truyền dữ liệu, xác định các yêu cầu hay phần message body kèm theo. www.my-ebooks.tk
  32. 32. Created by TempAIDS GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Request-Line chứa ba mục phân biệt, đó là method, uri, và phiên bản HTTP, mỗi mục được phân tách bởi một hay nhiều khoảng trống. Một HTTP Request-Line có một phương thức, một địa chỉ định danh tài nguyên (URI), và thông báo phiên bản HTTP. Phương thức được xác định trên dòng đầu tiên của Request-Line. HTTP định nghĩa tất cả là 8 phương thức. Một HTTP server chỉ được yêu cầu hỗ trợ các phương thức GET và HEAD; nếu chúng hỗ trợ các phương thức HTTP khác, sự hỗ trợ đó phải được gắn với các quy tắc của HTTP. Đặc tả HTTP cũng có các mở rộng để các phương thức khác có thể được bổ sung trong tương lai. Mục tiếp theo trong Request-Line là Request-uri. Mục này cung cấp địa chỉ định danh tài nguyên cho một tài nguyên. Ví dụ, Request-uri là /, chỉ ra một request cho tài nguyên gốc. Cho các request không yêu cầu một tài nguyên cụ thể (như là TRACE request hay trong một số trường hợp cả OPTIONS request), client có thể dùng một dấu * cho Request-uri. Mục cuối cùng trong Request-Line là phiên bản HTTP. Như trong ví dụ, phiên bản HTTP là 1.1 chứa trong đoạn text HTTP/1.1. Tiếp sau Request-Line, một HTTP request có thể bao gồm một hay nhiều dòng message header. Một message header có thể chứa các loại general header, request header, hoặc entity header. General header áp dụng trong truyền dữ liệu; request header áp dụng cho các request cụ thể, và entity header áp dụng cho message body trong request. www.my-ebooks.tk
  33. 33. Created by TempAIDS Một HTTP request luôn chứa một dòng trống sau Request-Line và bất kỳ header nào. Nếu request bao gồm một message body, phần body đi sau một dòng trống. Dòng trống - blank line rất quan trọng vì server xác định được phần kết của request, hoặc phần kết của header. Không có dòng trống, server nhận các message sẽ không biết được các header khác nữa có tiếp tục được truyền không. HTTP Response HTTP Response khá giống với HTTP Request. Dấu hiệu khác biệt duy nhất là response bắt đầu với một dòng trạng thái status so với Request-Line. Status-Line, cũng giống như Request-Line, chứa ba mục ngăn cách bởi các khoảng trống. Một HTTP response bắt đầu với một Status-Line và có thể chứa các header và một message body. Header có thể mô tả quá trình truyền dữ liệu, xác định response, hoặc phần body kèm theo. Dòng bắt đầu với phiên bản cao nhất của HTTP mà server hỗ trợ. HTTP/1.1 200 OK Date: Sun, 08 Oct 2000 18:46:12 GMT Server: Apache/1.3.6 (Unix) Keep-Alive: timeout=5, max=120 Connection: Keep-Alive Content-Type: text/html <html>... HTTP Status-Line bắt đầu với chỉ báo HTTP, mã trạng thái, và một đoạn text mô tả response. Hai mục còn lại trong Status-Line là Status-Code và Reason-Phrase. Status-Code là một bộ ba kí tự chỉ báo kết quả của request. Status-Code phổ biến nhất là 200. Giá trị này thông báo yêu cầu của client thành công. Phân loại HTTP Status Code: (Xem file attach) Header Field www.my-ebooks.tk
  34. 34. Created by TempAIDS HTTP request và response có thể có một hay nhiều message header. Message header bắt đầu với tên trường và dấu (“:”). Trong một số trường hợp, chỉ có tên trường trong phần header. Trong hầu hết các trường hợp khác header chứa các thêm thông tin khác nữa, các thông tin này đi sau dấu “:”. Một message header kết thúc ở cuối dòng, nhưng nếu một client cần biểu diễn nhiều hơn một dòng thì dòng tiếp theo sẽ bắt đầu với một hay nhiều kí tự trống hay kí tự gạch ngang (ascii character 8). Ví dụ sau là của User-Agent header: GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Nếu một message header chứa một chuỗi giá trị phân tách bởi dấu “,”; ta có thể tách ra thành các dòng riêng, như ví dụ sau tách các giá trị của Accept-Encoding: GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip Accept-Encoding: deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Bảng sau thể hiện các HeaderField, phạm vi áp dụng của chúng trong các request hay response, hay trong message body (entity) đi kèm với request hay response. www.my-ebooks.tk
  35. 35. Created by TempAIDS www.my-ebooks.tk
  36. 36. Created by TempAIDS www.my-ebooks.tk

×