WRITING AJAX IN NOTEPAD-USING BROWSER IE ONLY

AJAX là chữ viết tắt của Asynchronous JavaScript And XML.Đó là dụng cụ kết hợp bởi  javaScript, xml, html,css,DOM,XMLHttpRequest object để browser gửi tài lịêu tới server rồi tiếp theo sau đó  browser sẽ nhận tài lịêu trả lại từ server  theo yêu cầu của chung ta và cho xuất hịên tài lịêu trên màng hình computer.

Trước năm 1980, dùng frame hay form methods 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 công việc 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.

Mở notepad viết một đề tài theo ý muốn,thí dụ đề tài  “ Nhớ Mẹ”.Viết xong thì save trong  Text Documents với tên là  nho_me.txt.

* Viết  Ajax-html .

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 bất cứ 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"); } // áp dụng cho browser IE

    else {

    xhrobj = new XMLHttpRequest(); } // áp dụng cho các browsers khác

Trong 2 functions viết chữ màu đỏ, chúng ta nối xhrobj với các properties và methods
 ( bằng dấu chấm theo qui định của DOM ) sau đây thì sẽ có AJAX họat động và cũng cho chúng ta biết browser liên lạc với server như thế nào và khi nào (how and when).

  xhrobj  có rất nhiều properties và methods nhưng trong bài nầy chúng ta cần hiểu rõ những  tên kê sau:

  open(‘get’,’…txt’) , readyState==4 , onreadystatechange , send( null ),  responseText

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. Chú ý viết bằng chữ hoa những parameters
 nầy .

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 .Nói cách khác nó chứa status của response.

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ứa function response đang xử dụng và data nhận từ server.
onreadystatechange do 3 chữ ghép chung là on, readystate và change.

                            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.

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 nên 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

 Viết thu gọn AJAX

 Để 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"); //  áp dụng cho browser IE mà thôi.

           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ả.
Function  màu xanh lá cây không có tên (anonymous function) được gọi là callback function.

( 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ốn asynchronous.

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.
Khi không viết true hay false thì mặc nhiên là default asynchronous

Trong Ajax, handler function còn được gọi callback function phải đi theo với onreadystatechange, 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.
******************************************************
Browser là software liên lạc ,giao thông với Web Server bằng ngôn ngữ HTTP, chuyển đổi HTML và những codes hình ảnh thành chữ viết và hình xuất hiện trên màng hình monitor. 
HTTP viết tắt  của chữ Hypertext Transfer Protocol là ngôn ngữ để browser nói chuyện với server.
Web Server là software chạy trong computer chấp nhận liên lạc và giao thông với browsers bằng ngôn ngữ HTTP.
Hiện nay có 2 Web Servers rất thông dụng là Apache và Microsoft Internet Information Server.
*********************************************

KHI NÀO THÌ CẦN VIẾT AJAX DÙNG TRONG  WEBSITE ?

 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));}};

* 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 .
Ngoài AJAX, đã có những kỹ thuật khác sau đây làm được công việc giống AJAX gọi là Alternatives to AJAX:
 XUL( XML User Interface Language ) , Applets , Flash , SVG ( Scalable Vector Graphics) , Adobe Flex and XAML .