AJAX Cơ Bản Cho Lập Trình Viên Front-end – CodeLearn

Trong bài viết này, chúng ta sẽ cùng tìm hiểu những khía cạnh cơ bản về AJAX. Chúng ta sẽ bắt đầu khám phá những gì liên quan đến nó, tìm hiểu chính xác nó là gì, nó hoạt động như thế nào và hạn chế của nó nằm ở đâu. Bắt đầu nào!

AJAX là gì?

AJAX là từ viết tắt của từ Asynchronous JavaScript And XML – Bất đồng bộ trong Javascript và XML.

• Asynchoronous (Bất đồng bộ): Bất đồng bộ có nghĩa là một chương trình có thể xử lý không theo tuần tự các hàm, không có quy trình, có thể nhảy đi bỏ qua bước nào đó. Ích lợi dễ thấy nhất của bất đồng bộ là chương trình có thể xử lý nhiều công việc một lúc.
• Javascript: Đây là một ngôn ngữ lập trình rất phổ biến hiện nay. 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: Đây là một dạng ngôn ngữ gần giống với HTML, tên đầy đủ 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.

Với AJAX, một máy khách (tức là trình duyệt) có 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 đó, nó sẽ xử lí phản hồi của máy chủ và tạo ra sự thay đổi trên trang web mà không cần phải tải lại hoàn toàn trang web đó.

Một ví dụ để các bạn dễ hình dung hơn: Hãy tưởng tượng, khi các bạn lướt Facebook, Instagram, Twitter, v.v. các bạn Like một bài viết nào đó và trang web sẽ tự động tải lại toàn bộ chỉ để tăng số lượt Like của bài viết đó, điều đó có làm bạn khó chịu không? Với những tác vụ nhỏ như vậy mà phải tải lại toàn bộ trang web là 1 điều không nên. Thực tế là khi các bạn Like bài viết trên FB, số lượt Like sẽ tự động tăng lên mà không cần phải tải lại trang. Và để làm được việc này thì chúng ta có thể sử dụng AJAX, nó chỉ truyền đạt thông tin cần thiết với máy chủ và hiển thị cho người dùng.

Sử dụng AJAX trong Javascript

1. Khởi tạo đối tượng

Để sử dụng AJAX trong Javascript thì chúng ta cần sử dụng đối tượng XMLHttpRequest. Cú pháp:

var variableName = new XMLHttpRequest();

Trong đó: varriableName là tên biến mà các bạn muốn gán cho object XMLHttpRequest.

2. Các thuộc tính và phương thức

Dưới đây mình sẽ liệt kê ra các phương thức và thuộc tính trong đối tượng này.

2.1 Thuộc tính

XMLHttpRequest Object Properties

• onreadystatechange: Xác định một hàm được gọi khi thuộc tính readyState thay đổi.
• readyState: Trạng thái của XMLHttpRequest.

Trong đó nếu giá trị bằng các giá trị sau thì sẽ có trạng thái tương ứng.

0 – request chưa được khởi tạo.

1 – kết nối đến server đang được thiết lập.

2 – yêu cầu đã nhận được.

3 – đang tiến hành xử lý.

4 – request đã xong và dữ liệu trả về đã sẵn sàng để xử lý.

• responseText: Giá trị trả về dưới dạng string.
• responseXML: Giá trị trả về dưới dạng XML.
• status: Trả về trạng thái của request. VD:

200: “OK” 403: “Forbidden” 404: “Not Found”

• statusText: Trả về trạng thái của request dưới dạng text. VD: Ok, Not Found.

2.2 Phương thức

XMLHttpRequest Object Methods

• new XMLHttpRequest(): Tạo đối tượng XMLHttpRequest.
• abort(): Hủy Request hiện tại.
• getAllResponseHeaders(): Lấy ra thông tin header.
• getResponseHeader(): Trả về cụ thể thông tin header.
• open(method, url, async, user, psw): Cấu hình cho một request mới.
• send(string): Gửi dữ liệu đến server đã được cấu hình ở phương thức open(). Trong đó string là data các bạn muốn truyền theo nếu request là POST.
• setRequestHeader(): Thiết lập các thông số header gửi lên.

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

Bạn cần lưu ý AJAX không phải dùng một công nghệ duy nhất, cũng không phải ngôn ngữ lập trình. AJAX là một bộ kỹ thuật phát triển web. Bộ hệ thống này bao gồm:

• HTML/XHTML làm ngôn ngữ chính và CSS để tạo styles.
• The 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àm ngôn ngữ lập trình để kết nối toàn bộ các công nghệ trên lại.

Có thể bạn cần có kiến thức kỹ thuật để hiểu về nó hoàn toàn. Tuy nhiên, quy trình cơ bản của AJAX lại rất đơn giản. Bạn hãy nhìn qua sơ đồ sau:

Cách hoạt động của AJAX có thể được mô tả như sau:

1. Trình duyệt tạo một lệnh gọi JavaScript để kích hoạt 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 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.

Như vậy, bây giờ bạn đã 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 có 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ừ máy chủ.

POST & GET Request trong AJAX

Post và Get có lẽ không còn xa lạ với các bạn nữa. Tiếp theo chúng ta cùng tìm hiểu về 2 phương thức này trong AJAX nhé!

POST hay GET?

Phương thức GET thì đơn giản hơn và nhanh hơn POST, và nó được sử dụng trong hầu hết các trường hợp.

Tuy nhiên, chúng ta phải luôn sử dụng POST requests khi:

• Tệp được lưu trong bộ nhớ cache không phải là một tùy chọn
• Gửi một lượng lớn dữ liệu đến máy chủ.
• Gửi thông tin người dùng nhập vào, POST sẽ mạnh mẽ và an toàn hơn GET.

GET Request

Phương thức GET thường được sử dụng để lấy hoặc truy xuất một số loại thông tin từ máy chủ mà không yêu cầy bất kì thao tác hoặc thay đổi nào trong cơ sở dữ liệu.

Ví dụ: Tìm nạp kết quả tìm kiếm dựa trên một cụm từ, tìm nạp chi tiết người dùng dựa trên id hoặc tên của họ, v.v.

Ví dụ dưới đây sẽ chỉ cho bạn cách thực hiện một yêu cầu Ajax GET trong JavaScript.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>JavaScript Ajax GET Demo</title> <script> function displayFullName() { // Tạo đối tượng XMLHttpRequest var request = new XMLHttpRequest(); // Khởi tạo đối tượng yêu cầu request.open(“GET”, “greet.php?fname=Khoa&lname=Nguyen”); // Định nghĩa một hàm được gọi cho readystatechange request.onreadystatechange = function() { // Kiểm tra xem yêu cầu đã hoàn thành và thành công chưa if(this.readyState === 4 && this.status === 200) { // Chèn phản hồi từ máy chủ vào một phần tử HTML document.getElementById(“result”).innerHTML = this.responseText; } }; // Gửi yêu cầu đến máy chủ request.send(); } </script> </head> <body> <div id=”result”> <p>Content of the result DIV box will be replaced by the server response</p> </div> <button type=”button” onclick=”displayFullName()”>Display Full Name</button> </body> </html><!DOCTYPE html>

POST Request

Phương thức POST chủ yếu được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ web.

Ví dụ sau đây sẽ chỉ cho bạn cách gửi dữ liệu biểu mẫu đến máy chủ bằng Ajax:

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>JavaScript Ajax POST Demo</title> <script> function postComment() { // Tạo đổi tượng XMLHttpRequest var request = new XMLHttpRequest(); // Khởi tạo đối tượng yêu cầu request.open(“POST”, “confirmation.php”); // Định nghĩa một hàm được gọi cho readystatechange request.onreadystatechange = function() { // Kiểm tra xem yêu cầu đã hoàn thành và thành công chưa if(this.readyState === 4 && this.status === 200) { // Chèn phản hồi từ máy chủ vào một phần tử HTML document.getElementById(“result”).innerHTML = this.responseText; } }; // Truy xuất dữ liệu biểu mẫu var myForm = document.getElementById(“myForm”); var formData = new FormData(myForm); // Gửi yêu cầu đến máy chủ request.send(formData); } </script> </head> <body> <form id=”myForm”> <label>Name:</label> <div><input type=”text” name=”name”></div> <br> <label>Comment:</label> <div><textarea name=”comment”></textarea></div> <p><button type=”button” onclick=”postComment()”>Post Comment</button></p> </form> <div id=”result”> <p>Content of the result DIV box will be replaced by the server response</p> </div> </body> </html>

Ưu và Nhược điểm của việc sử dụng AJAX

Giống như bất kỳ công nghệ nào khác, AJAX cũng đi kèm với những ưu và nhược điểm riêng. Dưới đây mình sẽ liệt kê một số tình huống quan trọng mà một người chắc chắn phải biết trong khi sử dụng AJAX trong phát triển ứng dụng dựa trên web.

1. Ưu điểm

• Cải thiện trải nghiệm người dùng: Đây là lợi ích quan trọng nhất của AJAX. AJAX tăng hiệu suất của trình duyệt và tạo điều kiện cho tốc độ duyệt nhanh hơn do đó cung cấp trải nghiệm người dùng đáp ứng.
• Tăng khả năng tương thích: AJAX có thể tương thích với ASP.NET, J2EE, PHP hoặc bất kỳ ngôn ngữ nào.
• Hỗ trợ xử lý không đồng bộ: Có thể thực hiện truy xuất dữ liệu không đồng bộ bằng cách sử dụng XmlHttpRequest, xương sống của các ứng dụng AJAX. Do đó, các yêu cầu được xử lý hiệu quả và tải nội dung động được đưa lên tầm cao hơn bằng cách cải thiện hiệu suất đáng kể.
• Giảm mức sử dụng băng thông và tăng tốc độ: AJAX sử dụng kịch bản phía máy khách để liên lạc với máy chủ web và trao đổi dữ liệu bằng JavaScript. Sử dụng AJAX, bạn có thể cắt giảm tải mạng và sử dụng băng thông và chỉ truy xuất dữ liệu được yêu cầu để cung cấp cho bạn giao diện nhanh hơn và thời gian đáp ứng tốt hơn. Thời gian đáp ứng nhanh hơn, do đó hiệu suất và tốc độ được tăng lên.
• Năng suất người dùng được nâng cao: Thư viện AJAX cung cấp các hàm trợ giúp hướng đối tượng giúp tăng đáng kể năng suất cho người dùng.

2. Nhược điểm

• Tính không tương thích của trình duyệt: AJAX phụ thuộc nhiều vào JavaScript được triển khai khác nhau cho các trình duyệt khác nhau. Điều này hóa ra là một trở ngại đặc biệt là khi AJAX phải hoạt động trên nhiều trình duyệt. Các trình duyệt không hỗ trợ JavaScript hoặc tắt tùy chọn JavaScript sẽ không thể sử dụng chức năng của nó.
• Không an toàn: Trang web có thể khó gỡ lỗi, tăng kích thước mã của trang web của bạn và khiến trang web của bạn dễ bị đe dọa bảo mật nghiêm trọng.
• Bookmark: Khi người dùng muốn bookmark một trang lại thì khi sử dụng ajax sẽ ảnh hưởng đến người dùng vì không thể bookmark lại trang có ajax được.

Ví dụ về việc sử dụng AJAX

Hãy xem cấu trúc cơ bản sau đây:

<div> <img src=”Einstein.jpg” alt=”Einstein”> <button id=”request”>Learn more about Einstein</button> <div id=”bio”></div> </div>

Đồng thời, xem minh hoạ liên quan:

Đây là những gì chúng ta muốn xảy ra: khi chúng ta nhấp lên nút, một yêu cầu AJAX sẽ được thực thi. Sau đó, phần tử với id là bio sẽ xuất hiện và nội dung của nó sẽ được gắn vào bằng các dữ liệu trả về. Dữ liệu đó là tĩnh và được lưu trữ trong tập tin Bio.txt.

Tiếp theo, đây là đoạn mã AJAX được yêu cầu:

var btn = document.getElementById(‘request’); var bio = document.getElementById(‘bio’); var request = new XMLHttpRequest(); request.onreadystatechange = function() { if(request.readyState === 4) { bio.style.border = ‘1px solid #e8e8e8’; if(request.status === 200) { bio.innerHTML = request.responseText; } else { bio.innerHTML = ‘An error occurred during your request: ‘ + request.status + ‘ ‘ + request.statusText; } } } request.open(‘Get’, ‘Bio.txt’); btn.addEventListener(‘click’, function() { this.style.display = ‘none’; request.send(); });

Demo cuối cùng sẽ trông như thế này:

Tạm kết

Như vậy trong bài viết này, chúng ta đã cùng tìm hiểu về những vấn đề cơ bản của AJAX trong Javascript. Trong phần tiếp theo của loạt bài này, chúng ta sẽ tập trung vào hàm và các phương thức liên quan đến AJAX của jQuery. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!