jQuery: AJAX sử dụng jQuery
AJAX bao gồm các ký tự viết tắt của cụm từ tiếng Anh: Asynchronous JavaScript And XML (tạm dịch là: JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. jQuery cung cấp cho ta một số phương thức để thực thi kỹ thuật ajax hết sức đơn giản và dễ dàng.
Phương thức load() trong jQuery
load() trong jQuery là phương thức đơn giản nhất để thực thi kỹ thuật ajax, load() có nhiệm vụ hiển thị các dữ liệu được tải xuống vào một phần tử html nào đó.
Cú pháp:
load(url, params, callback)
Trong đó:
- url: là địa chỉ của trang xử lý dữ liệu
- params: là một đối tượng lưu giữ các biến gửi lên server
- callback: là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành
Ví dụ 1:
$(document).ready(function() {
$("div#result").load("data.html");
});
Ví dụ trên có nhiệm vụ lấy toàn bộ nội dung trả về trong file data.html và hiển thị dữ liệu đó vào bộ chọn div#result.
Ví dụ 2:
$(function() {
$("div#result").load("data.php", {id: 1}, callback);
});
function callback() {
alert("Tải dữ liệu thành công.");
}
Nội dung file data.php:
if(isset($_POST['id'])) {
echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';
} else {
echo 'Không có dữ liệu được gửi sang';
}
Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data.php và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result, khi dữ liệu được tải thành công thì sẽ gọi tới hàm callback.
Phương thức get() trong jQuery
Phương thức get() cho phép ta thực thi ajax bằng cách gửi dữ liệu lên server theo cách thức gửi dữ liệu là GET.
Cú pháp:
get(url, params, callback)
Trong đó:
- url: là địa chỉ của trang xử lý dữ liệu
- params: là một đối tượng lưu giữ các biến gửi lên server
- callback: là hàm mà jQuery sẽ gọi đến khi quá trình ajax hoàn thành.
Ví dụ:
$(function() {
$.get("data1.php", {id: 1},
function(data){
$("div#result").html(data);
});
});
Nội dung file data1.php:
if(isset($_GET['id'])) {
echo 'Bạn đã gửi dữ liệu ID = '.$_GET['id'].' thành công';
} else {
echo 'Không có dữ liệu được gửi sang';
}
Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data1.php theo cách thức gửi là GET và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result.
Phương thức post() trong jQuery
post() cho phép thực thi ajax bằng cách gửi dữ liệu lên server theo cách thức POST.
Cú pháp:
post(url, params, callback)
Ví dụ:
$(document).ready(function( ){
$.post("data.php", {id: 1},
function(data){
$("div#result").html(data);
});
});
Nội dung file data.php:
if(isset($_POST['id'])) {
echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';
} else {
echo 'Không có dữ liệu được gửi sang';
}
Trong ví dụ trên, ta thực hiện gửi dữ liệu (id = 1) sang file data.php theo phương thức POST và hiển thị dữ liệu trả về từ file này vào bộ chọn div#result.
Phương thức ajax() trong jQuery
Ngoài các phương thức trình bày ở trên, jQuery còn cung cấp thêm cho ta phương thức ajax() tổng quát. Với phương thức này ta có thể tùy chỉnh cấu hình, thêm bớt các thông số. Ta chỉ cần sử dụng phương thức này là có thể đáp ứng các yêu cầu về thực thi ajax. Để sử dụng phương thức này, ta làm theo cấu trúc mẫu như sau:
Trong đó:
- type: Kiểu gửi dữ liệu, có thể là POST hoặc GET, nó giống với thuộc tính method của <form>
- url: Đường dẫn xử lý dữ liệu,nó tương tự như thuộc tính action trong form
- data: Tập hợp các biến dữ liệu gửi lên server
- dataType: Kiểu dữ liệu có thể html, text, json, xml
- success: Hàm chạy khi nhận dữ liệu thành công
- error: Hàm chạy khi có lỗi xảy ra.