Ajax trong javascript cách tạo request dành cho web dev để tương tác chủ động đến server ở xa.
Trong hoạt động của mô hình web từ thưở sơ khai, các request gửi đến server đều do user chủ động thực hiện. Ví dụ user gõ 1 url rồi enter hoặc khi user nhắp 1 hyperlink, hay khi user nhắp nút submit trong form. Khi đó request được gửi đến server để lấy trang web. Trang mới về sẽ che khuất trang hiện tại.
AJAX (Asynchronous JavaScript and XML) là 1 kỹ thuật được phát triển về sau trong Javascript. Nó giúp tạo ra các request đến server ở xa bằng javascript chứ không cần đến sự chủ động của người xem web. Nhờ đặc điểm này, Ajax giúp trang web có tính tương tác cao, chạy nhanh, cung cấp nhiều tiện lợi cho user.
Sử dụng hàm fetch()
Hàm fetch(url,options) là một hàm dùng để gửi request đến web server với. Bạn dùng hàm này để thực hiện lời gọi các API, request các trang web xử lý dữ liệu … Cú pháp như sau:
fetch( url ,options )
.then(function( response ) {
if ( !response.ok ) throw Error( response.statusText );
return response.json();
//đánh giá response có thành công không
//và rồi chuyển dữ liệu cho .then sau
})
.then( function( data ) {
console.log( data );
//biến data để hứng dữ luệu từ response.json() ở trên
//tính toán và hiện kết quả data ra trang web
//có thể return tiếp cho then sau nữa, nếu cần
})
.catch(function(error) {
console.log('Có lỗi nè : \n', error);
});
Trong đó url là địa chỉ trang web/api muốn request. Còn options là object json chứa các thông số cho request, có thể bỏ qua (method mặc định là get)
Trong then đầu tiên, response là đối tượng hứng các thông tin response từ server. Sử dụng biến response này để đánh giá kết quả trả về có ok không. Sau đó chuyển nó thành các dạng dữ liệu cần thiết cho .then phía sau (dùng hàm json() hoặc hàm text() ).
Trong then thứ 2, data là đối tượng chứa dữ liệu theo định dạng từ then trên đổ xuống. Trong hàm này, bạn xử lý dữ liệu theo nhu cầu như tính toán và hiện kết quả ra trang web.
Nếu có lỗi trong khối fetch thì code trong catch sẽ chạy. Sau đây là ví dụ tiếp:
<div id="kq"></div>
<script>
url ="http://localhost:3000/posts";
fetch( url )
.then(function(res) {
if (!res.ok) throw Error("Lỗi: " + res.statusText);
return res.json();
})
.then(function(data) {
str="";
for ( i in data ) {
str+="<p>" + data[i].title + "</p>";
}
document.querySelector("#kq").innerHTML=str;
})
.catch(function(error) {
console.log('Có lỗi nè : \n', error);
});
</script>Dùng đơn giản: Khi chỉ lấy dữ liệu, bỏ qua options. code trong then có thể làm gọn hơn
<div id="kq"></div>
<script>
url ="http://localhost:3000/posts";
fetch (url)
.then( x => x.text())
.then( y => document.getElementById("kq").innerHTML = y);
</script>
Do fetch dựa trên async, nên code trên có thể viết thành:
<div id="kq"></div>
<script>
let url ="http://localhost:3000/posts";
getText(url);
async function getText(url) {
let res = await fetch(url);
let data = await res.text();
document.getElementById("kq").innerHTML = data;
}
</script>
Ví dụ dùng post để send data
<script>
let t = {
id: 131,
title: "Đời tôi cô đơn",
author: 'Áp min'
}
let url ="http://localhost:3000/posts";
let options = {
method: "post",
body: JSON.stringify(t),
headers: { 'Content-Type':'application/json' }
}
fetch (url, options)
.then( r => r.json())
.then( d => console.log(d) );
</script>
Tham khảo thêm: https://www.codegrepper.com/code-examples/javascript/.fetch+method
Sử dụng thư viện Axios
Axios là một thư viện trên Promise có nhiều tính năng hay. Nó giúp bạn dễ dàng tạo các request đến server ở xa.
Ưu điểm thứ nhất của Axios là vấn đề xử lý lỗi. Khi sử dụng fetch, nếu khi server trả về lỗi 4xx 5xx, thì hàm catch() sẽ không được gọi. Và bạn phải kiểm tra mã trả về để đánh giá request thành công không. Còn Axios sẽ reject tất cả các promise của request nếu các lỗi trên được trả về.
Thứ hai là fetch không tự động gửi cookie lên server khi request. Bạn cần phải truyền một cách trực tiếp trong options để gửi cookies. Còn với Axios thì bạn cần lo về chuyện này.
Địa chỉ thư viện: https://www.npmjs.com/package/axios . Trên website, nhắp Installing đế xem hướng dẫn nhúng vào trang nhưng dễ nhất là nhúng từ CDN.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> hoặc <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Tạo một request với Axios
Cơ bản để tạo request, bạn chỉ việc dùng đối tượng axios với các tham số như method, url, data …
axios({
method: 'post', //method request : get, post, delete, put...
url: 'luudiem.php', //địa chỉ của tài nguyên
data: { masv: 'ps123456', diem: '8' } // data gửi lên server
});Ví du: request lấy danh sách thể loại từ server
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> axios({ method:"get", url:"http://localhost:3000/theloai", responseType:"json" }) .then(function(res){ console.log(res.data); }) .catch(function(error){ console.log("Lỗi: " + error) }) .finally(function(){ console.log("Chạy cuối cùng"); }) </script>
Các alias tạo request tương ứng với các http method
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
Tạo request với phương thức GET
Dùng get khi cần lấy dữ liệu từ server. Code theo cấu trúc đơn giản như sau:
axios.get(url)
.then(function (response) {
//Xử lý dữ liệu trả về, ví dụ: console.log(response);
})
.catch(function (error) {
//xử lý khi có lỗi, ví dụ: console.log(error);
});
Cấu trúc của dữ liệu trả về từ server
Cấu trúc của response trả về từ server bao gồm các thông tin như sau:
{
data: { }, // dữ liệu trả về từ server
status: 200, // mã HTTP status trả về từ server
statusText: 'OK', // text mô tả status từ server
headers: {}, // các header mà server phản hồi
config: {}, // các cấu hình khi thực hiện request
request: {} // là request thực hiện để nhận được response này
}Tạo request với phương thức POST
Post dùng để gửi dữ liệu lên server (ví dụ dữ liệu trong form)
axios.post(url, {
usename: 'teonv',
password: 'MaiAnhToi'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Ajax trong javascript mà trái tim là hàm fetch là một công cụ rất tốt giúp bạn chủ động tương tác đến server theo các nhu cầu nghiệp vụ của website.
