Bài 02. Ajax sử dụng Jquery
Có thể nói sự ra đời của JQuery được ví như là tuyệt phẩm thời gian bấy giờ. Bản thân mình bắt đầu sử dụng JQuery từ version 1.4.2 mình đã thấy nó tuyệt vời rồi. Nói chung các ưu điểm của Jquery thì có lẽ các bạn đã biết thì mình cũng không bàn luận về nó nữa nội dung bài này mình muốn luận về ...
Có thể nói sự ra đời của JQuery được ví như là tuyệt phẩm thời gian bấy giờ. Bản thân mình bắt đầu sử dụng JQuery từ version 1.4.2 mình đã thấy nó tuyệt vời rồi. Nói chung các ưu điểm của Jquery thì có lẽ các bạn đã biết thì mình cũng không bàn luận về nó nữa nội dung bài này mình muốn luận về JQuery Ajax.
Thực chất thì việc xây dựng những dòng code ajax trong JQuery nó đơn giản hơn rất là nhiều so với việc xây dựng các dòng code trong javascript thuần. Lý do là bởi vì JQuery đã hỗ trợ bạn bằng cách họ xây dựng sẵn cho chúng ta các đối tượng và các hàm. Công việc cảu chúng ra cũng đơng giản hơn đó là truyền các đối số đầu vào và xử lý yêu cầu và trả về kết quả.
Trong JQuery hỗ trợ bạn 3 phương thức thực thi Ajax.
- $.get(): Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên server theo phương thức GET
- $.post(): Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên server theo phương thức POST
- $.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.
Thì để có thể bắt đầu với JQuery ajax thì đầu tiền bạn cần tải thư viện của JQuery và bạn chèn vào đầu thể head trong file HTML của bạn.
Lưu ý: Các bạn nên đặt thư viện JQuery ở trước các file .js, đoạn mã, hoặc các thư viện khác nếu bản thân nó cũng chạy dựa vào nền tảng của JQuery.
1. Download thư viện Jquery.
Bạn có thể download trực tiếp từ trang https://jquery.com về rồi copy thư viện vào project của bạn. Hoặc bạn cũng có thể sử dụng luôn từ các libraries từ trên mạng.
- Google Hosted Libraries: https://developers.google.com/speed/libraries/
- CDNJS: https://cdnjs.com/libraries/jquery/
- Gibhub : https://github.com/jquery/jquery
Ví du:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Lời khuyên: Các bạn cứ download về và copy vào project của mình. Nhỡ đâu một ngày đẹp trời mấy ông này vì một lý do nào đó hoặc bị hasker Việt Nam tấn công cho quay lơ thì ứng dụng của bạn cũng quay lơ theo họ.
2. Cú pháp.
Trong khuôn khổ nội dung bài viết này mình sẽ nói về hàm $.ajax() tổng quát trước.
$.ajax({
type: '(POST|GET)',
url: [Đường_dẫn_tới_file[hàm]_xử_lý_phía_sever_side],
data: [Truyền_biến],
dataType: [Kiêu_dữ_liệu],
success: function(html) {
// Xử lý dữ liệu trả về
// Hoặc đưa ra thông báo
// khi thực hiện thành công
},
error: function() {
// Xử lý hoặc đưa ra thông báo
//thực hiện thành công
}
});
Trong đó:
(+) Thuộc tính data chấp nhận hai(hoặc nhiều hơn) kiểu dữ liệu là chuỗi[QUERY_STRING] hoặc mảng.
Ví dụ:
$data = 'full_name=Nguyến Văn A&age=20&city=Hà Nội';
Hoặc
$data = {
'full_name' : 'Nguyến Văn A',
'age' : 20,
'city' : 'Hà Nội'
}
(+) Thuộc tính datatype chấp nhận các kiểu dữ liệu là:
- html: Kiểu văn bản có chứa mã HTML
- text: Kiểu Văn bản thuần túy
- json: Kiểu dữ liệu JSON
- xml: Kiểu dữ liệu XML
- script: Kiểu này mình chưa dùng bao giờ nên nói thực là chưa biết.
- Hoặc kết hợp text/html(Cơ bản là 4 kiểu phía trên)
Ngoài ra nó còn có một số các hàm, tham số khác bạn có thể xem thêm tại http://api.jquery.com/jquery.ajax/
- asynchronously: Gửi yêu cầu bất đồng bộ
- beforeSend(function): Hàm gọi trước khi thực hiện gửi yêu cầu.
- cache: Có cho phép cache hay không. Mặc định là có.
- crossDomain: Hiểu một cách nôm na đó là thuật ngữ dùng để chỉ việc tương tác giữa các website khác Origin với nhau.
- ...vvv
3. Ví dụ đơn giản.
Cũng giống với ví dụ trước bạn cũng tạo ra hai file là.
- index.html: File này chưa các điều khiển HTML, Javascript.
- result.php: File này sẽ xử lý các yêu cầu(request) và trả về kết quả(response)
File index.html
<html>
<head>
<title>Simple Ajax Example</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function xmlhttpPost() {
$.ajax({
type : "POST",
url : "result.php",
data : {'w':$('input[name=word]').val()},
dataType:"text",
success : function (result){
$('#result').html(result);
}
});
}
</script>
</head>
<body>
<form name="f1">
<p>
<label>Nhập vào một câu</label>
<input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'>
</p>
<div id="result"></div>
</form>
</body>
</html>
File result.php
<?php
$w = isset($_POST['w']) ? trim($_POST['w']) : 'Empty';
echo 'Bạn đã nhập vào câu: <strong>'.$w.'<strong>'; die();
?>
Xem kết quả
4. Tổng kết.
Trong bài viết này mình đã giới thiệu cơ bản sử dụng JQuery kết hợp với ajax. Độ phức tạp của các câu lệnh còn phụ thuộc vào bài toán. Nhưng có lẽ đây là cách đơng giản để bạn lắm được những kiến thức cơ bản về JQuery ajax.
