Jquery AJAX

14/10/2019

« Bài trước

Jquery AJAX là gì?

AJAX là từ viết tắt của: Asynchronous JavaScript and XML.

Nói dễ hiểu AJAX dùng để giao tiếp, trao đổi dữ liệu với Server và cập nhật lại nội dung trang web mà không phải load lại trang.

Với các phương thức AJAX của jQuery, bạn có thể request Text, HTML, XML hoặc JSON từ Server bằng cả HTTP Get và HTTP Post. Và bạn có thể in dữ liệu được trả về vào các thành phần HTML bất kỳ.

Phương thức jquery load()

Phương thức jquery load() thì đơn giản, nhưng cực kỳ mạnh mẽ.

Phương thức jquery load() tải dữ liệu từ Server và đưa dữ liệu được trả về vào phần tử HTML được chọn.

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

Giải thích các tham số ở trên:

- URL: Tham số bắt buộc. Xác định URL bạn muốn tải.

- data: Tham số tùy chọn. Thiết lập câu truy vấn key/value gửi kèm theo URL.

- callback: Tham số tùy chọn. Tên của function sẽ được thực thi sau khi phương thức load() hoàn thành.

Dưới đây là ví dụ nội dung của file "demo.txt" :

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">Đoạn văn bản trong thẻ p.</p>

Ví dụ dưới đây gửi request đến file "demo.txt" và lấy dữ liệu in vào thẻ HTML có id="test" :

$("#test").load("demo.txt");

Phương thức jquery load()

Nội dung sẽ được in ở đây.

Cũng có thể thêm Jquery Selector vào trong URL để chọn nội dung cụ thể cần lấy. Cú pháp bên dưới là chỉ lấy nội dung có id="p1" và in ra màn hình:

$("#test").load("demo.txt #p1");

Nội dung sẽ được in ở đây.

Tham số tùy chọn callback function : Function sẽ thực thi sau khi phương thức jquery load() hoàn thành. Callback function có các tham số sau đây:

  • responseTxt : Chứa nội dung kết quả trả về nếu thành công.
  • statusTxt : Chứa trạng thái của request.
  • xhr : chứa đối tượng XMLHttpRequest.

Ví dụ dưới đây sẽ hiển thị thông báo "Jquery load thành công !" nếu thành công, ngược lại báo lỗi :

$("button").click(function(){ $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("Jquery load thành công !"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); });

Phương thức jquery get() và post()

Hai phương thức thường được sử dụng cho request-response giữa Client và Server là: GET và POST.

  • GET : Yêu cầu lấy data từ Server
  • POST : Gửi data đến Server để xử lý

GET về cơ bản được sử dụng để chỉ nhận (lấy) một số dữ liệu từ Server. Lưu ý: Phương thức GET có thể trả về dữ liệu được lưu trong bộ nhớ cache.

POST cũng có thể được sử dụng để lấy dữ liệu từ Server. Tuy nhiên, phương thức POST thì KHÔNG BAO GIỜ caches data và thường được sử dụng để gửi dữ liệu cùng với request.

Phương thức jquery $.get()

Phương thức jquery $.get() lấy dữ liệu từ Server với phương thức HTTP GET.

Cú pháp:

$.get(URL,callback);

Trong đó:

- URL : Tham số bắt buộc. Xác định URL của tài nguyên bạn cần lấy dữ liệu.

- Callback: Tham số tùy chọn. Function sẽ được thực thi sau khi request hoàn thành.

Ví dụ sau đây lấy dữ liệu từ file "demo.txt" và trả về dữ liệu trong tham số data của function callback:

$("button").click(function(){ $.get("demo.txt", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); });

Phương thức jquery $.post()

Phương thức jquery $.post() lấy dữ liệu từ Server với phương thức HTTP POST.

Cú pháp:

$.post(URL,data,callback);

Trong đó:

- URL : Tham số bắt buộc. Xác định URL của tài nguyên bạn cần lấy dữ liệu.

- data: Tham số tùy chọn. Một số dữ liệu gửi lên Server để xử lý.

- Callback: Tham số tùy chọn. Function sẽ được thực thi sau khi request hoàn thành.

Ví dụ sau gửi tên người dùng lên Server và sau đó trả về trong function callback:

$("button").click(function(){ $.get("demo.asp", {name: 'Mr Linh'} , function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); });

Ví dụ code mẫu xử lý ở file "demo.asp":

<% dim fname fname=Request.Form("name") Response.Write("Hello " & fname & ". ") %>

Phương thức jquery ajax()

Phương thức ajax() được sử dụng để thực hiện AJAX request (HTTP không đồng bộ).

Tất cả các phương thức AJAX của jQuery đều sử dụng phương thức ajax(). Phương pháp này chủ yếu được sử dụng cho các request trong đó các phương thức khác không sử dụng được.

Cú pháp cơ bản:

$.ajax({
   name:value,
   name:value,
   ...
})

Ví dụ 1 đoạn code ajax cơ bản:

$.ajax({ type: 'POST', // Loại request : GET hoặc POST url: "demo.txt", // URL trang đích cần xử lý, lấy dữ liệu async: false, // Tham số xác định có bất đồng bộ hay không, mặc định là TRUE success: function(result){ // Code xử lý khi thành công }, error: function(xhr,status,error){ // Code thông báo lỗi } });

Ngoài ra, còn nhiều tham số khác nữa, các bạn có thể từ từ ngâm cứu thêm nhé.

« Bài trước
Back to top