AJAX - Công nghệ tương tác web linh hoạt cho thời đại Web 2.0

MỤC LỤC

Quá trình phát triển công nghệ Web- Nguyên nhân xuất hiện công nghệ AJAX

Applet

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ể thực thi trên phía client. 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.

JavaScript

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

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

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

Khái niệm AJAX .1 AJAX là gì?

AJAX hoạt động như thế nào?

"Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý AJAX, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ", Jesse James Garrett đã ghi trong bài viết đầu tiên định nghĩa về thuật ngữ này. "Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, AJAX sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web".

AJAX - SỰ KHÁC BIỆT

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

Các công nghệ AJAX

Các công nghệ trong AJAX - CSS .1 CSS

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

    Công nghệ trong AJAX - Javascript

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

    Các công nghệ trong AJAX - DOM .1 DOM

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

      Các công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XML

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

        Đối tượng XMLHttpRequest

          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 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. 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 tới cách tạo các thể hiện này.

          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

          • HTTP

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

            AJAX – TƯƠNG LAI CỦA ỨNG DỤNG WEB

              Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng). Cách an toàn nhất là chỉ sử dụng Ajax để thực hiện các tác vụ kiểm tra mà không tác động trực tiếp đến dữ liệu, hoặc là bạn phải chắc chắn rằng mình cung cấp một cơ chế để khôi phục các lỗi vô tình, hoặc là bạn tạo ra một cơ chế để xác nhận mỗi khi hành động của người dùng có khả năng tạo ra những thay đổi dữ liệu. Một điểm phức tạp là trình duyệt IE và Mozilla hỗ trợ XMLHttpRequest theo hai phương thức hoàn toàn khác nhau (IE sử dụng ActiveX, còn Mozilla thì hỗ trợ sẵn ngay bên trong trình duyệt) nên để đảm bảo tính tương thích, bạn sẽ cần phải kiểm tra xem người dùng sử dụng trình duyệt nào rồi khởi tạo đối tượng XMLHttpRequest theo cách thức mà trình duyệt đó hỗ trợ.