AJAX viết tắt của câu Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ) là một phần trong thư viện JQuery. Nó là phương thức cho phép tải một phần dữ liệu mới vào tài liệu HTML mà không cần phải tải lại toàn bộ tài liệu, giúp giảm thiểu thời gian tải trang cũng như băng thông của website.
Các phương thức trong Jquery
Phương thức load()
Load() là một phương thức đơn giản nhất trong kỹ thuật ajax. Chức năng của nó là tải và hiển thị nội dung đã tải vào một phần tử HTML nào đó.
Cú pháp:
load(url, params, callback)- url: URL Tiếp nhận, xử lý và gửi lại dữ liệu.
- Params: lưu giữ các biến cần gửi đi.
- Callback: hàm mà nó sẽ gọi đến sau khi quá trình Ajax hoàn tất .
Ví dụ:
$(document).ready(function( ){
$("div#result").load("result.php", {user: admin}, callback);
});
function callback(){
alert("Kết thúc quá trình.");
}
//Nội dung trong result.php
if(isset($_POST['user']))
{
echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
echo 'Không nhận được dữ liệu của người dùng nào';
}
Phương thức get()
Để gửi dữ liệu theo phương thức
get() của kỹ thuật ajax. ta có cú pháp sau:
Cú pháp:
get(url, params, callback)- Các tham số tương tự như phương thức load().
Ví dụ:
$(document).ready(function( ){
$.get("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_GET['user']))
{
echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
echo 'Không nhận được dữ liệu của người dùng nào';
}
Phương thức post()
Tương tự như phương thức
get() của kỹ thuật ajax, phương thức post giúp bảo mật dữ liệu gửi đi tốt hơn. ta có cú pháp sau:
Cú pháp:
post(url, params, callback)- Các tham số tương tự như phương thức
load().
Ví dụ:
$(document).ready(function( ){
$.post("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_POST['user']))
{
echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
echo 'Không nhận được dữ liệu của người dùng nào';
}
Phương thức ajax()
Ngoài các phương thức trên,
ajax() là một phương thức tổng quát phổ biến nhất để sử dụng tải dữ liệu bất động bộ. Phương thức này cho phép cấu hình và tùy chỉnh các thông số, không bị bó buột như các phương thức trên.
Cú pháp:
$.ajax({
type: 'Loại gửi dữ liệu (POST hoặc GET)',
url: 'URL Tiếp nhận, xử lý và gửi lại dữ liệu',
data: { Các biến dữ liệu được gửi lên server.(ten_bien1:dữliệu,ten_bien2:dữliệu,...). Có thể sử dụng var data = $('form#ID_form').serialize(); để lấy toàn bộ dữ liệu từ 1 form có id là ID_form},
dataType: Kiểu dữ liệu trả về ('html','text','json','xml'),
success: function(data) {
Nội dung sẽ được thực thi sau khi nhận được dữ liệu từ server
},
error: function() {
Nội dung sẽ được thực thi khi có lỗi phát sinh
}
});
Mình sẻ có vụ dụ cụ thể trong phần dưới đây.
Cách sử dụng JQuery Ajax để tải dữ liệu
Đây là ví dụ về việc sử dụng JQuery với phương thức Ajax để tải dữ liệu về từ server.
Đầu tiên bạn mở tệp HTML và tạo một form đơn giản như sau.
<form class="form-horizontal" id="form_input"> <input type="text" name="user"> <button type="submit">Gửi</button> </form>
Trong thẻ
<head> của tài liệu HTML bạn thêm thư viện Jquery mới nhất vào.<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
Tiếp theo là bạn bỏ đoạn JQuery Ajax này vào dưới trang.
<script type="text/javascript">
$(document).ready(function()
{
//khai báo biến submit form lấy đối tượng nút submit
var submit = $("button[type='submit']");
//khi nút submit được click
submit.click(function()
{
//khai báo các biến dữ liệu gửi lên server
var user = $("input[name='user']").val(); //lấy giá trị trong input user
//Kiểm tra xem trường đã được nhập hay chưa
if(user == ''){
alert('Vui lòng nhập Tên người dùng');
return false;
}
//Lấy toàn bộ dữ liệu trong Form
var data = $('form#form_input').serialize();
//Sử dụng phương thức Ajax.
$.ajax({
type : 'GET', //Sử dụng kiểu gửi dữ liệu POST
url : 'data.php', //gửi dữ liệu sang trang data.php
data : data, //dữ liệu sẽ được gửi
success : function(data) // Hàm thực thi khi nhận dữ liệu được từ server
{
if(data == 'false')
{
alert('Không có người dùng');
}else{
$('#content').html(data); dữ liệu HTML trả về sẽ được chèn vào trong thẻ có id content
}
}
});
return false;
});
});
</script>
Cuối cùng là nội dung xử lý trong file data.php
<?php $user= trim($_POST['user']); ?> <p>Xin chào <?php echo $user; ?></p>
Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ
