Bài viết sưu tầm

1.2. Web 2.0 và công nghệ AJAX

1.2.1 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 "ảo" chứ không chỉ "duyệt và xem".

1.2.1.1 Khái niệm

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. Có 7 đặc tính của Web 2.0:

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

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

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

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

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

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

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

1.2.1.2 Công nghệ

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

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.

Dịch vụ web

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 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ệ.

Phần mềm máy chủ

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 "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API.

1.2.2 Các vấn đề nảy sinh và sự ra đời của AJAX

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 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. 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). Ajax ra đời là một giải pháp cho các ứng dụng Web hiện nay.

1.2.3 AJAX là gì ?

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.

1.2.4 Các thế mạnh của AJAX

            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:

-         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ũ.

 Hình 1.1 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.

Hình 1.2 So sánh hai mô hình ứng dụng Web:truyền thống và sử dụng Ajax

Hình 1.3 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 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.

1.3. Các công nghệ 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 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.

1.3.1. Cascading Style Sheet – CSS

1.3.1.1 Giới thiệu về 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. 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. 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 :

-         Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)

-         Định nghĩa trong một trang web (Internal Style Sheet).

-         Định nghĩa thành một file CSS riêng (External Style Sheet). Trang web của chúng ta sẽ tham 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.

1.3.1.2 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

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

d. Thứ tự áp dụng các  định dạng

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

-         Internal Style (Style được qui định trong phần <HEAD> của một 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)

1.3.1.3 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)

-         Thuộc tính (Property)

-         Giá trị (Value)

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="stylesheet" type="text/css"   href="mystyle.css" /> </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="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </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="color: sienna; margin-left: 20px"> This is a paragraph </p>

1.3.1.4 Các thuộc tính củaCSS 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; }

1.3.2. Document Object Model – DOM

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 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.

1.3.2.1 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ồn JavaScript 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'); hello.className='declared'; var empty=document.getElementById('empty'); addNode(empty,"reader of"); addNode(empty,"Ajax in Action!"); 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="200px"; } function addNode(el,text){ var childEl=document.createElement("div"); 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.

1.3.2.2 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++){ ... }

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("UL")

sẽ trả về chuỗi tất cả các thẻ <UL> trong tài liệu.

1.3.2.3 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("div"); var txtNode=document.createTextNode("some text");

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.

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

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.

1.3.2.4 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.

Thuộc tính className

hello.className='declared';

với hellotham 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="solid green 2px"; empty.style.width="200px";

1.3.2.5 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.