Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Ajax
Webdesign

Một hướng dẫn dành cho người mới bắt đầu làm quen với AJAX bằng jQuery

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài viết đầu tiên của loạt bài này, chúng ta đã bao quát các nguyên tắc cơ bản của AJAX. Bài thứ hai, chúng ta xem xét một ví dụ bằng JavaScript thuần tuý.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu qua một vài hàm và phương thức liên quan đến AJAX của jQuery. Cụ thể hơn, chúng ta sẽ tìm hiểu kỹ hơn về phương thức load và hàm ajax.

Sử dụng thức load

Phương thức load của jQuery là một phương thức đơn giản nhưng mạnh mẽ để truy xuất dữ liệu từ xa. Dưới đây, bạn có thể thấy cú pháp của nó:

Bảng sau hiển thị các tham số có thể có của nó:

Tham số Mô tả Bắt buộc
url Một chuỗi chứa URL mà yêu cầu được gửi tới.
data Dữ liệu (là một chuỗi hoặc đối tượng đơn giản) được gửi đến máy chủ bằng yêu cầu. Không
complete Một hàm callback, được thực thi khi yêu cầu hoàn tất, hoặc là thành công hay không thành công. Không

Dưới đây là các tham số của hàm callback:

Tham số Mô tả
responseText Dữ liệu được truy vấn từ yêu cầu.
textStatus Một chuỗi phân loại trạng thái của yêu cầu.
jqXHR Đối tượng JQuery XMLHttpRequest (jqXHR), là một tập hợp lớn của đối tượng XMLHttpRequest (XHR) gốc của trình duyệt.

Danh sách tiếp theo tóm tắt các giá trị có thể có của tham số textStatus:

Để hiểu rõ hơn về cách thức hoạt động phương thức load, hãy xem lại các ví dụ được thảo luận trong bài trước.

Một lần nữa, nhìn vào cấu trúc HTML đơn giản này:

Dưới đây là minh hoạ của nó:

Example

Hãy nhớ rằng chúng ta muốn cập nhật nội dung của phần tử #bio bằng dữ liệu trả về, ngay sau khi nút được nhấp.

Đây là mã jQuery cần thiết:

Giả sử rằng yêu cầu thành công (tức là khi textStatussuccess hay notmodified), kết quả cuối cùng sẽ giống như thế này:

success_jQuery

Ngoài ra, hãy xem minh hoạ dưới đây mô tả một yêu cầu thành công:

Javascript_jQuery_Objects

Phần bên trái của hình ảnh minh hoạ này cho thấy đối tượng XHR khi nó được in trong giao diện dòng lệnh của trình duyệt nếu chúng ta sử dụng JavaScript thuần tuý (xem hướng dẫn trước) để thực hiện yêu cầu. Mặt khác, phần bên phải sẽ hiển thị các đối tượng tương ứng jqXHR khi nó được in nếu chúng ta sử dụng phương thức load.

Tuy nhiên, trong trường hợp một yêu cầu không thành công, một tin nhắn tương ứng sẽ xuất hiện. Để làm như vậy, chúng ta theo dõi giá trị của tham số textStatus và hiển thị một thông báo lỗi:

error_jQuery

Lưu ý: Nếu bạn chạy ví dụ từ môi trường cục bộ của bạn (và lưu trữ tập tin Bio.txt trong đó), thì các thông báo lỗi có thể sẽ khác. Ví dụ, bạn có thể thấy kết quả sau đây:

error_locale_jQuery

Cuối cùng, cần phải lưu ý rằng rằng, theo mặc định, phương thức load sử dụng phương thức GET của HTTP, trừ khi chúng ta gửi dữ liệu như là một đối tượng lên máy chủ. Chỉ khi đó, thì phương thức POST được gọi.

Xem demo Codepen có liên quan ở dưới đây:

Bây giờ, chúng ta hãy thay đổi định dạng của tập tin mà chúng ta yêu cầu từ máy chủ. Cụ thể, cho ví dụ này, các dữ liệu bạn muốn được thêm vào tập tin Bio.html thay vì tập tin Bio.txt. Đồng thời lưu ý: tập tin mục tiêu chứa hai đoạn văn bản.

Giả sử rằng chúng ta chỉ muốn nạp đoạn đầu tiên, chúng ta sẽ phải cập nhật mã ban đầu như sau:

Dưới đây là hình minh hoạ cho điều đó:

success_jQuery_trim

Và đây là demo từ Codepen:

Kết luận

Trong hướng dẫn này, tôi đã minh hoạ cách bạn có thể sử dụng AJAX với jQuery. Để làm cho mọi thứ hấp dẫn hơn, chúng ta cũng đã làm việc với một vài ví dụ thực tế. Trong bài hướng dẫn cuối cùng còn lại của loạt bài này, chúng ta sẽ tổng hợp mọi thứ bằng cách làm việc với một ví dụ phức tạp hơn.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.