The load() method

Như đã mô tả trong chương trước, có nhiều cách dùng AJAX với jQuery và chúng nên dùng tùy vào hoàn cảnh. Một ứng dụng đơn giản nhất là tải dữ liệu không đồng bộ bằng load(). Bạn chỉ chọn element mà bạn muốn tải nội dung. URL là tham số truyền vào. Ví dụ, chúng ta cần tải tệp bên ngoài. Chúng ta sẽ gọi chúng là content.html và nội dung có dạng như sau:

<div id="divContent">
	<b>This is external content</b>
</div>
And there's more of it

Lưu thành content.html trong cùng thư mục cùng các file khác. Chúng ta có thể tải chúng như sau:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea1").load("content.html");
});
</script>

Nếu bạn có file nội dung trong thư mục khác hay bạn đặt tên chúng khác đi, bạn sẽ phải thay đổi tham số. Load() cho phép tải nội dung từ tệp bên ngoài với jQuery. Bạn có thể truyền selector với URL để tải một phần. Ở ví dụ đầu tiên, chúng ta tải toàn bộ file nhưng ở ví dụ tiếp theo, chúng ta chỉ dùng div:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea2").load("content.html #divContent");
});
</script>

Như bạn thấy, chúng ta chỉ đơn giản thêm vào selector jQuery vào trong tham số sau URL có khoảng cách. Như vậy jQuery sẽ chọn phần cần thiết Bạn có thể dùng bất kỳ jQuery selector nào.

Phương thức load có thể có thêm hai tham số: Cặp khóa/giá trị và một hàm callback được thực hiện khi phương thức load kết thúc, kể cả thành công hay không. Đây là một ví dụ chúng ta dùng hàm callback để thông báo kết quả. Thông thường, bạn chỉ cần chỉ ra thông báo nếu thất bại nhưng để xem cách hoạt động thì chúng ta làm cả hai. Tôi đảm bảo rằng trong ví dụ này luôn hiển thị thông báo lỗi vì file không tồn tại:

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
	{
		if(statusText == "success")
			alert("Successfully loaded the content!");
		if(statusText == "error")
			alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
	});
});
</script>

Như bạn thấy, hàm callback có 3 tham số, mà jQuery sẽ cung cấp. Tham số đầu chứa nội dung kết quả nếu lời gọi thành công. Tham số thứ hai là chuỗi chỉ định trạng thái của lời gọi ví dụ "success" hay "error". Bạn có thể dùng để xem nó thành công hay không. Tham số thứ ba là XMLHttpRequest dùng để thực hiện lời gọi AJAX. Nó chứa thuộc tính bạn có thể dùng để xem cái gì sai và nhiều thứ khác.