1.2.6.1 Ajax là gì?
Đối với những người lập trình web thì Ajax là công nghệ phát triển web không mấy xa lạ. Ajax là cụm từ viết tắt của Asynchronous JavaScript and XML – nghĩa là "JavaScript và XML không đồng bộ", là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động. Trong đó:
- HTML và CSS giữ vai trò hiển thị dữ liệu
- Mô hình Document Object Model được thực hiện thông qua JavaScript nhằm hiển thị
thông tin động và tương tác với những thông tin được hiển thị.
- Đối tượng XMLHttpRequest dùng để trao đổi dữ liệu một cách không đồng bộ với
máy chủ web.
- XML thường là định dạng mặc định cho dữ liệu dược truyền, ta cũng có thể thay đổi
định dạng của dữ liệu theo kiểu JSON hay văn bản thuần,…
1.2.6.2 Tại sao nên sử dụng Ajax?
Đối với một ứng dụng web thông thường khi người dùng gửi yêu cầu lên server, server sẽ thực hiện lấy dữ liệu, kiểm tra hợp lệ, tính toán,…sau đó sẽ gửi trả kết quả cho người dùng là 1 trang HTML hoàn chỉnh. Việc này nhìn qua có vẻ hợp lý, tuy nhiên nếu nhìn kỹ một chút sẽ thấy được những hạn chế của nó mà có thể cải tiến được nếu sử dụng Ajax.
Khi nhận được một HttpRequest lên server, thay vì server xử lý và trả về cả 1 trang html hoàn chỉnh (có nghĩa là khi có kết quả sẽ có tải lại trang) thì Ajax chỉ nạp lại những nội dung bị thay đổi còn các phần khác được giữ nguyên, thời gian chờ sẽ được thay thế bằng thông điệp như “đang tải dữ liệu…”. Vì vậy, sử dụng Ajax sẽ làm giảm quá trình “đi lại” của thông tin và giảm thời gian chờ đợi của người dùng và thời gian xử lý của server.
Ví dụ: Sau khi đăng ký xét tuyển trực tuyến, thí sinh muốn thay đổi nguyện vọng xét tuyển bằng cách đăng nhập vào hồ sơ, chọn lại ngành, chọn khối xong, thí sinh bấm nút “Lưu”. Thay vì server xử lý kiểm tra thông tin đăng đăng ký hợp lệ,…rồi trả lại kết quả bằng cách tải lại toàn bộ giao diện trang hồ sơ xét tuyển thì ta sử dụng Ajax vào sự kiện này để giảm bớt gánh nặng cho server. Dữ liệu truyền đi được định dạng theo kiểu JSON.
function saveToServer() {
if (kiemtra() == false) { return; }
if (thisinh.duyet == true) { //no update
$("#modal-no-update").modal('show'); return;
}
//make json[] DangkiAjax
var fListDangkiAjax = [];
for (var row = 1; row <= 4; row++) {
if ($("#tr_" + row).css('display') == 'none') { //not visible
continue; }
//add to list
var fDangkiAjax = Object();
fDangkiAjax.id = parseInt(thisinh.id); fDangkiAjax.sophieu = 0;
fDangkiAjax.duyet = false;
var chonkhoi = "chonkhoi_" + row; //ds khoi
var danhsachkhoi = [];
$("#" + chonkhoi + " option:selected").each(function () { danhsachkhoi.push($(this).val());
}); (adsbygoogle = window.adsbygoogle || []).push({});
fDangkiAjax.danhsachkhoi = danhsachkhoi;
fDangkiAjax.nganh = $("#chonnganh_" + row).val(); fListDangkiAjax.push(fDangkiAjax); //push to list
}
//show wait
$("#modal-wait").modal('show');
var DTO = JSON.stringify(fListDangkiAjax); $.ajax({
url: "/thisinhdangki/save", type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8", data: DTO
}).done(function (data) {
$("#modal-wait").modal('hide');
$("#modal-wait-success").modal('show'); }).fail(function () {
$("#modal-wait").modal('hide'); alert("Lỗi! Hãy tải lại trang");
});
}//end fn