Like Share Discussion Bookmark Smile

J.J. Huang   2022-11-14   XML 2.延伸介紹   瀏覽次數:次   DMCA.com Protection Status

XML教學 | XML HttpRequest

XML HttpRequest是什麼?

首先要知道目前的瀏覽器都有一個內置的XMLHttpRequest對象來從服務器請求資料。

XMLHttpRequest(XHR)JavaScript著名的古老API
頁面能透過它操作HTTP請求,進行網路作業,
擷取資料的同時,卻不需進行頁面重載

這大大的增加Web「效能」與「體驗」,此非同步的Web應用架構,稱為AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScriptXML技術),是過去許多Web應用的基石。

註:Ajax != XHR,僅是最常見的應用模式。

然而「過去」表示為不推薦使用,其結構設計已無法應對複雜的Web環境,且容易陷入回調函式地獄

儘管如此,仍值得了解其用法,對於理解其他API、維護舊系統皆能有所幫助。

註:這邊不會對AJAX的部份做深入說明與教學。


XMLHttpRequest對象的運用可以:

  • 在不重新加載頁面的情況下更新網頁
  • 在頁面已加載後從服務器請求資料
  • 在頁面已加載後從服務器接收資料
  • 在後台向服務器發送資料

發送XMLHttpRequest

範例使用 w3schools - Sending an XMLHttpRequest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "xmlhttp_info.txt", true);
xhttp.send();
}
</script>

</body>
</html>

範例<script>說明:

  • 首先建立一個名為loadXMLDocfunction
    1
    function loadXMLDoc()
  • 以建構元實例一個XMLHttpRequest物件。
    1
    var xhttp = new XMLHttpRequest();
  • 使用onreadystatechange屬性指定每次XMLHttpRequest對象的狀態發生變化時要執行的函數。
    1
    xhttp.onreadystatechange = function()
  • 函數內判斷當readyState屬性為4status屬性為200時,表示回應完成。
    1
    if (this.readyState == 4 && this.status == 200)

    註:readyState數字的狀態描述,參考

  • responseText屬性將服務器回應作為字串返回,並更新網頁物件IDdemo的內容。
    1
    document.getElementById("demo").innerHTML = xhttp.responseText;
  • 使用open()方法,設定請求xmlhttp_info.txt檔。
    1
    xhttp.open("GET", "xmlhttp_info.txt", true);

    註:請求方法除了GETPOST,還能使用PUT、DELETE、HEAD、OPTIONS。並且使用了非同步(async)的方式接收回應。
    註:詳細open()參考

  • 最後發送請求send()方法。
    1
    xhttp.send();

    註:詳細send()參考


範例<html>說明:

  • 建立一個div區塊,並設定iddemo
  • 新增一個button,並在按下按鈕後觸發執行loadXMLDoc的方法。
    1
    2
    3
    <div id="demo">
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
    </div>

執行效果:

結語

此章節「簡單」介紹了XMLHttpRequest(XHR)和使用簡單的範例做操作,使其更能想像能夠應用的方面。
下一章節將會介紹XML Parser的部份。


註:以上參考了
NotFalse 技術客 - XMLHttpRequest — JavaScript 發送 HTTP 請求
MDN - XMLHttpRequest.readyState
MDN - XMLHttpRequest.open
MDN - XMLHttpRequest.send
w3resource.com - XML HttpRequest
RUNOOB.COM - XMLHttpRequest 对象
維基百科-XML
Family with 220 icons by inipagi