XMLHttpRequest實現Ajax異步請求

1、XMLHttpRequest的方法

方法 描述
abort()                                                                                          中止當前請求
getAllResponseHeaders() 把HTTP請求的全部響應首部做爲鍵/值對返回
getResponseHeader("header") 返回指定首部的串值
open("method","url) 創建對服務器的調用。Method參數能夠是GET、POST或PUT。URL參數能夠是相對URL或絕對URL
send(content) 向服務器發送請求
setRequestHeader("header","value") 把指定首部設置爲所提供的值。在設置任何首部以前必須先調用open()方法

2、XMLHttpRequest的屬性

屬性 描述
onreadystatechange 每一個狀態改變都會觸發這個事件處理器,一般會調用一個JavaScript函數
readyState 請求的狀態,有5個可取值:0=未初始化、1=正在加載、2=已經加載、3=交互中、4=完成。
responseText 服務器的響應,表示爲一個串
responseXML 服務器的響應,表示爲XML。這個對象能夠解析爲DOM對象
status   服務器的HTTP狀態碼(200對應OK、404對應NOtFont等)
statusText HTTP狀態碼的相應文本(OK或NotFount)  

①、onreadystatechange

  • 該事件處理函數由服務器發,而不是用戶
  • 在Ajax執行過程當中,服務器會通知客戶端當前的通訊狀態。這依靠更新XMLHttpRequest對象的readyState 來實現。改變readyState屬性是服務器對客戶端鏈接操做的一種方式。每次readyState屬性的改變都會觸發onreadystatechange事件

②、send(data)

  • 若選用的是GET請求,則不會發送任何數據,給send方法傳遞null便可

③、setRequestHeader(header,value)

  • 若是用POST請求向服務器發送數據,須要將"Content-type"設置爲「application/x-www-form-urlencoded」.它會告知服務器正在發送數據,而且數據已經符合URL編碼了。
  • 該方法必須在open()以後才能使用

④、responseText

  • XMLHttpRequest的responseText 屬性包含了從服務器發送的數據。它是一個HTML,XM或普通文本,這取決於服務器發送的內容。
  • 當readyState屬性變爲4時,responseText屬性纔可用,代表Ajax請求已經結束

Demo

  • 檢索helloAjax.txt文檔中的內容
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    window.onload=function(){
        //1.獲取a節點,併爲其添加onclick響應函數
        document.getElementsByTagName("a")[0].onclick=function(){
             //3.建立一個XMLHttpRequest對象
             var request=new XMLHttpRequest();
             //4.準備發送請求的數據:url
             var url=this.href +"?time="+new Date();
             var method="GET";
             //var method="POST"
             //5.調用xmlhttprequest對象的open方法
             request.open(method,url);
             //request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
             //6.調用xmlhttprequest對象的send方法,get請求參數爲null
             request.send(null);
             //request.send("name='aaa'");
             //7.爲xmlhttprequest對象添加onreadystatechange響應函數
             request.onreadystatechange=function(){
                //8.決斷響應是否完成:xmlhttprequest對象的readystate屬性值爲4
                 if(request.readyState==4){
                    //9.再決斷響應是否可用:xmlhttprequest對象status屬性值爲200
                     if(request.status==200){
                        //10.打印響應結果:responseText
                        alert(request.responseText);
                     }
                 }
             }
             //取消a節點的默認行爲
             return false;
        }
    }
    </script>
  </head>
  
  <body>
    <a href="helloAjax.txt">HelloAjax</a>
  </body>
</html>
相關文章
相關標籤/搜索