jQuery Ajax
AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt. Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorial trước khi theo dõi những gì được đề cập trong chương này. ...
AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt.
Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorial trước khi theo dõi những gì được đề cập trong chương này.
jQuery là một công cụ tuyệt vời cung cấp một tập hợp các phương thức AJAX dồi dào để phát triển ứng dụng web.
Tải dữ liệu một cách đơn giản với jQuery
Nó là thực sự dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc dữ liệu động bởi sử dụng jQuery AJAX. jQuery cung cấp phương thức load() để thực hiện công việc này:
Cú pháp
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ố:
Ví dụ
Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:
<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>
<p>Click on the button to load result.html file −</p>
<div id="stage" style="background-color:cc0;">
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ử <div> được tag với ID là stage. Giả sử, ./result.html file chỉ có một dòng HTML như sau:
<h1>THIS IS RESULT...</h1>
Khi bạn click vào nút đã cho, thì khi đó result.html được tải.
Nhận dữ liệu JSON trong jQuery
Có thể sẽ có một tình huống khi Server sẽ trả về chuỗi JSON cho yêu cầu của bạn. Hàm tiện ích jQuery getJSON() phân tích chuỗi JSON đã trả về và tạo chuỗi kết quả có sẵn cho hàm callback như là tham số đầu tiên để thực hiện các hành động khác xa hơn.
Cú pháp
Cú pháp của phương thức getJSON() trong jQuery là:
[selector].getJSON( URL, [data], [callback] );
Dưới đây là miêu tả chi tiết về các tham số:
Ví dụ
Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:
<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){
$.getJSON('../result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id="stage" style="background-color:#eee;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Ở đây, phương thức tiện ích getJSON() trong jQuery khởi tạo một AJAX Request tới URL file đã xác định là result.json. Sau khi tải file này, tất cả nội dung sẽ được truyền tới hàm callback mà cuối cùng sẽ được đưa đến bên trong phần tử <div> được tag với ID là stage. Giả sử, result.json có nội dung json được định dạng là:
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
Khi bạn click vào nút đã cho, thì khi đó result.json được tải.
Truyền dữ liệu tới Server trong jQuery
Nhiều khi bạn thu thập input từ người sử dụng và bạn truyền những input này tới Server để tiến hành xử lý sâu hơn. jQuery AJAX làm nó đủ dễ dàng để truyền các dữ liệu đã thu thập tới Server bởi sử dụng tham số data của bất kỳ phương thức Ajax có sẵn nào.
Ví dụ
Ví dụ này minh họa cách truyền input từ người dùng tới một WebServer mà sẽ gửi kết quả trở lại và chúng ta sẽ in nó ra:
<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){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="name" size="40" /><br />
<div id="stage" style="background-color:cc0;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>
Còn đây là code được viết trong result.php script:;
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
Bây giờ, bạn có thể nhập bất kỳ text nào vào trong hộp input đã cho và sau đó nhấn nút Show Result để xem những gì bạn đã nhập trong Input box.
Các phương thức jQuery AJAX
Bạn đã thấy khái niệm của AJAX sử dụng jQuery. Bảng sau liệt kê tất cả phương thức jQuery AJAX mà bạn có thể sử dụng tùy theo yêu cầu của bạn:
| STT | Phương thức & Miêu tả |
|---|---|
| 1 | jQuery.ajax( options )
Tải một trang từ xa bởi sử dụng một HTTP Request |
| 2 | jQuery.ajaxSetup( options )
Setup các thiết lập global cho AJAX Request |
| 3 | jQuery.get( url, [data], [callback], [type] )
Tải một trang từ xa bởi sử dụng một HTTP GET Request |
| 4 | jQuery.getJSON( url, [data], [callback] )
Tải dữ liệu JSON bởi sử dụng một HTTP GET Request |
| 5 | jQuery.getScript( url, [callback] )
Tải và thực thi một JavaScript file bởi sử dụng một HTTP GET request. |
| 6 | jQuery.post( url, [data], [callback], [type] )
Tải một trang từ xa bởi sử dụng một HTTP POST request. |
| 7 | load( url, [data], [callback] )
Tải HTML từ một file từ xa và inject nó vào trong DOM. |
| 8 | serialize( )
Sắp xếp theo thứ tự một tập hợp các phần tử input vào trong một chuỗi dữ liệu |
| 9 | serializeArray( )
Xếp theo thứ tự tất cả Form và phần tử Form như phương thức .serialize() nhưng trả về một cấu trúc dữ liệu JSON để bạn làm việc với nó. |
Các sự kiện jQuery AJAX
Bạn có thể gọi nhiều phương thức jQuery đa dạng trong suốt vòng đời của tiến trình gọi AJAX. Dựa trên cơ sở các Event/Stage khác nhau, các phương thức sau là có sẵn:
Bạn truy cập vào trang sau để xem tất cả AJAX Event trong jQuery.
| STT | Phương thức & Miêu tả |
|---|---|
| 1 | ajaxComplete( callback )
Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request hoàn thành |
| 2 | ajaxStart( callback )
Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request bắt đầu và không có hoạt động nào sẵn sàng |
| 3 | ajaxError( callback )
Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request thất bại |
| 4 | ajaxSend( callback )
Đính kèm một hàm để được thực thi trước khi một AJAX Request được gửi |
| 5 | ajaxStop( callback )
Đính kèm một hàm để được thực thi bất cứ khi nào tất cả AJAX Request đã kết thúc |
| 6 | ajaxSuccess( callback )
Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request kết thúc thành công |
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học jQuery khác tại code24h:
