Giới thiệu AJAX với những Nhà thiết kế Front-End

() translation by (you can also view the original English article)

Loạt bài hướng dẫn này nhằm mục đích giới thiệu và làm quen AJAX, một kỹ thuật front-end cần thiết với các nhà thiết kế front-end và các tân lập trình viên.

Trong bài hướng dẫn đầu tiên này, chúng ta sẽ lướt qua bao gồm những căn bản của AJAX. Chúng ta sẽ bắt đầu khám phá những gì liên quan đến nó, tìm hiểu chính xác nó là gì, nó hoạt động như thế nào và hạn chế của nó nằm ở đâu. Bắt đầu nào!

Lưu ý: Loạt bài này giả định rằng bạn đã quen thuộc với các công nghệ front-end cốt lõi, chẳng hạn như HTML và CSS.

AJAX Là Gì?

AJAX là từ viết tắt của "Asynchronous Javascript and XML". Nó không phải một công nghệ độc lập hay mới mẻ gì. Trên thực tế, nó là một tập hợp các công nghệ đã có sẵn (ví dụ: HTML, CSS, Javascript, XML, v.v...) được sử dụng cùng nhau để xây dựng nên các ứng dụng web hiện đại.

Với AJAX, một máy khách (tức là trình duyệt) có thể liên lạc với một máy chủ web và gửi yêu cầu để nhận được dữ liệu. Sau đó, nó sẽ xử lí phản hồi của máy chủ và tạo ra sự thay đổi trên trang web mà không cần phải tải lại hoàn toàn trang web đó.

Hãy phân tích từng ký tự viết tắt của AJAX:

“Asynchronous” nghĩa là khi một máy khác yêu cầu dữ liệu từ 1 máy chủ web, nó sẽ không bị đơ (freeze) tới khi nào máy chủ phản hồi lại. Ngược lại, người dùng vẫn có thể điều hướng các trang. Ngay sau khi máy chủ trả về một phản hồi, một chức năng có liên quan thao túng dữ liệu được phản hồi ở đằng sau hậu trường (trong nền)
"Javascript" là ngôn ngữ lập trình, sẽ xử lý một yêu cầu AJAX, phân tích các phản ứng AJAX tương ứng, và cuối cùng là cập nhật lại cho các DOM.
Một máy khách sử dụng XMLHttpRequest hoặc hàm API XHR để tạo một yêu cầu gửi đến máy chủ. Hãy nghĩ các API (Application Programming Interface - giao diện lập trình ứng dụng) như là một tập hợp các phương pháp xác định các quy tắc giao tiếp giữa hai bên. Tuy nhiên, lưu ý rằng dữ liệu đến từ một yêu cầu AJAX có thể là bất kì định dạng nào và không phải chỉ có mỗi định dạng XML.

AJAX Hoạt Động Như Thế Nào

Để có được một suy nghĩ cụ thể về cách AJAX hoạt động như thế nào, hãy nhìn vào hình ảnh sau đây:

Hình ảnh trực quan này mô tả một kịch bản yêu cầu-phản hồi tiêu biểu của AJAX:

Người dùng muốn xem nhiều bài viết hơn, do đó anh ta hoặc cô ta nhấp chuột vào nút mà ta đã thiết đặt trước đó. Sự kiện này tạo ra một AJAX call (yêu cầu AJAX).
Một yêu cầu được gửi đến máy chủ (server). Cùng với yêu cầu, các dữ liệu khác nhau có thể được thông qua. Yêu cầu đó có thể trỏ đến một tập tin tĩnh (ví dụ: example.json) được lưu trữ trên máy chủ (server).. Ngoài ra, nó có thể thực hiện một đoạn mã script động (ví dụ: functions.php) tại thời điểm đoạn mã script liên lạc với cơ sở dữ liệu (hoặc hệ thống khác) để truy xuất dữ liệu.
Cơ sở dữ liệu (database) sẽ gửi lại các bài viết được yêu cầu đến máy chủ. Tiếp theo, máy chủ sẽ gửi chúng đến trình duyệt.
JavaScript phân tích các phản hồi và cập nhật lại cho các phần cụ thể của DOM (cấu trúc trang). Ở đây, ví dụ, chỉ phần sidebar đang được cập nhật. Các phần khác của trang sẽ không thay đổi.

Như vậy, bây giờ bạn đã có thể hiểu tại sao AJAX là một khái niệm quan trọng cho các trang web hiện đại. Bằng cách phát triển ứng dụng có chức năng AJAX, chúng ta có thể kiểm soát số lượng dữ liệu được tải xuống từ máy chủ.

Những Ví Dụ của AJAX

AJAX có ở khắp mọi nơi. Để chứng minh điều này, hãy đề cập đến một vài trang web lớn nổi tiếng đang tận dụng lợi ích của nó.

Trước tiên, hãy xem xét Facebook và Twitter hoạt động như thế nào. Khi bạn cuộn trang xuống dưới, những nội dung mới sẽ xuất hiện nhờ vào AJAX. Thứ hai, khi bạn upvote hoặc downvote một câu hỏi hay một câu trả lời nào đó trên Stack Overflow, một lệnh gọi AJAX sẽ được kích hoạt. Cuối cùng, ngay khi bạn tìm kiếm một cái gì đó trên Google hoặc Youtube, những yêu cầu AJAX sẽ được thực thi.

Hơn nữa, nếu chúng ta muốn, chúng ta có thể giám sát các yêu cầu này. Ví dụ: trên giao diện điều khiển (console) của Chrome, chúng ta làm như vậy bằng cách nhấp chuột phải và kiểm tra các tùy chọn Log XMLHttpRequests.

Tạo Những Yêu cầu

Như đã đề cập ở trên, để thiết lập một yêu cầu AJAX, chúng ta sử dụng XMLHttpRequest API. Ngoài ra, jQuery, thư viện JavaScript phổ biến nhất, cung cấp một số hàm và phương thức liên quan đến Ajax.

Xuyên suốt loạt bài này, chúng ta sẽ đi qua những ví dụ khác nhau sử dụng JavaScript thuần tuý và jQuery để gởi một yêu cầu đến một máy chủ.

Xử lý các Phản hồi

Khi chúng ta nhận dữ liệu từ một máy chủ web, những dữ liệu này có thể ở trong những định dạng khác nhau. XML, JSON, JSONP, văn bản thuần tuý, và HTML là những định dạng dữ liệu có thể có.

XML

XML (eXtensible Markup Language) là một trong những định dạng phổ biến nhất cho việc trao đổi dữ liệu giữa các ứng dụng. Tương tự như HTML, XML nó sử dụng các thẻ để định nghĩa cấu trúc của nó. Tuy nhiên, lưu ý rằng XML không đi kèm với bất kỳ thẻ được định nghĩa trước nào, trong thực tế, chúng ta thiết lập một tài liệu XML bằng cách xác định các thẻ của riêng chúng ta. Một ví dụ về cấu trúc của nó được chỉ ra như ở dưới:

      <person>
          <name>Mike</name>
          <surname>Mathew</surname>
          <nationality>Australian</nationality>
          <languages>
              <language>English</language>
              <language>Spanish</language>
              <language>French</language>
              <language>Russian</language>
          </languages>
      </person>

Có nhiều trình soạn thảo trên mạng mà bạn có thể sử dụng để xây dựng các tài liệu XML. Trình soạn thảo yêu thích của tôi là:

XMLGrid.net.

Dựa trên trình soạn thảo này, ví dụ của chúng ta được minh hoạ như sau:

JSON

JSON (JavaScript Object Notation) là một định dạng trao đổi dữ liệu phổ biến khác. Bằng cách sử dụng JSON, cấu trúc XML đã đề cập ở trên sẽ trông giống như thế này:

      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"    :	["English", "Spanish", "French", "Russian"]
      }

Một lần nữa, bạn có thể tìm thấy nhiều trình soạn thảo JSON ở trên mạng. Dưới đây là những trình soạn thảo mà tôi thích sử dụng:

Dựa trên công cụ JSON Editor Online, các ví dụ trước đây sẽ trông giống như thế này:

Giới hạn của Những Yêu cầu AJAX

Trước khi chúng ta thực sự sử dụng AJAX, hiểu biết thêm về các giới hạn của nó cũng là một việc rất quan trọng. Cụ thể, chúng tôi sẽ đề cập đến hai vấn đề phổ biến sau đây.

Trước tiên, hãy xem xét qua các lỗi sau đây xuất hiện trong giao diện điều khiển (console) của Chrome:

Lỗi này xảy ra khi chúng ta yêu cầu nhiều điểm vào một tập tin địa phương. Dưới đây chúng ta đã cố gắng truy xuất dữ liệu được đặt trong một tập tin cục bộ (ví dụ Demo.json) mà không phải trên một máy chủ. Để khắc phục vấn đề này, chúng ta có thể cài đặt một máy chủ cục bộ (ví dụ thiết lập XAMPP như là một môi trường phát triển cục bộ) và lưu trữ tập tin mong muốn ở trong nó.

Thứ hai, nhìn vào thông báo lỗi:

Điều này xảy ra khi chúng ta yêu cầu dữ liệu được đặt trên một tên miền khác so với trang của chúng ta (được biết đến như là hạn chế same-origin policy). Ở đây, ví dụ, dữ liệu được lưu trữ trên một máy chủ cục bộ, nhưng ngược lại trang web được lưu trữ trên máy chủ của Codepen. May thay, có các giải pháp đối với hạn chế này.

Một giải pháp là tận dụng cơ chế CORS (Cross-Origin Resource Sharing) được đề xuất bởi W3C. Lưu ý rằng cơ chế này yêu cầu chúng ta tạo một số thay đổi trong các tập tin cấu hình của server chúng ta. Ví dụ, trang này mô tả cách chúng ta có thể tuỳ biến máy chủ web Apache.

Một tuỳ chọn khác là sử dụng kỹ JSONP (JSON with Padding).

Kết Luận

Bài viết tổng quan này đã đưa cho bạn một cái nhìn sơ lược để biết AJAX là gì, nơi bạn có thể đã gặp nó và một số vấn đề của nó nằm ở đâu. Nó cũng kiểm tra qua những định dạng (format) trao đổi dữ liệu phổ biến nhất. Trong bài hướng dẫn tiếp theo, chúng ta sẽ đi vào những ví dụ hoạt động cụ thể Hẹn gặp bạn ở đó!

Đọc Thêm

Nếu bạn muốn biết thêm về AJAX và Codepen, hãy xem qua các nguồn tài liệu sau: