XMLHttpRequest實現Ajax異步請求

時間 2019-11-13

標籤 xmlhttprequest 實現 ajax 異步請求欄目 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。