Xem bài trước: JSON (1) - Làm quen với JSON
-----
1
JSON
và AJAX
1.1
Tổng
quan về AJAX
AJAX là viết tắt
của Asynchronous Javascript And XML, là một phương pháp, sử dụng JavaScript để
trao đổi dữ liệu giữa trình duyệt và máy chủ (web server).
Để trao đổi dữ liệu,
AJAX sử dụng đối tượng XMLHttpRequest, đây là đối tượng có sẵn của JavaScript.
Vì XMLHttpRequest
là một đối tượng của JavaScript, nên nó sẽ có sẵn các thuộc tính và phương thức
đi kèm, nhằm thực hiện các chức năng cần thiết. Ví dụ, sử dụng XMLHttpRequest để
gửi yêu cầu từ client tới server và nhận dữ liệu do server trả về.
1.2
Cấu
hình phía Server
Phần này sẽ hướng
dẫn các bước để đưa tập tin dữ liệu JSON lên web server:
Ví dụ: tạo tập
tin dữ liệu JSON có tên là sinhVien.json
[sinhVien.json]
[
{
"ten": "Tèo",
"tuoi": 20,
"Toan": 7,
"tiengAnh": 8,
"lapTrinh": 9,
"diemTB": null,
"totNghiep": null,
"lienLac": { "email": "teo@gmail.com", "phone": "0999.987.123" }
},
{
"ten": "Tí",
"tuoi": 20,
"Toan": 7,
"tiengAnh": 7,
"lapTrinh": 5,
"diemTB": null,
"totNghiep": null,
"lienLac": { "email": "ti@gmail.com", "phone": "0999.987.123" }
},
{
"ten": "Mùi",
"tuoi": 20,
"Toan": 6,
"tiengAnh": 8,
"lapTrinh": 8,
"diemTB": null,
"totNghiep": null,
"lienLac": { "email": "mui@gmail.com", "phone": "0999.987.123" }
}
]
Tạo tài khoản và đăng nhập vào trang github.com.
Tạo một repository có tên dạng một trang web, ví dụ
legiacong.github.io.
Clone repository legiacong.github.io về máy cục bộ, có thể
dùng lệnh:
E:\>git clone https://github.com/legiacong/legiacong.github.io.git
Cloning into 'legiacong.github.io'...
warning: You appear to have cloned an empty repository.
Chép tập tin sinhVien.json vào thư mục vừa clone về máy
(legiacong.github.io)
Thực hiện add tập tin sinhVien.json và commit
E:\legiacong.github.io>git add sinhVien.json
E:\legiacong.github.io>git commit -m "them du lieu"
[master (root-commit) f08fcc7] them du lieu
1 file changed, 32 insertions(+)
create mode 100644 sinhVien.json
Đẩy repository (kho chứa) lên lại trang github.com
E:\legiacong.github.io>git push
Vậy là đã tạo được dữ liệu JSON trên web server, nhập đường
dẫn để kiểm tra, ví dụ:
https://legiacong.github.io/sinhVien.json
Sẽ thấy dữ liệu JSON hiển thị trên trình duyệt.
1.3
Hoạt động của AJAX
Hoạt động của AJAX được minh họa trong hình sau (nguồn
w3schools.com):
Bước 1: Trình duyệt hoặc người dùng kích hoạt một sự kiện để bắt đầu một phiên làm
việc của AJAX (ví dụng người dùng sẽ bấm vào nút "Lấy thông tin sinh viên từ
server").
<input type="button" id="btn" value="Lấy thông tin sinh viên từ server">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
});
</script>
Phiên làm việc này bắt đầu bằng cách tạo ra một đối tượng
XMLHttpRequest:
var myRequest = new XMLHttpRequest();
Sử dụng phương thức open()
của đối tượng XMLHttpRequest để cấu hình các thông tin cho một request, gồm kiểu
của request là GET (lấy thông tin từ server), URL của server sẽ nhận request gửi
đến.
myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');
Sử dụng sự kiện onload của JavaScript để thực hiện các xử lý
khi việc gửi request lên server thành công và dữ liệu server trả về được đặt
trong myRequest.responseText
myRequest.onload = function() {
console.log(myRequest.responseText);
};
Cuối cùng là gửi
request lên server:
myRequest.send();
Bước 2: Server nhận
được request, nó sẽ thực hiện các xử lý và gửi dữ liệu trả về cho trình duyệt. Ví dụ:
server sẽ gửi dữ liệu trong tập tin sinhVien.json về trình duyệt.
Bước 3: Trình duyệt
nhận được dữ liệu từ server, thực hiện xử lý và hiển thị dữ liệu lên giao diện
bằng JavaScript. Không cần tải lại toàn bộ trang web.
Tham khảo toàn bộ
đoạn mã của ba bước ở trên:
[testajax.html]
<body>
<input type="button" id="btn" value="Lấy thông tin sinh viên từ server">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');
myRequest.onload = function() {
console.log(myRequest.responseText);
};
myRequest.send();
});
</script>
</body>
1.4
Xử lý dữ liệu tại trình duyệt khi AJAX trả về
Trong phần hoạt động của AJAX, tại bước 3, dữ liệu server trả
về thuộc dạng JSON (dạng text), do vậy cần chuyển dữ liệu JSON về dạng đối tượng
của JavaScript. Sử dụng hàm JSON.parse() của JavaScript.
var myData = JSON.parse(myRequest.responseText);
Tạo phần tử HTML để hiển thị thông tin.
<div id="danh-sach-sv"></div>
Dùng JavaScript để hiển thị thông tin
var sinhVienContainer = document.getElementById('danh-sach-sv');
…
function renderHTML(data) {
var htmlString = "";
for (var i = 0; i < data.length; i++ ) {
htmlString += "<p>" + data[i].ten + "</p>";
}
sinhVienContainer.insertAdjacentHTML('beforeend', htmlString);
}
Tham khảo mã nguồn:
[testajax.html]
<body>
<input type="button" id="btn" value="Lấy thông tin sinh viên từ server">
<div id="danh-sach-sv"></div>
<script>
var sinhVienContainer = document.getElementById('danh-sach-sv');
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');
myRequest.onload = function() {
if (myRequest.status >= 200 && myRequest.status < 400) {
var myData = JSON.parse(myRequest.responseText);
renderHTML(myData);
} else {
console.log("Da ket noi toi server, nhung server gui ve mot thong bao loi");
}
};
// ham xu ly khi AJAX bi loi
myRequest.onerror = function() {
console.log("Loi ket noi");
}
myRequest.send();
});
function renderHTML(data) {
var htmlString = "";
for (var i = 0; i < data.length; i++ ) {
htmlString += "<p>" + data[i].ten + "</p>";
}
sinhVienContainer.insertAdjacentHTML('beforeend', htmlString);
}
</script>
</body>
-----
Cập nhật [6/11/2020]