Trước năm 1980, vì phải dùng frame hay form nên Ajax không gọn và nhanh bằng Ajax hiện nay.
Kể từ khi JSON xuất hiện rất nhiều programmers thích dùng AJAX với JSON để cho việc làm của AJAX nhanh và gọn hơn nữa.
Trong bài nầy chúng ta tìm hiểu cách viết Ajax trong notepad và xem Ajax họat động như thế nào.
*Viết một đề tài gọi là text.
* Viết Ajax .
Mở notepad,chép cẩn thận bảng html phía trên rồi save với tên là ajax.html
Khi bấm chuột vào chữ Click thì data chứa trong file nho_me.txt liền hiện ra nhờ dụng cụ AJAX có chứa sẵn trong Browser Internet Explorer.
Nếu không muốn viết code dài dòng như bảng html trên ,chúng ta viết như sau trong html tags để mở file nho_me.txt.
Browser tự động xử dụng Ajax Script tạo request rồi nhận trả lời và display ngay file nho_me.txt
Nếu muốn mở file của website thì viết URL của website thay cho file nho_me.txt
* Cắt nghĩa bảng AJAX-html
Trước hết tạo một variable là var xhrobj trong memory.Sau đó
tạo một function request() và một function response().Tên của 2 functions nầy tuỳ ý chúng ta chọn lấy chứ không bắt buộc phải theo như bảng html trên.
Vì XMLHttpRequest object là của Microsoft sáng kiến nghĩ ra-invented by MS- nên trong phần đầu tiên của function request () phải viết theo công thức của Microsoft như sau nếu dùng Browser Internet Explorer.
xhrobj là viết tắt của XMLHttpRequest object.
if (navigator.appName == "Microsoft Internet Explorer") {
xhrobj = new ActiveXObject("Microsoft.XMLHTTP"); }
else {
xhrobj = new XMLHttpRequest(); }
Trong 2 functions viết chữ màu đỏ, chúng ta nối xhrobj với các properties và method
( bằng dấu chấm theo qui định của DOM ) sau đây thì sẽ có AJAX họat động.
( bằng dấu chấm theo qui định của DOM ) sau đây thì sẽ có AJAX họat động.
Chúng ta tìm hiểu những danh từ của properties và methods :
open(‘get’,’…txt’) , readyState==4 , onreadystatechange , send( null ), respondText
open(‘get’,’…txt’) là method dùng để initialize the XMLHttpRequest Object.Trong dấu ( ) phải có một trong những parameters GET,POST,PUT,DELETE,HEAD khi gửi request đi.
Nhận thì dùng GET,gửi đi thì dùng POST
readyState là property ,là value được diễn tả bằng một con số gọi là integer value cho biết tình trạng ( state ) từ lúc gửi request tới server cho tới khi nhận được hồi đáp .
readyState có 4 trị số (value) khác nhau.Mỗi trị số biểu thị cho mỗi trạng thái như sau.
0 : cho biết XMLHttpRequest đã được thành lập (created )nhưng chưa initialized
1 : cho biết XMLHTppRequest đang ở open( ) method và sẵn sàng gửi request tới server.
2 : cho biết request đã gửi tới server nhưng chưa nhận được hồi âm response.
3 : cho biết đề tài hồi âm (response headers) đã nhận nhưng thân bài thì chưa nhận được.
4 : cho biết tài lịêu hồi âm đã nhận được hòan tòan và XMLHTppRequest Status là 200 nghĩa là “OK”.Nếu status=404 thì “ page not found.”
onreadystatechange là property, là event handler của javaScript dùng để chỉ định method đang xử dụng.
onreadystatechange=handler
onreadystatechange=ajax_response , phải viết trước send( ) method.
Mỗi lần readyState thay đổi value , thì xhrobj liền pháo kích ( fires ) vào onreadystatechange làm nó hoạt động (occurring,being triggered).
responseText là property dùng để chứa data mà server đã nhận.
responseText là property dùng để chứa data mà server đã nhận.
Khi readyState có value 0,1,2 thì responseText chứa empty string.
Khi readyState value = 3 , responseText chứa incomplete response.
Khi readyState value=4 , responseText chứa đây đủ hồi âm.̣(complete response)
Tóm tắt : Mấu chốt làm cho AJAX hoạt động là XMLHtppRequest object viết tắt xhrobj.
XMLHtpp object được kèm với các properties và methods dùng để gửi và nhận tài lịêu data giữa browser và server mà không cần phải chờ đợi sang trang gọi là asynchronous
Trong function request ( ) cần có xhrobj.open(…) , xhrobj.onreadystatechange vàxhrobj.send(null) .Khi open() method dùng GET thì chúng ta dùng null cho send() method.
Trong function response( ) cần có xhrobj.readyState và xhrobj.responseText
Để giảm bớt code, bảng ajax-html trên có thể viết gọn như sau trong script tags.Các phần khác không thay đổi.
var xhrobj;
function request() {
xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
xhrobj.onreadystatechange = function(){
if (xhrobj.readyState == 4){
alert(xhrobj.responseText);}
} ; // chữ màu xanh lá cây gọi là handler function hay callback function
xhrobj.open ('get','nho_me.txt' );
xhrobj.send(null);
} ;
Lưu ý. open() method và send() method phải viết sau cùng thì mới có kết quả.
( handler function also called callback function is called repeatedly.)
Trong xhrobj.open ('get','nho_me.txt',true ); có thể viết thêm chữ true nếu muốnasynchronous.
Nếu viết chữ false thì sẽ có synchronous và browser sẽ bị khóa cho đến khi nhận đủ hồi âm từ server.
Trong Ajax, handler function còn được gọi callback function phải đi theo vớionreadystatechange, sẽ được called khi có hồi âm response từ server và
có nhiệm vụ chính như sau.
- checking the progress of the request.
- identifying the result of the request.
- handling data returned by the server. AJAX co nhiều ưu điểm nên Google’s Gmail và Outlook Express đang xử dụng.Bên cạnh những ưu điểm vẫn có những khuyết điểm nên rất nhiều programmers đã cho ý kiến giống nhau như sau
* Viết webpages có AJAX khó hơn cách viết cổ điển vì phải dùng javaScript và mất nhiều thì giờ gây tốn kém.
* Nếu webpages có nội dung cố định hay chỉ thay đổi chút ít thì không cần AJAX.
* Nếu muốn rất đông người mở xem webpages dễ dàng với những browsers cũ thì không nên dùng AJAX. vì browsers cũ thiếu hổ trợ.
* Dùng AJAX sẽ có vấn đề security kém an toàn.Hackers có thể lọt vào ở phần nầy.
xhrobj.onreadystatechange = function (){
if( xhrobj.readyState == 4 ){
eval(alert(xhrobj.responseText));}};
if( xhrobj.readyState == 4 ){
eval(alert(xhrobj.responseText));}};
* Tuỳ theo mục đích của webpages chúng ta mới quyết định dụ̀ng hay không dùng AJAX .
* Phải dùng AJAX nếu webpages chứa rất nhiều data thay đổi tuần tự, nhiều data từ các nguồn- sources-khác nhau và nếu cần phải loading nhanh chóng.
Hiện nay đang có những nghiên cứu cải tiến AJAX bằng kỹ thuật khác .
