JQuery Ajax và kiến thức cơ bản
Bài viết được sự cho phép của tác giả Bui Thu Huyen
Giới Thiệu
AJAX – “Asynchronous JavaScript and XML” – là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.
jQuery cung cấp method $.ajax và một số methods tiện lợi giúp bạn làm việc với XHRs thông qua trình duyệt một cách dễ dàng hơn.
Download thư viện jQuery
Bạn có thể lên trang chủ jquery để download bộ mới nhất. http://jquery.com/download/
Phương thức “load()”
- Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] );
- Miêu tả chi tiết về các tham số: URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi databaseData − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.Callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.
- Ví dụ
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('./result.html');
});
});
</script>
</head>
<body>
<div id="stage">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ./result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử
được tag với ID là stage.
Phương thức “get()” và “post()”
Ở 2 phương thức này thì trong đó phương thức “ get() ” giống “ load() ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “ <form> ”. Tương tự “ post() ” sẽ tượng trưng cho “method” là “POST” của “ <form> ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.
Phương thức “get()”
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.get('vidu1.html', function(ketqua) {
$('#noidung').html(ketqua);
$('#noidung').html($('#chuoi-can-lay').html());
});
});
});
- Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “ get() ”, các bạn cần dùng đến biến “ $ ” (hay “ jQuery ”) sau đó sử dụng thẳng phương thức “ get()
- Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “ load() ”.
- Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “ get() ” là một Anonymous Function có đối số mặc định trả về là “ ketqua ”
- Để tách lọc dữ liệu từ “ ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ <body> ” của chúng ta. Sau đó chúng ta dùng tiếp “ $(‘#id-can-lay’).html() ” để tách lọc dữ liệu
- Ngoài ra “ get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu.
Phương Thức “post()”
Cách dùng của phương thức “ post() ” sẽ giống với “ get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.post('vidu2.php', {
a: "content abc",
b: "content bcd"
},function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
Nội dung của file “vidu2.php“:
<?php echo '<pre>' .print_r($_POST,true). '</pre>';
Ở ví dụ phương thức “ post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “ get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.
Phương thức “ajax()”
Ngoài các hàm trên mà chúng ta thường hay dùng, jQuery còn cung cấp thêm cho ta một hàm ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax.
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.ajax({
url: 'vidu2.php',
type: 'POST',
dataType: 'html',
data: {
a: "content abc",
b: "content bcd"
}
}).done(function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
Đối số đầu tiên chúng ta truyền vào cho phương thức “ ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:
- url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu
- type : phương thức gửi đi tương tự như của “ <form> ”, mặc định là “GET” nếu như các bạn không truyền vào.
- dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json…). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là “html”.
- data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức “ post() ”.
- “ done() ” : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức “ ajax() ” trước đây trên Internet. Thay vì dùng “done()” chúng ta sẽ dùng thuộc tính “success” trong đối tượng truyền vào “ ajax() ” nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như “ done() , fail() , always() ” (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức “ ajax() ” hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.
Tham khảo thêm vị trí tuyển dụng lập trình JQuery mới tại Station D.
Bài viết gốc được đăng tải tại Viblo
