Học Ajax Cơ Bản Và Nâng Cao, Ajax Cơ Bản Cho Lập Trình Viên Front

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.

Đang xem: Học ajax cơ bản và nâng cao

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

XEM THÊM:  Hướng Dẫn Chơi Binomo Từ Cơ Bản Tới Nâng Cao, Cho Người Chơi Mới

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ượngXMLHttpRequest. Cú pháp:

var variableName = new XMLHttpRequest();Trong đó:varriableNamelà tên biến mà các bạn muốn gán cho objectXMLHttpRequest.

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:

XEM THÊM:  Cây Gỗ Đàn Hương Đỏ, Giá Chỉ: 150, Gỗ Đàn Hương

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.

Xem thêm: Hướng Dẫn Cách Sử Dụng Que Thử Thai, Cho Kết Quả Chính Xác Nhất

2.2 Phương thức

XMLHttpRequest Object Methods

new XMLHttpRequest():Tạo đối tượngXMLHttpRequest.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ứcopen(). Trong đóstringlà 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/XHTMLlà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ằngJSONvì nó gần với JavaScript hơn.XMLHttpRequestobject để giao tiếp bất đồng bộ.Cuối cùng,JavaScriptlà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:

Trình duyệt tạo một lệnh gọi JavaScript để kích hoạt XMLHttpRequest.Ở dưới nền, trình duyệt tạo một yêu cầu HTTP gửi lên server.Server tiếp nhận, truy xuất và gửi lại dữ liệu cho trình duyệt.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.

XEM THÊM:  Sách Hướng Dẫn Autocad 2010 Full Crack, Giáo Trình Autocad 2010

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ọnGử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ứcGET 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.

Xem thêm: Đề Thi Học Kì, Đề Kiểm Tra 15 Phút, 45 Phút Toán 6 Có Đáp Án, Lời Giải Chi Tiết

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.

Related Articles

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 *

Back to top button