Người Viết : ViKiMi Editor

Ajax và các thông tin cơ bản cần phải biết đối với LTV
Chúng ta đã biết những thuận lợi khi sử dụng Ajax trong lập trình. Ajax đã đem lại nhiều kết quả hơn, những kết quả khiến cho các lập trình viên điều mong ước và quyết định chọn Ajax như phần không thể thiếu khi phát triển Website. Chúng ta có thể nhìn lại và thấy được những thuận lợi của việc sử dụng Ajax như sau :
+ Bạn có thể cập nhật trang web mà không cần loading lại
+ Bạn có thể yêu cầu dữ liệu từ Server sau khi trang đã được tải
+ Bạn có thể nhận được dữ liệu từ Server sau khi trang đã được tải
+ Gửi dữ liệu tới Server trong xử lý nền
Chúng ta có thể thấy một đoạn xử lý Ajax như sau :
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("id_getContent").innerHTML = this.responseText;
}
};
xhttp.open("POST", "consoles_get_content.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
Việc sử dụng Ajax bạn phải tạo một đối tượng XMLHttpRequest và chúng ta cũng biết rằng tất cả các trình duyệt đều tích hợp đối tượng này.
Cú pháp để tạo đối tượng XMLHttpRequest như sau :
variable = new XMLHttpRequest();
Ví dụ : var xhttp = new XMLHttpRequest();
Đối tượng XMLHttpRequest cho phép trao đổi thông tin tới Web Server.
Đối tượng này có định nghĩa các Thuộc tính và Phương thức để giúp trao đổi thông tin với Server như sau :
CÁC PHƯƠNG THỨC CỦA ĐỐI TƯỢNG XMLHttpRequest
1. new XMLHttpRequest() : Tạo một đối tượng XMLHttpRequest
2. abort() : Huỷ yêu request cầu hiện tại
3. getAllResponseHeaders() : Trả về thông tin Header
4. getResponseHeader() : Trả về thông tin Header chỉ định
5. open(method,url,async,user,psw) : yêu cầu mở kết nối
+ method có 2 giá trị : GET và POST, là 2 kiểu Request để trao đổi dữ liệu
+ url : đường dẫn file trên Server
+ async có 2 giá trị :
True : Giúp trao đổi dữ liệu kiểu bất đồng bộ. Kiểu này là phổ biến
False : Giúp trao đổi dữ liệu kiểu đồng bộ. Kiểu này ít phổ biến, chỉ phục vụ cho những test dữ liệu
+ user : giá trị tuỳ chọn Username
+ psw : giá trị tuỳ chọn Passwords
6. send() : Gửi Request tới Server. Phương thức này sử dụng cho kiểu trao đổi dữ liệu GET
7. send(string) : Gửi Request tới Server. Phương thức này sử dụng cho kiểu trao đổi dữ liệu POST
8. setRequestHeader() : add cặp giá trị label/value tới header sẽ gửi
CÁC THUỘC TÍNH CỦA ĐỐI TƯỢNG XMLHttpRequest
1. onreadystatechange : Xác định một Function sẽ được gọi khi thuộc tính readyState thay đổi
2. readyState : Giữ trạng thái của đối tượng XMLHttpRequest
0 : Yêu cầu không được khởi tạo
1 : Kết nối Server được thiết lập
2 : Yêu cầu đã được nhận
3 : Đang xử lý yêu cầu
4 : Yêu cầu đã được hoàn thành và Phản hồi Response đã sẵn sàng
3. responseText : Trả về dữ liệu phản hồi dưới dạng chuỗi string
4. responseXML : Trả về dữ liệu phản hồi dưới dạng dữ liệu XML
5. status : Trả về status-number của Request
200 : ‘OK’
403 : ‘Forbidden’
404 : ‘NotFound’
Thông tin chi tiết bạn có thể tìm về HTML Status Request
6. statusText : Trả về status-Text (Ví dụ : ‘OK’ HOẶC ‘Not Found’)
PHÍA TRÊN CHÚNG TA ĐÃ HIỂU CÁCH TẠO MỘT ĐỐI TƯỢNG XMLHttpRequest ĐỂ TRAO ĐỔI THÔNG
TIN TỚI SERVER
CHÚNG TA CẦN LƯU Ý THÊM :
KHI CHÚNG TA TẠO MỘT ĐỐI TƯỢNG XMLHttpRequest ĐỂ TRAO ĐỔI DỮ LIỆU VỚI SERVER, CHÚNG
TA CŨNG CẦN XÁC ĐỊNH RÕ RÀNG PHƯƠNG THỨC ĐỂ TRAO ĐỔI. Chúng ta sẽ chỉ rõ đó là phương thức GET hay POST được sử dụng trao đổi dữ liệu với Server.
Những thuận lợi trong 2 phương thức GET và POST khi truyền dữ liệu như thế nào ?
+ Phương thức GET sẽ cho phép truyền dữ liệu đi một cách rõ ràng trong url gửi đi. Phương thức này sẽ cho phép truyền đi nhanh hơn, tuy nhiên một hạn chế đó là khả năng bảo mật kém hơn.
Ví dụ : var str =“Nguyễn A B”;
xmlhttp.open(“GET”, “getInfomations.php?name=” + str, true);
xmlhttp.send();
Tại file getInfomations.php trên Server chúng ta sẽ có các xử lý để lấy về các thông tin cần thiết. Và để có thể lấy được str là Nguyễn A B trong xử lý của file getInfomations.php chúng ta sẽ thực hiện như sau :
// lấy tham số str từ URL
+ Phương thức POST sẽ cho phép ẩn đi thông tin trong url được gửi đi. Phương thức này cho phép tăng tính bảo mật và mã hoá, tuy nhiên tốc độ truyền sẽ chậm hơn. Khi chúng ta sử dụng phương thức POST thì sẽ không giới hạn dung lượng dữ liệu truyền đi, đây lại là một ưu điểm lớn.
Chúng ta cũng cần biết thêm một thủ thuật nhỏ để gửi dữ liệu từ Browser tới Server, đó là để dữ liệu gửi đi như một HTML Form thì chúng ta sử dụng thêm phương thức setRequestHeader(). Phương thức setRequestHeader() sẽ giúp chúng ta thêm vào một HTML Header và khi đó chúng ta có dữ liệu gửi đi sẽ như một
HTML Form.
setRequestHeader(header, value); Thêm HTTP Header)
header: Chỉ định tên tiêu đề / Header name
value: Chỉ định giá trị
tiêu đề / Header value
Ví dụ 1 : Cách sử dụng phương thức POST một cách cơ bản
xhttp.open(“POST”, “getInfo.php”, true);
xhttp.send();
Ví dụ 2 : Cách sử dụng phương thức POST để gửi dữ liệu như một HTML Form
xhttp.open(“POST”, ” getInfomations_2.php “, true);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“fname=Anh&lname=Nguyen”);
// lấy tham số str từ URL
$strFName = $_POST[“fname”];
$strLName = $_POST[“lname”];
echo $strFName.” “.$strLName; // Hiển thi màn hình Tên Nguyễn Anh