Jquery Ajax- phương thức get()

Bài trước mình đã giới thiệu với các bạn về jquery ajax phương thức post(). Bài viết này mình xin giới thiệu một phương thức khác cũng dùng để load dữ liệu đó là get(). Các bạn chú ý là chúng ta có thể dùng phương thức ajax() để thay thế được cho phương thức get().

$.get(): Get là phương thức trong jquery ajax giúp bạn lấy về dữ liệu từ server thông qua Http Get.

Cú pháp jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url: đây là tham số bắt buộc. Nó chỉ ra địa chỉ url mà request sẽ được gửi đến.

data: Tùy chọn. Nó chỉ ra dữ liệu được gửi kèm với request tới server.

success: Tùy chọn. Nó chỉ ra hàm được thực thi nếu request được gửi đi thành công. Các tham số:

data: chứa dữ liệu được trả về từ request sau khi gửi thành công.
textStatus: chỉ ra tình trạng của request: success, notmodified, error, timeout, parseerror.
jqXHR: chứa đối tượng XmlHttpRequest.

dataType: Tùy chọn. Nó chỉ ra loại dữ liệu được trả về từ server. Mặc định thì jquery sẽ tự xác định. Các loại dữ liệu có thể là: xml, html, text, script, json, jsonp.

Bây giờ là một ví dụ đơn giản cho phương thức get() trong jquery ajax. Giả sử mình có 1 file sitemap như thế này:

<?xml version="1.0" encoding="utf-8"?>
<sites>
<page id="0">
<title>Webzoomz</title>

<url>http://www.webzoomz.info/</url>

<desc>Tự học thiết kế web</desc>
</page>
<page id="1">
<title>Contact</title>

<url>http://www.webzoomz.info/p/contact.html</url>

<desc>Liên hệ</desc>
</page>
<page id="2">
<title>Dịch vụ</title>

<url>http://www.webzoomz.info/p/dich-vu.html</url>

<desc>Dịch vụ liên quan đến thiết kế web</desc>
</page>
<page id="3">
<title>Site map</title>
<url>http://www.webzoomz.info/p/sitemap.html</url>
<desc>Site map webzoomz</desc>
</page>
<page id="4">
<title>Help</title>
<url>http://www.webzoomz.info/p/help.html</url>
<desc>Hỏi đáp kiến thức thiết kế và lập trình web</desc>
</page>

</sites>

Sau đó mình có một đoạn mã html trong body như sau:

<button id="btnSitemap">Read sitemap menu</button>

<div id="page-wrap"></div>

trong body sẽ có 2 phần: 1 button để get thông tin từ file xml, còn 1 div để hiển thị thông tin từ file xml dưới dạng các link. Để get thông và hiển thị nó thì chúng ta cần đoạn code jquery ajax sau:

$(document).ready(function () {
$("#btnSitemap").click(function () {
$("#page-wrap").empty();
$.get("sites.xml", function (xml) {
$(xml).find('page').each(function () {
var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
var desc = $(this).find('desc').text();
$('<div class="items" id="link_' + id + '"></div>').html('<a href="' + url + '" title="' + desc + '">' + title + '</a>').appendTo('#page-wrap');
});
});
});
});

Mình giải thích qua 1 chút về đoạn code trên. Đầu tiên nếu người dùng kích và button để get sitemap thì chúng ta sẽ xóa hết các phần tử con trong div pagewrap đi để tránh bị hiện thì lặp thành nhiều lần. Sau đó ta dùng phương thức get() để lấy dữ liệu từ file xml. Tiếp theo chúng ta sẽ có hàm phân tách lấy dữ liệu sau khi đã get file thành công(trạng thái success). Bước cuối mình lặp qua chuỗi kết quả rồi đưa nó vào div. Đây là style cho div:

<style type="text/css">
.items a,.items a:active,.items a:link,.items a:visited{

font-size:1.2em;

color:#9900FF;
text-decoration:underline;

}
.items a:hover{
text-decoration:none;
}
.desc{
font-size:0.8em;
padding-left:10px;
}
</style>