博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ajax详解及例子

Posted on 2008-09-24 11:30  功夫熊猫  阅读(1111)  评论(0)    收藏  举报
首先创建浏览器对象(因浏览器的不同,可使用ActiveXObject和XMLHttpRequest判断当前所使用的浏览器)
 var xmlHttp;
 if(window.ActiveXObject) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
 }
当readyState属性改变时调用函数
   xmlHttp.onreadystatechange=FunctionName; //FunctionName不要带写成FunctionName().
在这个函数中。首先要检查请求的状态。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断(readyState的取值如下).
接着,函数会检查HTTP服务器响应的状态值(对应的HTTP的状态如下).
   if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
          alert("OK");
        }
    }
创建一个新的HTTP请求,并指定此请求的方法、URL以及验证信息.
   xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
    参数:
        bstrMethod:数据传送方式,GET | POST(大小写不敏感).
        bstrUrl:请求的URL.
        varAsync:指定此请求是否为异步方式,默认为true.
        bstrUser:如果服务器需要验证,此处指定用户名(可省略).
        bstrPassword:验证密码(可省略).

最后发送请求到http服务器并接收回应,
此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync == False,此方法将会等待请求完成或者超时时才会返回,如果bAsync == True,此方法将立即返回。

responseStream
以Ado Stream对象的形式返回响应信息
responseText
将响应信息作为字符串返回
responseXML
将响应信息格式化为Xml Document对象并返回
responseBody
返回某一格式的服务器响应数据

readyState的取值:
  0 (未初始化)
  1 (正在装载)
  2 (装载完毕)
  3 (交互中)
  4 (完成)
对应的HTTP的状态:
100 Continue
101 Switching protocols
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

例子:
 <script type="text/javascript">
var xmlHttp;
function getName(){
    var url = document.getElementById('txtUrl');
    createHttpRequest();
    xmlHttp.onreadystatechange=state_change;
    xmlHttp.open("GET",url.value,true);
    xmlHttp.send(null);
}

function createHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}
function state_change(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
          var resXml=xmlHttp.responseXML;
         ...//处理XML.
        }
    }
}
</script>

<BODY>
<input type="text" id="txtUrl"/>
<input type="button" onclick="getName()" value="Sub"/>
<div id="txtShowInfo"></div>
</BODY>