AJAX là gì? Quy trình hoạt động và thực hành AJAX dễ hiểu cho Web Developer

AJAX là gì? AJAX là một kỹ thuật phát triển web hiện đại giúp ứng dụng web ngày càng nhanh và mượt như các ứng dụng desktop. Bài viết này cung cấp mọi thứ bạn cần để có thể bắt đầu sử dụng AJAX, bao gồm kiến thức nền tảng, ví dụ thực tế và tài nguyên học AJAX tốt nhất. Đọc bài viết này để:

• Hiểu rõ kỹ thuật AJAX là gì và các khái niệm liên quan 
• Nắm rõ cách hoạt động và khi nào nên/ không nên sử dụng AJAX
• Thực hành các thao tác cơ bản với AJAX
• Bắt đầu học AJAX với gợi ý các tài nguyên sách, khoá học, tài liệu tốt nhất 

AJAX là gì?

1. AJAX là gì?

AJAX là từ viết tắt của “Asynchronous JavaScript and XML” (JavaScript và XML không đồng bộ). AJAX là tổ hợp các công nghệ phát triển các ứng dụng web tương tác, sử dụng các yêu cầu không đồng bộ cho phép máy khách và máy chủ giao tiếp độc lập, giúp cập nhật các thành phần trên web mà không cần tải lại toàn bộ trang.

Tham khảo Việc làm Web Developer hấp dẫn trên ITviec

2. Các thuật ngữ công nghệ trong AJAX là gì?

Sau khi đã hiểu định nghĩa AJAX là gì và trước khi tiến đến tìm hiểu sâu hơn về khái niệm này, bạn cần phải hiểu những thuật ngữ thường gặp khi nói về AJAX:

• Asynchronous là gì? 

Asynchronous là tính không đồng bộ, nghĩa là web có thể gửi và nhận dữ liệu nền từ máy chủ, đồng thời cập nhật các thành phần trên trang web mà không cần tải lại trang.

• JavaScript là gì? 

JavaScript là ngôn ngữ lập trình phổ biến để làm web tương tác.

• XML là gì? 

XML là viết tắt của Extensible Markup Language – Ngôn ngữ đánh dấu có thể mở rộng dùng để lưu trữ và vận chuyển dữ liệu từ máy chủ web. 

• XMLHttpRequest là gì?

XMLHttpRequest là một đối tượng JavaScript được sử dụng để giao tiếp không đồng bộ giữa máy khách và máy chủ.

• HTML là gì? 

HTML là viết tắt của HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản dùng để xác định cấu trúc của ứng dụng web và hiển thị dữ liệu.

• CSS là gì?

CSS là Cascading Style Sheet, được dùng để tạo giao diện và kiểu dáng cho web.

• DOM là gì?

DOM là một API hiển thị các trang web và tương tác với dữ liệu. 

Đọc thêm: Mặc dù X trong AJAX là viết tắt của XML, nhưng ngoài sử dụng định dạng XML, việc đóng gói và truyền dữ liệu dưới định dạng văn bản thuần túy hoặc văn bản JSON cũng phổ biến không kém. Thậm chí ngày nay JSON (JavaScript Object Notation) được ưa thích hơn vì nó có kích thước nhẹ hơn và được viết bằng JavaScript. 

Quy trình hoạt động AJAX là gì?

AJAX không phải là một ngôn ngữ lập trình, mà là một mô hình sử dụng kết hợp các công nghệ hiện có, bao gồm HTML hoặc XHTML, CSS, JavaScript, DOM, XML, XSLT và quan trọng nhất là đối tượng XMLHttpRequest.  Cụ thể, mô hình AJAX sử dụng:

• XMLHttpRequest Object (một API ở dạng đối tượng tích hợp trong trình duyệt) để yêu cầu dữ liệu từ máy chủ.  
• XHTML để làm định dạng để nhận dữ liệu từ máy chủ
• CSS để trình bày
• JavaScript/ HTML DOM để hiển thị nội dung động 

Một quy trình hoạt động của AJAX có thể được mô tả như sau:

1. Môt sự kiện xảy ra trên web, do người dùng gửi yêu cầu từ UI (ví dụ: tải trang, nhấp vào một button,…).
2. JavaScript tạo một đối tượng XMLHttpRequest.
3. Trình duyệt gửi đối tượng XMLHttpRequest đến máy chủ web.
4. Máy chủ xử lý yêu cầu bằng cách tương tác với cơ sở dữ liệu thông qua JSP, PHP, Servlet, ASP.net,..
5. Máy chủ tạo phản hồi và gửi lại cho trình duyệt web.
6. Phản hồi trả về được xử lý trong trình duyệt bằng JavaScript.
7. JavaScript thực hiện hành động thích hợp (ví dụ: cập nhật nội dung trang). 

Hãy tìm hiểu một vài thao tác thực hành cơ bản với các bước trên ở mục bên dưới nhé.

3 lợi ích nổi bật nhất khi sử dụng AJAX là gì?

Trước AJAX, không có cách nào để phía máy khách của ứng dụng web giao tiếp trực tiếp với máy chủ. Thay vào đó, bạn sẽ phải sử dụng cách thức tải lại trang.  Vì vậy, AJAX ra đời đã mang lại nhiều lợi ích cho việc phát triển web, nổi bật là:

• Sử dụng tối ưu băng thông: 

AJAX tối ưu hóa băng thông máy chủ của bạn bằng cách định vị nội dung cụ thể thay vì phân luồng toàn bộ nội dung của trang. Điều này rất hữu ích với các trang web có băng thông hạn chế, giúp cải thiện tốc độ tải và hiệu suất ứng dụng web.

• Tăng tính tương tác với người dùng:

Trước đây, người dùng phải chờ đợi máy chủ hoàn thành lệnh, dữ liệu cập nhật được tải lên trang web, sau đó reload trang để thực hiện lệnh khác hoặc thấy kết quả. Do AJAX sử dụng các yêu cầu không đồng bộ, việc trao đổi dữ liệu giữa máy chủ và bản hiển thị có thể hoạt động độc lập. Khi đó, người dùng có thể nhận phản hồi ngay lập tức khi thực hiện một thao tác trên web mà không gặp bất kỳ sự chậm trễ nào.

• Cải thiện trải nghiệm người dùng: 

AJAX tạo ra các biểu mẫu nhanh và thân thiện với người dùng, cho phép người dùng thực hiện nhiều thay đổi khác nhau trên web mà không cần chờ đợi dữ liệu từ máy chủ đến. Điều này giúp mang lại trải nghiệm người dùng tốt hơn, từ đó có thể tăng tỷ lệ chuyển đổi cho doanh nghiệp.

5 hạn chế thường gặp của AJAX là gì?

• Phụ thuộc vào JavaScript

Các công nghệ AJAX ngày càng phức tạp, đòi hỏi các web developer cần thường xuyên trau dồi, đạt được chuyên môn cao về JavaScript để có thể làm việc với nó.

Xem thêm:  20+ Tài liệu học JavaScript cơ bản đến nâng cao hay nhất 30+ Tài liệu lập trình web “chất” nhất

• Vấn đề bảo mật và quyền riêng tư của người dùng:

Các công nghệ AJAX sử dụng biện pháp bảo mật phía máy chủ giống như các ứng dụng web thông thường. Do đó, nó dễ bị tin tặc khai thác theo cách tương tự.  Ngoài ra, AJAX sử dụng JavaScript để mã hoá nên có thể dễ dàng bị hacker truy cập. Hacker có thể khai thác các lỗ hổng phía máy chủ, chèn mã độc vào hệ thống, lừa đảo người dùng, hoặc theo dõi lưu lượng duyệt web của người dùng để điều hướng.

• Khó bảo trì và debug:

Hiện nay còn thiếu các hướng dẫn để debug và bảo trì các web AJAX đúng cách. JavaScript phía máy khách yêu cầu can thiệp thủ công để bảo trì. Lỗi của bất kỳ một yêu cầu nào có thể khiến toàn bộ trang không tải được.

• Không tương thích với mọi trình duyệt:  

AJAX chỉ hỗ trợ một số lượng hạn chế các trình duyệt, bao gồm:

• Mozilla Firefox 1.0 trở lên
• Konqueror
• Opera 7.6 trở lên
• Microsoft Internet Explorer 5 trở lên
• Apple Safari 1.2 trở lên
• Netscape 7.1 trở lên

AJAX không hỗ trợ mọi trình duyệt là do: Các trình duyệt khác nhau sử dụng các phương thức khác nhau để tạo đối tượng JavaScript tích hợp sẵn. Người dùng nào có trình duyệt không hỗ trợ JavaScript hoặc đối tượng XMLHttpRequest, hoặc đã tắt chức năng này có thể sẽ không dùng được các trang web AJAX đúng cách. Vì vậy, bạn nên kiểm tra vấn đề trình duyệt trước khi viết ứng dụng web AJAX. 

• Vấn đề về dấu trang và điều hướng:

Vì AJAX được sử dụng để tải không đồng bộ nội dung vào một trang hiện có, nên một số thông tin của trang trước đó có thể không tương ứng với trang mới được tải. Lịch sử trình duyệt và dấu trang có thể bị ảnh hưởng và không hoạt động đúng, do URL không thay đổi trong khi các thành phần của trang lại được đổi mới.

7 ứng dụng phổ biến nhất của AJAX là gì?

Trên thực tế, AJAX đã được dùng trong nhiều ứng dụng web nổi tiếng. 7 ứng dụng nổi bật của AJAX là:

• Tự hoàn thành (autocomplete) – Google

Google là một trong những trang web đầu tiên kết hợp AJAX để tự động đề xuất cho người dùng. Khi nhập truy vấn tìm kiếm trong Google, bạn sẽ thấy xuất hiện các đề xuất từ khoá, bạn có thể chọn giữa các gợi ý đó bằng cách điều hướng qua các phím lên và xuống. 

Ở đây, AJAX được sử dụng để hiển thị kết quả dựa trên thông tin đầu vào của mỗi lần nhấn phím. Chức năng này giúp người dùng hoàn thành truy vấn nhanh chóng, các thay đổi xảy ra trong thời gian thực, và trang web vẫn giữ nguyên.

• Ứng dụng bình chọn – Reddit, Netflix

Các trang web như Reddit sử dụng AJAX để xử lý việc bình chọn và xếp hạng cho nội dung được hiển thị trên trang web. Người dùng có thể bình chọn và đưa ra ý kiến ​​​​của họ về nhiều bài viết trong một thời gian ngắn. Một ví dụ khác của AJAX là tính năng xếp hạng phim trên Netflix. Người dùng đánh giá một bộ phim và xếp hạng cá nhân của họ cho bộ phim đó sẽ được lưu vào cơ sở dữ liệu của người dùng mà không cần chờ trang làm mới hoặc tải lại.

• Tin nhắn tức thời 

AJAX cũng được ứng dụng để tạo ra các tính năng nhắn tin tức thời, liền mạch trong các chatroom. Hai quy trình chính do AJAX xử lý bao gồm – gửi và nhận tin nhắn đến và đi từ máy chủ để cập nhật theo thời gian thực. Dưới nền, AJAX tải lại trang mỗi khi người dùng gửi hoặc nhận tin nhắn.

• Cập nhật nội dung người dùng – Twitter

Twitter gần đây đã sử dụng AJAX để cải thiện nền tảng và giao diện của mình. Mỗi khi một chủ đề mới bắt đầu thịnh hành hoặc một người dùng tạo tweet, chúng sẽ được cập nhật ngay lập tức mà không cần tải lại toàn bộ trang. Bảng tin trên Twitter được tải mỗi giây để người dùng cập nhật các nội dung theo thời gian thực, các chủ đề thịnh hành hay hoạt động tweet,…

• Biểu mẫu đăng nhập 

Trước AJAX, người dùng cần truy cập trang đăng nhập, sau đó điều hướng trở lại trang người dùng muốn ban đầu. Với AJAX, người dùng có thể điền thông tin đăng nhập trực tiếp trên trang bất kì. Khi đó AJAX sẽ gửi yêu cầu đến máy chủ và trang hiện tại sẽ được cập nhật. 

• Tiện ích bên ngoài – WordPress, Adsense

AJAX cũng được ứng dụng trong các Hệ thống quản lý nội dung như WordPress hay các tập lệnh như Google Adsense. AJAX có thể giao tiếp với bất kỳ máy chủ trực tuyến nào chứ không chỉ máy chủ chứa trang web. Nó tải nội dung bên ngoài trên trang web trong khi nội dung gốc trên trang web không thay đổi.

• Bản đồ – Google Maps

Google Maps và Yahoo Maps sử dụng AJAX để làm cho quá trình điều hướng dễ dàng hơn. Người dùng có thể thay đổi chế độ xem và thao tác trên bản đồ theo thời gian thực, ví dụ như kéo bản đồ mà không cần nhấp vào các nút. 

jQuery AJAX là gì?

jQuery AJAX là gì?

jQuery AJAX là một phương thức gọi AJAX bằng thư viện jQuery.  jQuery là một thư viện JavaScript giàu tính năng, giúp đơn giản hóa việc viết mã HTML phía máy khách. jQuery cung cấp các API giúp duyệt các tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác lệnh gọi AJAX dễ dàng hơn.

3 phương thức cơ bản của jQuery AJAX:

• Phương thức load() trong jQuery AJAX: 

Lấy dữ liệu từ máy chủ và trả kết quả cho phần tử được chọn. Cú pháp:

$(selector).load(URL,data,callback);

• Phương thức get() trong jQuery AJAX:

Lấy dữ liệu từ máy chủ bằng phương thức HTTP GET Cú pháp:

$.get(URL,data,function(data,status,xhr),dataType)

• Phương thức post() trong jQuery AJAX:

Lấy dữ liệu từ máy chủ bằng phương thức HTTP POST REQUEST Cú pháp:

$(selector).post(URL,data,function(data,status,xhr),dataType)

Trong đó: – URL: là đường dẫn đến file mà bạn muốn lấy dữ liệu – Data: cặp key/ value gửi lên máy chủ kèm với yêu cầu – Callback: tên hàm sẽ được thực thi sau khi hoàn thành phương thức load – Function: Các chức năng xử lý khi thực hiện thành công với các thông số, bao gồm: 

• Data: các dữ liệu trả về từ yêu cầu
• Status: các trạng thái request (“success”/ “not modified”/ “error”/ “parsererror”/ “timeout”…)
• Xhr: các đối tượng XMLhttpRequest

– DataType: kiểu dữ liệu trả về (text, script, xml, html,…).

Các câu hỏi AJAX thường gặp

1. Bạn có thể kiểm tra mã AJAX như thế nào?

Mã AJAX có thể được kiểm tra với sự trợ giúp của JUnit, đây là một khung kiểm tra mã nguồn mở. Trước khi kiểm tra mã AJAX, bạn cần tạo các trường hợp kiểm tra.

2. AJAX dataType là gì?

AJAX dataType là loại dữ liệu mà bạn mong nhận được từ máy chủ.  Các loại dữ liệu có sẵn là text, html, xml, json, jsonp và script.

• Nếu text hoặc html được chỉ định: Dữ liệu được chuyển đến trình xử lý thành công và được cung cấp thông qua thuộc tính responseText của đối tượng jqXHR.
• Nếu xml được chỉ định: Phản hồi được phân tích cú pháp bằng jQuery.parseXML, sau đó chuyển tới trình xử lý thành công dưới dạng XMLDocument. Tài liệu XML được cung cấp thông qua thuộc tính responseXML của đối tượng jqXHR.
• Nếu json được chỉ định: Phản hồi được phân tích cú pháp bằng jQuery.parseJSON, sau đó được chuyển tới trình xử lý thành công dưới dạng object. Tài liệu JSON được cung cấp thông qua thuộc tính responseJSON của đối tượng jqXHR.

Nếu không được chỉ định, jQuery sẽ cố gắng suy luận AJAX dataType dựa trên MIME type của phản hồi.

3. Sự khác biệt giữa các thư viện JavaScript và AJAX là gì?

Các thư viện JavaScript và AJAX đều là những công cụ được sử dụng để phát triển web, nhưng chúng có các chức năng và cách sử dụng khác nhau.

Có thể bạn cần:

Việc làm JavaScript tại TP.HCM Việc làm JavaScript tại Hà Nội

4. JavaScript Fetch là gì?

JavaScript Fetch là một API được xem như giải pháp thay thế hiện đại cho XMLHttpRequest để truy xuất tài nguyên từ máy chủ. So với XMLHttpRequest, Fetch API có các ưu điểm:

• Có một bộ tính năng mạnh mẽ hơn, linh hoạt và dễ sử dụng nhờ cú pháp và cấu trúc của nó. 
• Được hỗ trợ bởi tất cả các trình duyệt web hiện đại. 

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

Bạn nên bắt đầu học AJAX nếu bạn có hiểu biết cơ bản về phát triển web và muốn mở rộng hiểu biết đó. Việc học AJAX sẽ nhanh và dễ dàng hơn nếu bạn đã có kiến ​​thức từ trước về HTML, XML, JavaScript và CSS.

Xem thêm: Tất cả những thứ cần học để trở thành Web Developer

1. 4 bước để bắt đầu học AJAX:

Gợi ý lộ trình 4 bước để học AJAX:

• Làm quen với JavaScript, HTML, XML và CSS – hiểu rõ về ba ngôn ngữ này và cách chúng hoạt động cùng nhau là kiến thức nền tảng để học AJAX.
• Nghiên cứu cách AJAX được ứng dụng – tìm hiểu cách AJAX được áp dụng cho các ứng dụng web và các kỹ thuật được sử dụng để phát triển chúng. Ví dụ: nghiên cứu Google Maps, chạy AJAX để truy xuất dữ liệu bản đồ mới.
• Nghiên cứu jQuery – nhiều ứng dụng web sử dụng AJAX cũng chạy jQuery. Do đó, bạn nên tìm hiểu kiến ​​thức cơ bản về jQuery để viết các ứng dụng AJAX nâng cao.
• Tạo dự án bằng AJAX – áp dụng kiến ​​thức và kỹ năng phát triển của bạn vào thực tế là cách tốt nhất để thành thạo một kỹ thuật mới.

2. Các khoá học AJAX tốt nhất:

3. Sách về AJAX tốt nhất:

• Head First AJAX của Rebecca M. Riordan

– Mọi thứ bạn cần biết để sử dụng AJAX, từ việc sử dụng mô hình sự kiện JavaScript đến thao tác DOM trong JavaScript. 

– Ngoài ra còn có các chủ đề liên quan mà bạn cần biết để sử dụng thành công AJAX như JSON và XHTML.

• AJAX: The Definitive Guide của Anthony T. Holdner III

– Bắt đầu bằng giải thích cách các ứng dụng web được xây dựng. – Cách XML, JavaScript và XMLHttpRequest kết hợp với nhau để tạo ra AJAX. – Cách điều khiển DOM và thêm các tính năng tương tác vào các trang web. – Cách áp dụng các nguyên tắc AJAX cho các ứng dụng kinh doanh.

• AJAX for Dummies của Steve Holzner

Kiến ​​thức cơ bản về AJAX, phù hợp cho những ai chưa từng sử dụng AJAX trước đây hoặc chỉ có hiểu biết rất hạn chế về AJAX, bao gồm:  – Các framework AJAX phổ biến – Cách xử lý XML và PHP bằng các ứng dụng AJAX.

4. Tài liệu AJAX trực tuyến tốt nhất:

• W3Schools AJAX Guide

Hướng dẫn ngắn về AJAX thuộc tài liệu hướng dẫn về JavaScript của W3SChools, bao gồm các yêu cầu, phản hồi, cách sử dụng AJAX với cơ sở dữ liệu,… kèm theo các đoạn code để thực hành.

• AJAX Guide by Mozilla

Hướng dẫn chi tiết về AJAX của Mozilla Developer Network, bao gồm những kiến ​​thức cơ bản về AJAX và các công nghệ khác thường được sử dụng cùng với AJAX.

• jQuery AJAX Documentation

Một chương về AJAX trong tài liệu jQuery, hướng dẫn bạn những kiến ​​thức cơ bản về AJAX và cách nó được sử dụng với jQuery. 

Các thao tác cơ bản với AJAX

Trang MDN Web Docs (trước đây là Mozilla Developer Network) cung cấp một số bước thực hành đơn giản để bạn bắt đầu làm việc với AJAX.

1. Bước 1: Tạo một yêu cầu HTTP thế nào?

Để gửi yêu cầu HTTP, trước hết bạn cần một instance của một đối tượng có chức năng cần thiết. Đối tượng ở đây là XMLHttpRequest.

const httpRequest = new XMLHttpRequest();

Sau khi thực hiện một yêu cầu, bạn sẽ nhận được phản hồi trở lại. Ở giai đoạn này, bạn cần cho đối tượng XMLHttpRequest biết hàm JavaScript nào sẽ xử lý phản hồi, bằng cách đặt thuộc tính onreadystatechange của đối tượng thành hàm được gọi khi yêu cầu thay đổi trạng thái, như sau:

function handler() {

  // Process the server response here.

}

httpRequest.onreadystatechange = handler;

Lưu ý rằng không có dấu ngoặc đơn hoặc tham số sau tên hàm, bởi vì bạn đang gán một tham chiếu cho hàm chứ không thực sự gọi hàm đó. Ngoài ra, thay vì đặt tên hàm, bạn có thể sử dụng kỹ thuật xác định hàm nhanh chóng của JavaScript (được gọi là “hàm ẩn danh”) để xác định các hành động sẽ xử lý phản hồi, như sau:

httpRequest.onreadystatechange = () => {

  // Process the server response here.

};

Sau khi khai báo điều gì sẽ xảy ra khi nhận được phản hồi, bạn mới thực sự thực hiện yêu cầu, bằng cách gọi các phương thức open() và send() của đối tượng HTTP Request, như sau:

httpRequest.open("GET", "http://www.example.org/some.file", true);

httpRequest.send();

• Tham số đầu tiên của lệnh gọi open() là phương thức HTTP Request – GET, POST, HEAD hoặc bất cứ phương thức nào khác mà máy chủ hỗ trợ. Hãy viết hoa toàn bộ phương thức theo tiêu chuẩn HTTP, nếu không một số trình duyệt (như Firefox) không thể xử lý yêu cầu. 
• Tham số thứ hai là URL mà bạn đang gửi yêu cầu. Vì tính năng bảo mật, theo mặc định, bạn không thể gọi URL trên miền của bên thứ ba. Đảm bảo sử dụng tên miền chính xác trên tất cả các trang của bạn, nếu không bạn sẽ gặp lỗi “quyền bị từ chối” khi gọi open(). 
• Tham số thứ ba là tuỳ chọn, giúp cài đặt xem yêu cầu của bạn có cần “không đồng bộ” không (chính là chữ A đầu tiên trong AJAX). Nếu true (mặc định) thì quá trình thực thi JavaScript sẽ tiếp tục và người dùng có thể tương tác với trang trong khi phản hồi của máy chủ vẫn chưa đến. 
• Tham số cho phương thức send() có thể là bất kỳ dữ liệu nào bạn muốn gửi đến máy chủ nếu POST gửi yêu cầu. Dữ liệu biểu mẫu phải được gửi ở định dạng mà máy chủ có thể phân tích cú pháp, chẳng hạn như chuỗi truy vấn:

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

…hoặc các định dạng khác, như dữ liệu nhiều phần/biểu mẫu multipart/form-data, JSON, XML,… Lưu ý rằng nếu bạn muốn POST dữ liệu, bạn có thể phải đặt MIME type (chuỗi văn bản xác định định dạng tập tin) của yêu cầu. Ví dụ về MIME type: text/html, text/css, text/JavaScript, hoặc MIME type của dữ liệu biểu mẫu được gửi dưới dạng chuỗi truy vấn sẽ như sau:

httpRequest.setRequestHeader(

  "Content-Type",

  "application/x-www-form-urlencoded"

);

2. Bước 2: Xử lý phản hồi của máy chủ thế nào?

Khi gửi yêu cầu, bạn đặt tên của một hàm JavaScript để xử lý phản hồi: Đầu tiên, hàm này cần kiểm tra trạng thái của yêu cầu (readyState).

readyState trong AJAX là gì?  readyState là trạng thái của đối tượng XMLHttpRequest. Trạng thái tương ứng với các giá trị như sau:     

• 0 – (chưa được khởi tạo) hoặc (yêu cầu chưa được khởi tạo)
• 1 – (đang tải) hoặc (đã thiết lập kết nối máy chủ)
• 2 – (đã tải) hoặc (đã nhận yêu cầu)
• 3 – (tương tác) hoặc (đang xử lý yêu cầu)
• 4 – (hoàn thành) hoặc (yêu cầu đã hoàn thành và sẵn sàng phản hồi)

Nếu readystate có giá trị là XMLHttpRequest.DONE (tương ứng với 4), điều đó có nghĩa là toàn bộ phản hồi của máy chủ đã được nhận và bạn có thể tiếp tục xử lý.

if (httpRequest.readyState === XMLHttpRequest.DONE) {

  // Everything is good, the response was received.

} else {

  // Not ready yet.

}

Tiếp theo, hãy kiểm tra mã trạng thái của phản hồi HTTP (httpRequest.status). Trong ví dụ sau, chúng tôi phân biệt giữa lệnh gọi AJAX thành công và không thành công bằng cách kiểm tra mã trạng thái phản hồi 200 – OK.

Các mã trạng thái phản hồi HTTP trong AJAX là gì?

• 200 – OK: Máy chủ đã xử lý yêu cầu thành công.
• 404 – Not Found: Máy chủ không thể tìm thấy trang được yêu cầu.
• 503 – Service Unavailable: Máy chủ tạm thời không khả dụng

if (httpRequest.status === 200) {

  // Perfect!

} else {

  // There was a problem with the request.

  // For example, the response may have a 404 (Not Found)

  // or 500 (Internal Server Error) response code.

}

Sau khi kiểm tra readyState và mã httpRequest.status, bạn có thể làm bất cứ điều gì mình muốn với dữ liệu mà máy chủ đã gửi. Bạn có hai tùy chọn để truy cập dữ liệu này:

• httpRequest.responseText – trả về phản hồi của máy chủ dưới dạng một chuỗi văn bản
• httpRequest.responseXML – trả về phản hồi dưới dạng một đối tượng XMLDocument mà bạn có thể duyệt bằng các hàm JavaScript DOM

Lưu ý rằng các bước trên chỉ hợp lệ nếu bạn sử dụng yêu cầu không đồng bộ (tham số thứ ba của open() không được chỉ định hoặc được đặt thành true). Nếu bạn sử dụng một yêu cầu đồng bộ, bạn không cần chỉ rõ hàm, nhưng điều này không được khuyến khích vì nó sẽ tạo ra trải nghiệm người dùng rất tệ.

3. Bước 3: Thực hành một ví dụ đơn giản

Hãy kết hợp tất cả lại với một yêu cầu HTTP đơn giản. JavaScript sẽ yêu cầu một tài liệu HTML, test.html, chứa dòng text “I’m a test”. Sau đó, chúng tôi sẽ đặt alert() nội dung của phản hồi. Lưu ý rằng ví dụ này sử dụng vanilla JavaScript — không liên quan đến jQuery. Ngoài ra, các tệp HTML, XML và PHP phải được đặt trong cùng một thư mục.

<button id="AJAXButton" type="button">Make a request</button>

<script>

  (() => {

    let httpRequest;

    document

      .getElementById("AJAXButton")

      .addEventListener("click", makeRequest);

    function makeRequest() {

      httpRequest = new XMLHttpRequest();

      if (!httpRequest) {

        alert("Giving up :( Cannot create an XMLHTTP instance");

        return false;

      }

      httpRequest.onreadystatechange = alertContents;

      httpRequest.open("GET", "test.html");

      httpRequest.send();

    }

    function alertContents() {

      if (httpRequest.readyState === XMLHttpRequest.DONE) {

        if (httpRequest.status === 200) {

          alert(httpRequest.responseText);

        } else {

          alert("There was a problem with the request.");

        }

      }

    }

  })();

</script>

Trong ví dụ này:

• Người dùng nhấp vào nút “Thực hiện yêu cầu”;
• Trình xử lý sự kiện sẽ gọi hàm makeRequest();
• Yêu cầu được thực hiện và sau đó (onreadystatechange) việc thực thi được chuyển đến alertContents();
• alertContents() kiểm tra xem đã nhận được phản hồi và OK chưa, sau đó alert() nội dung của tệp test.html.

Trong trường hợp xảy ra lỗi giao tiếp (ví dụ như máy chủ gặp sự cố), một ngoại lệ sẽ được đưa ra trong phương thức onreadystatechange khi truy cập trạng thái phản hồi. Để giảm thiểu vấn đề này, bạn có thể đóng gói câu lệnh if…else của mình trong lệnh try…catch:

function alertContents() {

  try {

    if (httpRequest.readyState === XMLHttpRequest.DONE) {

      if (httpRequest.status === 200) {

        alert(httpRequest.responseText);

      } else {

        alert("There was a problem with the request.");

      }

    }

  } catch (e) {

    alert(`Caught Exception: ${e.description}`);

  }

}

4. Bước 4: Làm việc với phản hồi XML

Trong ví dụ trước, sau khi nhận được phản hồi cho yêu cầu HTTP, chúng ta đã sử dụng thuộc tính responseText của đối tượng yêu cầu, thuộc tính này chứa nội dung của tệp test.html. Bây giờ, hãy thử thuộc tính responseXML. Trước hết, hãy tạo một tài liệu XML hợp lệ mà chúng ta sẽ yêu cầu sau này. Tài liệu (test.xml) chứa các nội dung sau:

<?xml version="1.0" ?>

<root> I'm a test. </root>

Tiếp theo, trong makeRequest(), chúng ta cần thay thế test.html bằng tệp XML mà chúng ta vừa tạo:

httpRequest.open("GET", "test.xml");

Sau đó trong alertContents(), chúng ta cần thay thế dòng alert(httpRequest.responseText); bằng:

const xmldoc = httpRequest.responseXML;

const root_node = xmldoc.querySelector("root");

alert(root_node.firstChild.data);

Đoạn code này lấy đối tượng XMLDocument do responseXML cung cấp và sử dụng các phương thức DOM để truy cập một số dữ liệu có trong tài liệu XML.

5. Bước 5: Làm việc với data:

Cuối cùng, hãy thực hành gửi một số dữ liệu đến máy chủ và nhận phản hồi. Lần này, JavaScript sẽ yêu cầu một trang động (VD: test.php) lấy dữ liệu mà chúng ta đã gửi và trả về một chuỗi có nội dung: “Xin chào, [dữ liệu người dùng]!” – đây là thứ mà chúng ta sẽ alert(). Trước tiên, chúng ta sẽ thêm một text box vào HTML để người dùng có thể nhập tên của họ:

<label>

  Your name:

  <input type="text" id="AJAXTextbox" />

</label>

<span id="AJAXButton" style="cursor: pointer; text-decoration: underline">

  Make a request

</span>

Chúng ta cũng sẽ thêm một line vào trình xử lý sự kiện để lấy dữ liệu của người dùng từ text box và gửi nó tới hàm makeRequest() cùng với URL của tập lệnh phía máy chủ:

document.getElementById("AJAXButton").onclick = () => {

  const userName = document.getElementById("AJAXTextbox").value;

  makeRequest("test.php", userName);

};

Chúng ta cần sửa đổi makeRequest() để chấp nhận dữ liệu người dùng và chuyển dữ liệu đó đến máy chủ. Chúng ta sẽ thay đổi phương thức yêu cầu từ GET thành POST, đồng thời thêm dữ liệu dưới dạng tham số trong lệnh gọi tới httpRequest.send():

function makeRequest(url, userName) {

  // …

  httpRequest.onreadystatechange = alertContents;

  httpRequest.open("POST", url);

  httpRequest.setRequestHeader(

    "Content-Type",

    "application/x-www-form-urlencoded"

  );

  httpRequest.send(`userName=${encodeURIComponent(userName)}`);

}

Hàm alertContents() có thể được viết giống như trong Bước 3 để cảnh báo chuỗi đã tính toán của chúng ta, nếu đó là tất cả những gì máy chủ trả về. Tuy nhiên, giả sử máy chủ sẽ trả về cả chuỗi được tính toán và dữ liệu người dùng ban đầu, khi đó nếu người dùng của chúng tôi nhập “Jane” vào text box, phản hồi của máy chủ sẽ như thế này:

{ "userData": "Jane", "computedString": "Hi, Jane!" }

Để sử dụng dữ liệu này trong alertContents(), chúng ta không thể chỉ cảnh báo responseText, chúng ta phải phân tích nó và cảnh báo computedString, thuộc tính mà chúng ta muốn:

function alertContents() {

  if (httpRequest.readyState === XMLHttpRequest.DONE) {

    if (httpRequest.status === 200) {

      const response = JSON.parse(httpRequest.responseText);

      alert(response.computedString);

    } else {

      alert("There was a problem with the request.");

    }

  }

}

Tệp test.php phải chứa các thông tin sau:

$name = $_POST['userName'] ?? 'no name';

$computedString = "Hi, " . $name . "!";

$array = ['userName' => $name, 'computedString' => $computedString];

echo json_encode($array);

Tổng kết

Nếu bạn đang quan tâm đến lĩnh vực phát triển ứng web, thì AJAX là kỹ thuật rất cần thiết để bạn thêm vào skillset của mình. Qua bài viết trên, ITviec đã giúp bạn hiểu được AJAX là gì, cách AJAX hoạt động, các AJAX datatype,… để bạn có thể dễ dàng thực hành hơn. Sẽ không quá khó để học cách sử dụng AJAX nếu bạn đã có hiểu biết về HTML, XML, JavaScript và CSS. Do vậy, để trở thành một web developer trình độ cao và có thêm nhiều cơ hội việc làm “chất”, hãy bắt đầu nghiên cứu AJAX ngay với những thông tin được cung cấp trong bài viết này nhé.

Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.

Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!