Ajax
là gì?
Ajax là Asynchronous JavaScript and XML một nhóm công
nghệ web nó giúp chúng ta load không đồng bộ trên một trang web. Ví dụ khi bạn
xem một tin tức thì sẽ thường thấy trạng thái của trình duyệt xoay xoay nhưng có
cái ô comment bên dưới khi bạn bình luận thì nó hiện ra ngay, nó không tải lại
toàn bộ trang mà chỉ thay đổi tại cái khu vực mà bạn thấy thôi. Đấy đại khái nó
là như thế.
Học ajax cơ
bản
Ajax không phải là ngôn ngữ mà là kĩ thuật trong
Javascript, giúp chúng ta tạo ra các ứng dụng Web Không đồng bộ (Asynchronous).
Nói dễ hiểu hơn là kĩ thuật “load dữ liệu không cần load lại trang” hay “load
một phần website”, giúp website linh hoạt, nhanh chóng và thân thiện với người
dùng hơn.
Hướng
dẫn sử dụng
Để sử dụng kĩ thuật Ajax trong jQuery, trước hết các bạn
cần chuẩn bị cho tôi đó chính là thư viện jQuery
được tải về từ http://jquery.com/download . Trong đó, jQuery sẽ có 2
phiên bản là 1.x và 2.x thì chúng ta có thể chọn lựa bản nào cũng được. Hai bản
chỉ khác nhau ở việc hỗ trợ các trình duyệt cũ và mới mà thôi, cụ thể ở đây
chính là IE 8 trở về trước. Ở đây tôi sẽ dùng bản jQuery 1.x để dễ dàng cho việc
các bạn độc giả thử nghiệm hơn.
Lưu
ý: Các bạn cũng cần phải có ít nhất 1 Web Server như (XAMPP,
WampServer,…) hoặc có thể sử dụng mini Webserver Mongoose cho HTML tại
đây mongoose-free-5.3.5 và có thể đọc hướng dẫn sau để sử
dụng https://cesanta.com/docs/FileSharing.shtml
Sau đây, tôi sẽ giới thiệu cho các bạn các phương thức
Ajax thông dụng mà jQuery đã viết sẵn:
Phương
thức “load()”
Dùng trong các trường hợp cần load dữ liệu đơn giản và
không cần thiết phải can thiệp vào dữ liệu trả về.
Và như các bạn thấy trong đoạn code ở cặp thẻ “ <script> ”,
các bạn thấy được tôi có sử dụng một file HTML khác là “vidu1.html”
để chúng ta sẽ load dữ liệu từ nó vào. Các bạn sẽ được cấu trúc đầy đủ và lưu
tên file là “index.html”
(Tên “index”
các bạn có thể tự đặt) như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<title>Hướng
dẫn
jQuery
Ajax
-
Thienanblog.com</title>
<script
type="text/javascript"
src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<a
href="#"
id="load-du-lieu">Load
dữ
liệu</a>
</div>
<div
id="noidung">
</div>
<script
type="text/javascript">
$(document).ready(function()
{
$('#load-du-lieu').click(function(e)
{
e.preventDefault();
$('#noidung').load('vidu1.html');
});
});
</script>
</body>
</html>
|
Cấu trúc file “vidu1.html”
sẽ như sau:
|
|
<p>Đây
là
vidu1.html</p>
<p
id="chuoi-can-lay">Chuỗi
cần
lấy
tiếp
theo</p>
|
Chúng ta sẽ có cấu trúc thư mục tổng thể như sau trong ví
dụ này:
Và trong cặp thẻ “<script>” tôi sẽ nhắc lại một số
cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu
lại:
- $(document).ready(function(){…}) :
tương tự với sự kiện “ onload ”,
có nghĩa là code của bạn chỉ được thực thi khi trang được load hoàn tất.
- Sự kiện “ click ”
đối số mặc định “e”
được sử dụng phương thức “ preventDefault() ”
giúp chặn lại việc load lại trang từ trình duyệt.
- $(‘#id-can-lay’) :
trỏ tới thẻ HTML mà các bạn cần lấy có “ id ”
là “ #id-can-lay ”.
Tương tự với việc các bạn sử dụng cho “ class ”.
- load() :
có đối số là đường dẫn đến file các bạn cần lấy.
Và bây giờ, chúng ta hãy thử chạy Ví dụ trên xem thế nào
nhé:
Bước 1: Load file “index.html”
mà chúng ta đã xây dựng bên trên:
Bước 2: Nhấn vào nút “Load dữ
liệu” và chạy thử:
Như vậy, sau 2 bước trên chúng ta đã load thành công dữ
liệu từ “vidu1.html”
rồi đấy. Và một câu hỏi đặt ra, đó chính là có cách nào mà chúng ta có thể chỉ
lấy chuỗi mà chúng ta cần sau khi load dữ liệu vào hay không? Các bạn hãy xem
lại cấu trúc “vidu1.html”
nhé:
|
|
<p>Đây
là
vidu1.html</p>
<p
id="chuoi-can-lay">Chuỗi
cần
lấy
tiếp
theo</p>
|
Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2
thẻ “ <p> ”
ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra
thẻ “ <p> ”
có “ id ”
là “ chuoi-can-lay ”.
Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “ <script> ”
của chúng ta như sau:
$(document).ready(function()
{
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$('#noidung').load('vidu1.html #chuoi-can-lay');
});
});
Và sau đó các bạn chạy và load
lại dữ liệu thì chúng ta sẽ được như sau:
Thật bất ngờ đúng không nào? Như vậy, để có thể bóc tách
dữ liệu từ file mà chúng ta load lên, và ở đây chính là file “vidu1.html”
thì chúng ta cần đặt “ id ”
cho thẻ bao lấy dữ liệu mà chúng ta cần tách lọc. Sau đó thêm vào ĐẰNG
SAU đường dẫn như cách chúng ta dùng jQuery để trỏ đến một thẻ trong HTML
nào đó vậy.
Vậy là chúng ta đã hoàn tất tìm hiểu xong được phương
thức “ load() ”
trong jQuery Ajax rồi đấy.
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()”
Vì có sự tương đồng giữa “ get() ” và
“ load() ”
nên chắc hẳn cách dùng cũng không có phần khác lạ so với các ví dụ ở trên, nhưng
cần lưu ý một số cú pháp để tránh nhầm lẫn với “ load() ”:
$(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()); });
});
});
Kết
quả khi chạy ví dụ trên:
- Đ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() ”
chứ không giống như “ $(‘#id-can-lay’).load() ”
như ví dụ trước ta đã xem ở phương thức “ load() ”.
- Đố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 ”
như chúng ta đã thấy. Các bạn có thể dùng “console.log(ketqua) ”
và bật F12 của trình duyệt trên Chrome/Mozilla/Opera để xem kết quả trả về khi
click vào.
- Và để 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 như ở phương thức “ load() ”
mà chúng ta đã xài trước đó. Các bạn có thể bỏ đi dòng “ $('#noidung').html($('#chuoi-can-lay').html()) ”
để thấy sự tương đồng giữa “ load() ”
và “ get() ”
chỉ khác nhau về cách dùng.
Ngoài ra “ get() ”
còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu, tuy nhiên cái này thuộc về
sự hiểu biết của các bạn trong kĩ thuật lập trình Web nên tôi không nói nhiều ở
đây, không thì sẽ loãng bài viết.
Phương
Thức “post()”
Trong phương thức này, cần có ít nhất một ngôn ngữ động ở
phía hệ thống để nhận lấy dữ liệu từ phương thức “ post() ”
truyền qua. Vì thế, ở đây tôi sẽ dùng PHP để demo cho các bạn.
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.
1
2
3
4
5
6
7
8
9
10
11
12
|
$(document).ready(function()
{
$('#load-du-lieu').click(function(e)
{
e.preventDefault();
$.post('vidu2.php',
{
emNguoiYeu:
"Em
Yêu Anh",
anhNguoiYeu:
"Anh
không phải người dễ dãi nhé"
},function(ketqua)
{
$('#noidung').html(ketqua);
});
});
});
|
Nội dung của file "vidu2.php":
|
|
<?php
echo
'<pre>'
.print_r($_POST,true).
'</pre>';
|
Kết quả ví dụ trên sau khi thực thi:
Ở 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.
Như vậy chúng ta đã hoàn tất tìm hiểu xong “ get() ”
và “ post() ”
rồi. Quá dễ đúng không nào? Đến với phần tiếp theo chúng ta sẽ tìm hiểu đến
phương thức “ ajax() ”
mạnh nhất trong thư viện jQuery. Nên đòi hỏi cách dùng nó cũng tương đối khó
khăn hơn nhưng vẫn dễ rất nhiều hơn so Javascript thuần.
Phương
thức “ajax()”
Cách sử dụng phương thức nãy vẫn giống cách gọi của các
phương thức “ get() ”
và “ post() ”
nhưng chúng ta thay vì truyền đường dẫn trực tiếp vào phương thức thì phương
thức “ ajax() ”
lại chấp nhận đối số đầu tiên chính là cấu hình cho kĩ thuật Ajax của chúng
ta:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(document).ready(function()
{
$('#load-du-lieu').click(function(e)
{
e.preventDefault();
$.ajax({
url:
'vidu2.php',
type:
'POST',
dataType:
'html',
data:
{
emNguoiYeu:
"Em
Yêu Anh",
anhNguoiYeu:
"Anh
không phải người dễ dãi nhé"
}
}).done(function(ketqua)
{
$('#noidung').html(ketqua);
});
});
});
|
Các bạn thấy chứ? Rõ ràng đố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ề.
Kết quả thực thi ví dụ trên:
Hoàn toàn không khác ví dụ trước ở phương thức “ post() ”
đúng không nào? Và không chỉ có nhiêu đó, phương thức “ ajax() ”
còn hỗ trợ hàng tá các chức năng khác nhưng tôi không thể giới thiệu hết cho các
bạn trong nội dung bài viết này được. Các bạn có thể xem thêm về tài liệu hướng
dẫn của phương thức trên tại: http://api.jquery.com/category/ajax
Các bạn có thể tải toàn bộ Sources Code của các ví dụ
trên tại đây.
Trân trọng cám ơn độc giả đã xem qua bài viết này, mong
được sự ủng hộ của các bạn ở các bài viết tới.
(st tranbao)
About the Author
Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.
Và trong cặp thẻ “<script>” tôi sẽ nhắc lại một số
cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu
lại:
Bước 2: Nhấn vào nút “Load dữ
liệu” và chạy thử:
Như vậy, sau 2 bước trên chúng ta đã load thành công dữ
liệu từ “vidu1.html”
rồi đấy. Và một câu hỏi đặt ra, đó chính là có cách nào mà chúng ta có thể chỉ
lấy chuỗi mà chúng ta cần sau khi load dữ liệu vào hay không? Các bạn hãy xem
lại cấu trúc “vidu1.html”
nhé:
Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2
thẻ “ <p> ”
ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra
thẻ “ <p> ”
có “ id ”
là “ chuoi-can-lay ”.
Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “ <script> ”
của chúng ta như sau:
Thật bất ngờ đúng không nào? Như vậy, để có thể bóc tách
dữ liệu từ file mà chúng ta load lên, và ở đây chính là file “vidu1.html”
thì chúng ta cần đặt “ id ”
cho thẻ bao lấy dữ liệu mà chúng ta cần tách lọc. Sau đó thêm vào ĐẰNG
SAU đường dẫn như cách chúng ta dùng jQuery để trỏ đến một thẻ trong HTML
nào đó vậy.
Vậy là chúng ta đã hoàn tất tìm hiểu xong được phương
thức “ load() ”
trong jQuery Ajax rồi đấy.
Ở 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.
Như vậy chúng ta đã hoàn tất tìm hiểu xong “ get() ”
và “ post() ”
rồi. Quá dễ đúng không nào? Đến với phần tiếp theo chúng ta sẽ tìm hiểu đến
phương thức “ ajax() ”
mạnh nhất trong thư viện jQuery. Nên đòi hỏi cách dùng nó cũng tương đối khó
khăn hơn nhưng vẫn dễ rất nhiều hơn so Javascript thuần.
0 nhận xét