TOC

This article is currently in the process of being translated into Vietnamese (~52% done).

AJAX:

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.

The load method can take two extra parameters: A set of querystring key/value pairs, and a callback function which will be executed when the load method finishes, no matter if it succeeds or fails. Here is an example where we use the callback function to inform about the result. Normally, you would likely only show a message if the method fails, but to illustrate how it works, we do it if the method fails as well. I make sure that it fails for the example, by requesting a file which doesn't exist:

<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>

As you can see, the callback function specifies 3 parameters, which jQuery will fill in for you. The first parameter will contain the resulting content if the call succeeds. The second parameter is a string which specifies the status of the call, e.g. "success" or "error". You can use it to see if the call was successful or not. The third parameter is the XMLHttpRequest object used to perform the AJAX call. It will contain properties which you can use to see what went wrong and many other things.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!