Lập trình web đơn giản và tiết kiệm thời gian hơn với Ajax

Bạn muốn tiết kiệm thời gian nhưng vẫn tạo được những ứng dụng di động cùng trang web có vẻ đẹp riêng, cá tính và mạnh mẽ? Chỉ với HTML, CSS, và JavaScript là chưa đủ, bạn hãy tìm hiểu và ứng dụng Ajax ngay từ hôm nay.

itnavi-0207-01

1. AJAX là gì?

AJAX  (Asynchronous Javascript and XML) là một thuật ngữ chung cho các kỹ thuật Javascript khác nhau, giúp cho các ứng dụng web hoạt động bất đồng bộ và xử lý mọi yêu cầu tới server từ phía sau. Từ Ajax được cha đẻ của nó – ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 năm 2005 để chỉ kỹ thuật này, với ý nghĩa:

  • Asynchronous – bất đồng bộ. Một chương trình hoạt động theo kiểu bất đồng bộ có thể xử lý các hàm theo cách không tuần tự, không cần tuân theo quy trình, có thể bỏ qua bước nào đó để thực hiện 1 bước khác. Ích lợi dễ thấy nhất của cách hoạt động này là chương trình có thể xử lý nhiều công việc một lúc.
  • JavaScript thì là một ngôn ngữ lập trình web nổi tiếng. Trong số rất nhiều chức năng của nó là khả năng quản lý nội dung động của website và hỗ trợ tương tác với người dùng.
  • XML là một dạng của ngôn ngữ markup như HTML, chữ đầy đủ của nó là eXtensible Markup Language. Nếu HTML được dùng để hiển thị dữ liệu, XML được thiết kế để chứa dữ liệu.

Từ các định nghĩa này, kết hợp lại ta thấy điều nổi bật của Ajax  chính là JavaScript và XML đều hoạt động bất đồng bộ. Kết quả là, nhiều ứng dụng web có thể sử dụng AJAX để gửi và nhận data từ server mà không phải toàn bộ trang.

Giới thiệu tới bạn đọc Jobs hot Panasonic tháng 07/2020

2. Cách hoạt động của AJAX

itnavi-0207-02
Cách hoạt động của AJAX

Bộ hệ thống này bao gồm:

  • HTML/XHTML làm ngôn ngữ chính và CSS để tạo phong cách.
  • Document Object Model (DOM) để hiển thị dữ liệu động và tạo tương tác.
  • XML để trao đổi dữ liệu nội bộ và XSLT để xử lý nó. Nhiều lập trình viên đã thay thế bằng JSON vì nó gần với JavaScript hơn.
  • XMLHttpRequest object để giao tiếp bất đồng bộ.
  • Cuối cùng, JavaScript là ngôn ngữ lập trình để kết nối toàn bộ các công nghệ trên với nhau.

3. Tại sao nên sử dụng công nghệ AJAX

Trải nghiệm người dùng là rất quan trọng với developer chúng ta. Khi bạn viết xong một trang web thì bạn chỉ hoàn tất một phần công việc mà thôi. Viết xong mà không ai dùng thì ta chỉ phí sức vô ích. Người sử dụng ai cũng thích thao tác đơn giản, nhanh gọn và rất ghét những việc như chỉ cần một thay đổi nhỏ mà phải load lại cả trang web, cứ phải tải đi, tải lại nhiều thứ không cần thiết. AJAX đem đến cho bạn những giải pháp giải quyết vấn đề này của người sử dụng như:

  • AJAX được sử dụng để thực hiện một cuộc gọi lại. Được dùng để thực hiện việc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại cả trang. Với những server nhỏ thì việc này cũng tiết kiệm được băng thông hơn.
  • Cần gì thì chỉ gửi phần đó, load lại phần đó chứ không load cả trang. Bằng cách này thì có thể giảm thiểu được tốc độ tải trang giúp người dùng có trải nghiệm tốt hơn.
  • Việc dùng các yêu cầu không đồng bộ cho phép giao diện người dùng của ứng dụng hiển thị trên trình duyệt giúp người dùng trải nghiệm sự tương tác cao, với nhiều phần riêng lẻ. 
  • Sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và các style sheet chỉ phải yêu cầu một lần.
  • Trang web bạn tạo ra cũng sẽ đa dạng, phong phú hơn.
  • Với lập trình viên chúng ta thì nó khá dễ học và dễ dùng.

Mình lấy một so sánh giữa mô hình truyền thống và mô hình áp dụng AJAX để bạn hình dung những lợi ích vừa kể:

itnavi-0207-03
So sánh giữa mô hình truyền thống và mô hình áp dụng AJAX
Mô hình truyền thống Mô hình áp dụng AJAX
1. HTTP được gửi từ trình duyệt lên máy chủ.

2. Máy chủ nhận, sau đó phản truy xuất thông tin.

3. Server gửi dữ liệu được yêu cầu lại cho trình duyệt.

4. Trình duyệt nhận dữ liệu và tải lại trang để hiển thị dữ liệu lên.

1. Từ trình duyệt của chúng ta, ta có một sự kiện để gọi ajax. Khi đó JavaScript sẽ tạo một đối tượng XMLHttpRequest.

2. Ở dưới nền, trình duyệt tạo một yêu cầu HTTP gửi lên server.

3. Server tiếp nhận, truy xuất và gửi lại dữ liệu respond cho trình duyệt.

4. Trình duyệt nhận dữ liệu từ server và ngay lập tức hiển thị lên trang. Không cần tải lại toàn bộ trang.

Trong suốt quá trình này, người sử dụng chẳng làm gì được ngoài việc ngồi chờ cho đến khi tiến trình thực hiện xong hết. Do đó, nó không chỉ làm mất thời gian của họ mà còn tải đi tải lại nhiều thứ mà người sử dụng không quan tâm đến. Rõ ràng tốc độ tải trang được cải thiện đáng kể và người sử dụng có thể làm việc với dữ liệu mình cần liên tục, không bị gián đoạn.

Tuy nhiên bạn cần biết 1 số nhược điểm:

  • Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt, do đó nút “back” (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái trước đó của trang sử dụng Ajax, để khắc phục có thể dùng các IFrame không hiển thị để gây ra sự thay đổi trong lịch sử trình duyệt và thay đổi phần neo của URL (bằng mã a #) khi chạy Ajax và theo dõi những sự thay đổi của nó.
  • Việc cập nhật các trang web động cũng gây khó khăn cho người dùng trong việc bookmark (đánh dấu địa chỉ yêu thích) một trạng thái nào đó của ứng dụng. Cũng có những cách khắc phục cho vấn đề này, một số trong đó sử dụng mã xác định đoạn (fragment identifier) URL (phần URL ở sau dấu ‘#’) để lưu vết, và cho phép người dùng đánh dấu và quay lại một trạng thái nào đó của ứng dụng.
  • Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là đã bị vô hiệu hóa JavaScript, sẽ không thể sử dụng Ajax.

4. Các trình duyệt hỗ trợ AJAX

  • Mozilla Firefox 1.0 trở lên.
  • Netscape phiên bản 7.1 trở lên.
  • Apple Safari 1.2 trở lên.
  • Microsoft Internet Explorer 5 trở lên.
  • Konqueror.
  • Opera 7.6 trở lên.
  • Google Chrome mọi phiên bản.

5. Một ví dụ về xây dựng ứng dụng với AJAX

Sau khi đã hiểu về AJAX thì bạn hẳn sẽ thắc mắc nó được ứng dụng như thế nào? Hãy tham khảo 1 ví dụ nho nhỏ nhé.

Chúng ta tạo một biểu mẫu đơn giản như bên dưới. Trường username sẽ được điền bởi người dùng và trường time sẽ được điền bằng cách sử dụng AJAX kiểu như thế này.

itnavi-0207-04

Đầu tiên chúng ta include thư viện jQuery, gọi như thế này để mặc định include version mới nhất.

<script type=”text/javascript”

src=”https://code.jquery.com/jquery-latest.pack.js”></script>

Thêm đoạn này vào phần body:

itnavi-0207-05

Thẻ div đầu tiên chúng ta để hiển thị kết quả trang php trả về, button thứ 2 là nút để bạn nhấp vào. Sau đây là đoạn quan trọng, bạn viết đoạn script này vào bên trong thẻ head (trước thẻ body):

itnavi-0207-06

Ở đây chúng ta cần đảm bảo rằng trang của chúng ta đã load hết nên chúng ta đặt code bên trong hàm này.

$(document).ready(function () {});

Sau đó chúng ta sẽ tạo một event click chuột vào button view more, vậy khi button view more được click thì chúng ta sẽ xử lý cái gì?

Khai báo 1 biến có nội dung là “This is first demo”. Sử dụng hàm ajax để gửi biến ấy sang cho file php xử lý, trong hàm này cần các tham số như:

  • url: tức là nơi sẽ xử lý dữ liệu.
  • type: chính là phương thức đẩy dữ liệu đi (POST hoặc GET).
  • data: dữ liệu nào sẽ được đẩy sang, ở đây chúng ta đấy biến data_test sang và cần gán nó vào 1 tham số string để sang bên php chúng ta có thể lấy giá trị string bằng cách $_POST[‘string’] nếu type là post còn $_GET[‘string’] với type là get.

Hàm success sẽ thực hiện khi chúng ta thực hiện thành công. Ở đây nếu thành công chúng ta hẹn giờ 3s để nó set content cho thẻ có id là #demo-ajax.

Hàm error sẽ được thực hiện khi công việc thất bại. ở đây chúng ta đơn giản chỉ console.log ra thôi, bạn nhớ phải nhấn F12 mới thấy được.

Đây là chương trình đầy đủ của trang html:

itnavi-0207-07

Một file rất quan trọng là controller.php, file này có nhiệm vụ mã hóa sang dạng json và hiển thị nó ra (giống như để return về giá trị nào đó của 1 hàm) để cho bên hàm success hoặc error của ajax dễ xử lý:

itnavi-0207-08

Khi bạn click vào button View more sau 3 giây sẽ hiển thị một đoạn text lên. Ở đây các bạn có thể thực hiện việc ajax này bằng javascript thuần (sử dụng các phương thức trong lớp XMLHttpRequest) hoặc sử dụng thư viện jQuery cái mà cũng được viết bằng js. Trong ví dụ này thì thực hiện nó thông qua jQuery.

Học AJAX như thế nào?

Bạn cần lưu ý AJAX không phải là ngôn ngữ lập trình riêng, cũng không phải là một kĩ năng mới mà là một bộ kỹ thuật phát triển web luôn đi đôi với JavaScript, XML nên các điều kiện bắt buộc để tiếp thu AJAX đó là: bạn đã học JavaScript, HTML, XML. Khi đã vững các kiến thức này rồi, việc tìm hiểu AJAX chẳng có gì phức tạp.

Mình chia sẻ bạn một số tài nguyên web miễn phí nhé:

Bài giảng hướng dẫn trực tuyến: Udacity, Classcentral.

Tài liệu, giáo trình:

Aspects of AJAX (Matthias Hertel).

AJAX and JSON with jQuery (Sách của MIT).

Mastering Ajax (Brett McLaughlin).

Chỉ cần bấy nhiêu thôi, bạn đã lĩnh hội AJAX rồi và sẵn sàng nâng tầm lập trình của mình lên một đẳng cấp mới khiến các bạn bè, đồng nghiệp phải nể phục, khiến các nhà tuyển dụng chú ý đến đấy nhé.

Tags: , , ,

codenobug

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *