posts - 22,comments - 35,trackbacks - 0

        首先XMLHttpRequest不是web标准,而是大部分主流浏览器都支持的一种扩展技术。它被认为是一种异步调用的实现技术,因为它本来是被设计在后台取数据用的。在IE中它被作为一个ActiveX控件提供,而其他一些浏览器都提供一些本地API以供调用。
下面是一些关于XMLHttpRequest的基本方法:

1、获取得一个XMLHttpRequest对象:

function getXMLHttpRequest() {
  
var xRequest = null;
  
if (window.XMLHttpRequest) {
    xRequest 
= new XMLHttpRequest();
  }
 else if (typeof ActiveObject !=  "undefined"{
    xRequest 
= new ActiveXObject("Microsoft.XMLHTTP");
  }

  
return xRequest;
}

2、向服务器发送XMLHttpRequest:

function sendRequest(url, params, HttpMethod) {
  
if (!HttpMethod){
    HttpMethod 
= "POST";
  }

  
var req = getXMLHttpRequest();
  
if (req) {
    req.open(HttpMethod, url, 
true);
    req.setRequestHeader(
"Content-Type""application/x-www-form-urlencoded");
    req.send(params);
  }

}

3、使用回调方法来监测XMLHttpRequest对象的状态
XMLHttpRequest使用属性readyState来表示它的状态
  0 = 未初始化
  1 = 读取中
  2 = 已读取
  3 = 交互中
  4 = 完成
在事件驱动开发中我们经常使用回调技术,比如UI设计中的对按键的响应等等。我们可以使用对XMLHttpRequest对象的onreadystatechange属性来设置监视XMLHttpRequest对象的状态的回调方法:

function sendRequest(url, params, HttpMethod) {
  
if (!HttpMethod){
    HttpMethod 
= "POST";  
  }
  
  
var req = getXMLHttpRequest();
  
if (req) {
    req.onreadystatechange 
= onReadStateChage;
    req.open(HttpMethod, url, 
true);    
    req.setRequestHeader(
"Content-Type""application/x-www-form-urlencoded");    
    req.send(params);  
  }

}


function onReadyStateChange()
  
//
}


4、完整的例子

<html>
  
<head>
  
<script language="JavaScript">
    
var req = null;
    
var infos = new Array("init""loading""loaded""running""finished");
    
var console = null;
    
    
function initXMLHttpRequest() {
      
if (req == null{
        
if (window.XMLHttpRequest) {
          req 
= new XMLHttpRequest();
        }

        
else if (typeof ActiveObject !=  "undefined"{
          req 
= new ActiveXObject("Microsoft.XMLHTTP");    
        }
  
      }

    }

    
    
function sendRequest(url) {
      
if (req == null{
        initXMLHttpRequest();  
      }
 
      
      
if (req) {
        req.onreadystatechange 
= onReadyStateChange;
        req.open(
"GET", url, true);
        req.setRequestHeader(
"Content-Type""application/x-www-form-urlencoded");
        req.send(
null);  
      }

    }

    
    
function onReadyStateChange(){  
      
if (console == null{
        console 
= document.getElementById('console');  
      }

      
      
var state = req.readyState;
      
var txt;  
      
if (state == 4{
        
if (!req.status == 200{
          txt 
= "response:" + req.status;    
        }
 else {
          txt 
= "response:" + req.responseText;
        }
  
      }
 else {    
        txt 
= infos[state];  
      }

      
      
var newline = document.createElement("div");
      newline.appendChild(document.createTextNode(txt));  
      console.appendChild(newline); 
    }

  
</script>
  
</head>
  
<body>
    
<div id="console"></div>
    
<input type="button" onClick="sendRequest('ajax_test.txt')" value="Send Request"/>
  
</body>
</html>

将上面的代码保存为ajax_text.html文档中,然后在同一路径放一个ajax_test.txt,在这个文本文件写下一行文字,用浏览器打开 ajax_text.html,点击"Send Request"看看发生了什么?


学习参考资料:
《AJAX in Action》
AJAX开发简略
AJAX开发简略续一

posted on 2006-02-26 13:42 kelven 阅读(334) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航: