XML教學 | XML HttpRequest
XML HttpRequest是什麼？
首先要知道目前的瀏覽器都有一個內置的XMLHttpRequest對象來從服務器請求資料。
XMLHttpRequest(XHR)是JavaScript著名的古老API，
頁面能透過它操作HTTP請求，進行網路作業，
擷取資料的同時，卻不需進行頁面重載！
這大大的增加Web「效能」與「體驗」，此非同步的Web應用架構，稱為AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），是過去許多Web應用的基石。
註：Ajax != XHR，僅是最常見的應用模式。
然而「過去」表示為不推薦使用，其結構設計已無法應對複雜的Web環境，且容易陷入回調函式地獄 。
儘管如此，仍值得了解其用法，對於理解其他API、維護舊系統皆能有所幫助。
註：這邊不會對
AJAX的部份做深入說明與教學。
XMLHttpRequest對象的運用可以：
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載後從服務器請求資料
- 在頁面已加載後從服務器接收資料
- 在後台向服務器發送資料
發送XMLHttpRequest
範例使用 w3schools - Sending an XMLHttpRequest
1 |
|
範例<script>說明：
- 首先建立一個名為
loadXMLDoc的function。1
function loadXMLDoc()
- 以建構元實例一個
XMLHttpRequest物件。1
var xhttp = new XMLHttpRequest();
- 使用
onreadystatechange屬性指定每次XMLHttpRequest對象的狀態發生變化時要執行的函數。1
xhttp.onreadystatechange = function()
- 函數內判斷當
readyState屬性為4且status屬性為200時，表示回應完成。1
if (this.readyState == 4 && this.status == 200)
註：
readyState數字的狀態描述，參考。 responseText屬性將服務器回應作為字串返回，並更新網頁物件ID為demo的內容。1
document.getElementById("demo").innerHTML = xhttp.responseText;
- 使用
open()方法，設定請求xmlhttp_info.txt檔。1
xhttp.open("GET", "xmlhttp_info.txt", true);
註：請求方法除了
GET與POST，還能使用PUT、DELETE、HEAD、OPTIONS。並且使用了非同步(async)的方式接收回應。
註：詳細open()，參考。 - 最後發送請求
send()方法。1
xhttp.send();
註：詳細
send()，參考。
範例<html>說明：
- 建立一個
div區塊，並設定id為demo。 - 新增一個
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
