Người Viết : ViKiMi Editor

AJAX : Asynchronous Javascript And Xml
Chúng ta cố gắng phát triển website càng ngày càng đạt các yêu cầu cao hơn. Các vấn đề về bảo mật cũng khiến chúng ta phải cố gắng quan tâm; đồng thời cải tiến tốc độ cho trang web cũng phải thực hiện; Việc lựa chọn công nghệ mới càng ngày càng theo xu hướng chung càng phải hiện đại; Có quá nhiều vấn đề để phát triển cho một Website được hoàn thiện.
Một trong các vấn đề ấy cũng là cách giải quyết có thể tìm thấy ở Ajax. Với Ajax website có thể đảm bảo tính hoạt động ở một tốc độ cao hơn; Kết nối giữa các tầng dữ liệu đạt tính bảo mật hơn; Ajax còn hỗ trợ cải thiện tốc độ tốt hơn. Ajax giúp lập trình Frontend và Backend được rõ nét hơn…
Nhưng có một điều đặc biệt đó là Ajax không phải là một ngôn ngữ lập trình. Ajax là viết tắt của :
Asynchronous Javascript And Xml
Ajax là sự kết hợp sử dụng của các thành phần :
+ Một đối tượng XMLHtmlRequest của trình duyệt được tích hợp sẵn ( để request dữ liệu từ Web server )
+ Javascript và HTML DOM ( để hiển thị hoặc sử dụng dữ liệu )
Ajax có thể sử dụng XML để truyền dữ liệu từ máy chủ web; cũng có thể sử dụng văn bản thuần thuý hoặc định dạng văn bản JSON để truyền dữ liệu từ máy chủ web. Các cách này hiện nay được sử dụng phổ biến như nhau.
Ajax được sử dụng kết hợp với nhiều ngôn ngữ lập trình, cho phép lập trình viên để truyền tải dữ liệu từ máy chủ web một cách hiệu quả. Vì vậy, việc sử dụng Ajax trong thiết kế website rất được ưa thích nhằm tăng tính xử lý linh động của website hơn nữa. Tất cả các ngôn ngữ lập trình như PHP, ASP, JAVA … đều có thể kết hợp với Ajax.
Ajax thường được dùng để truyền tải dữ liệu một cách bất đồng bộ; Dữ liệu được truyền tải từ máy chủ web tới giao diện website theo cơ chế bất đồng bộ là phổ biến. Với cách này thì khá giống xử lý đa luồng dữ liệu trong máy tính, nhờ đó tốc độ sẽ nhanh hơn, hiện tượng website phải chờ các xử lý quá lâu là gần như không có.
Điều này có nghĩa là cho phép website cập nhật từng phần mà không cần phải Loading lại toàn bộ.
Chúng ta có thể hình dung Ajax làm việc như sau :

Sau đây chúng ta sẽ xem cách một Ajax thực hiện công việc :
1. Chúng ta có một File Javascript Ajax_js.js để hoạt động Ajax như sau :
function loadFileTextFromServer() {
const {protocol, hostname} = document.location;
const port = document.location.port ? `:${document.location.port}` : '';
const serviceUrl = '/Vic-Com.vn';
const url = `${protocol}//${hostname}${port}${serviceUrl}`;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("TextPanel").innerHTML =
this.responseText;
}else{
alert(‘Có Lỗi Xảy Ra;’);
}
};
xhttp.open("GET", url+ "/Congviec.txt", true);
xhttp.send();
}
2. Chúng ta có file Congviec.txt có nội dung như sau :
<table style="color:blueviolet;">
<thead>
<tr>
<th>Tên Công Việc</th>
<th>Lương nhận </th>
<th>Người Thực Hiện</th>
</tr>
</thead>
<tbody id=’Table_Content’>
<tr>
<th>Pha Chế</th>
<th>12. M</th>
<th>Nguyễn Anh</th>
</tr>
<tr>
<th>Bồi Bàn</th>
<th>8. M</th>
<th>Nguyễn Lan</th>
</tr>
<tr>
<th>Lau Dọn</th>
<th>8. M</th>
<th>Nguyễn Linh</th>
</tr>
<tr>
<th>Quản Lý</th>
<th>13. M</th>
<th>Nguyễn An</th>
</tr>
</tbody>
</table>
3. Chúng ta có file HTML như sau :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" https://vic-com.vn/Style/style.css">
<script src="https://vic-com.vn/application/Ajax_js.js "></script>
<head>
<body>
<div id="TextPanel">
<h1>VÍ DỤ CƠ BẢN VỀ CÁCH LÀM VIỆC VỚI AJAX :</h1>
<button type="button" onclick=" loadFileTextFromServer()">
Change Content
</button>
</div>
</body>
</html>
GIẢI THÍCH CÁCH HOẠT ĐỘNG MÃ CODE Ở TRÊN :
Vì đây là ví dụ giải thích về Ajax nên sẽ chỉ tập trung các chú giải cho hoạt động của Ajax :
+ Hoạt động trong file Javacsript :
Đoạn code dưới đây để lấy thông tin về giao thức ( protocol) hoạt động của Website là http hay https ; để lấy thông tin hostname
const {protocol, hostname} = document.location;
Lấy về cổng hoạt động ( Port ) : 80 hay 81 …;
const port = document.location.port ? `:${document.location.port}` : '';
const serviceUrl = '/vic-com.vn';
Lấy về đường dẫn url của Website
const url = `${protocol}//${hostname}${port}${serviceUrl}`;
Khai báo đối tượng XMLHttpRequest để truyền dữ liệu với Server Web và các điều kiện khi việc truyền dữ liệu sẽ thành công. Nếu thành công thì sẽ hiển thị nội dung của File Text CongViec.txt vào khung chứa Div có id=”TextPanel”. Thông tin của File Text CongViec.txt được gửi về nhờ Response từ Server Web
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("TextPanel").innerHTML = this.responseText;
}else{
alert(‘Có Lỗi Xảy Ra;’);
}
};
Sử dụng đối tượng XMLHttpRequest để thông tin tới Server web
xhttp.open("GET", url + "/JS/Congviec.txt", true);
xhttp.send();
Chúng ta có đường dẫn của file Congviec.txt là :
https://vic-com.vn/JS/Congviec.txt
Các hoạt động trao đổi thông tin của Server web và giao diện người dùng là như một cơ chế đa luồng dữ liệu – Cách xử lý bất đồng bộ. Và code trong file Javascript có tác dụng xử lý thông tin này liên tục khi nhận được phản hồi từ phía Server Web. Các phản hồi từ Server web sẽ được code trong file Javascript xử lý nhờ các ReadyState và Status có được.
Chú ý : Các trao đổi thông tin này luôn diễn ra giữa Server và Giao diện người dùng. Nên mỗi khi các trao đổi này diễn ra thì chúng ta lại có ReadyState và Status sẽ mang giá trị phù hợp trong mỗi lần trao đổi. Giá trị của ReadyState và Status sẽ cho chúng ta biết việc trao đổi có lỗi hay thành công không?
Javascript chỉ hoạt động phía giao diện người dùng.
+ Hoạt động trong file HTMl :
Khai báo file Javascript
<script src="https://vic-com.vn/application/Ajax_js.js "></script>
Gọi function loadFileTextFromServer() được viết trong file Javascript bằng cách Click Button
<button type="button" onclick="loadFileTextFromServer()">
Change Content
</button>
+ Tổng Quan Cách Thức Hoạt Động :

+ KẾT QUẢ SẼ CÓ
Khi chưa Click Button : Change Content

Khi Click Button : Change Content
