Javascript Simple Ajax Class

Posted by Admin, on 19/07/2010 05:12 PM in HTML, CSS, JavaScript with 6,955 views and 0 Comments

Javascript Simple Ajax Class - Image 1

Một Class Ajax đơn giản để các bạn có thể tìm hiểu Ajax

Đầu tiên ta tạo file script.js với nội dung sau

  1. function AJAX_Handler() {
  2.     this.xmlHttp = false;
  3.     try {
  4.         this.xmlHttp = new XMLHttpRequest();
  5.     } catch (e) {
  6.         try {
  7.             this.xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  8.         } catch (e) {
  9.             try {
  10.                 this.xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
  11.             } catch (e) {
  12.                 alert('Your browser does not support AJAX');
  13.                 return;
  14.             }
  15.         }
  16.     }
  17.     this.onreadystatechange = function (_func) {
  18.         this.xmlHttp.onreadystatechange = _func;
  19.     }
  20.     this.send = function (url, param) {
  21.         param = param ? param : "";
  22.         this.xmlHttp.open("POST", url, true);
  23.         this.xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  24.         this.xmlHttp.setRequestHeader("Content-length", param.length);
  25.         this.xmlHttp.setRequestHeader("Connection", "close");
  26.         this.xmlHttp.send(encodeURI(param));
  27.         this.handler = this.xmlHttp;
  28.     }
  29. }

Tiếp theo ta tạo file test.html với nội dung như bên dưới để gọi class Ajax bên trên và sử dụng nó

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test</title>
  6. <script src="script.js"></script>
  7. <script>
  8. function Ajax_Request(url, param)
  9. {
  10.     var ajaxObj = new AJAX_Handler();
  11.     ajaxObj.onreadystatechange(act_done);
  12.     ajaxObj.send(url, param);
  13.     function act_done()
  14.     {
  15.         if(ajaxObj.handler.readyState == 4 && ajaxObj.handler.status == 200){
  16.             document.getElementById('show').innerHTML = ajaxObj.handler.responseText;
  17.         }
  18.     }
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <a href="#" onclick="Ajax_Request('abc.php','a=b&c=d')">Tab 2</a>
  24. <div id="show"></div>
  25. </body>
  26. </html>  

Tiếp theo ta tạo file abc.php để trả về nội dung khi nhận được request

  1. echo "Hello World";

Bây giờ các bạn cho tất cả các file trên vào 1 thư mục ở localhost rồi chạy http://localhost/tenthumuc/index.html

và thử xem nhé

Javascript Simple Ajax ClassJavascript Simple Ajax Class
10106955
Nhận xét
Bạn còn ký tự