XMLHttpRequest使用詳解

1.什么是XMLHttpRequest
XMLHttpRequest是一個瀏覽器接口，使得Javascript可以進行HTTP(S)通信，這就是我們熟悉的AJAX。
早期，各個瀏覽器的實現都不同，HTML5之后，W3C進行了統一。
2.XMLHttpRequest使用示例

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    xhr.ontimeout = function (event) {
        alert("請求超時！");
    }
    var formData = new FormData();
    formData.append('tel', '18217767969');
    formData.append('psw', '111111');
    xhr.open('POST', 'http://www.test.com:8000/login');
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
        else {
            alert(xhr.statusText);
        }
    }
</script>

運行結果：

屬性說明：

* xhr.readyState：XMLHttpRequest對象的狀態，等於4表示數據已經接收完畢。
* xhr.status：服務器返回的狀態碼，等於200表示一切正常。
* xhr.responseText：服務器返回的文本數據
* xhr.responseXML：服務器返回的XML格式的數據
* xhr.statusText：服務器返回的狀態文本。

3.跨域資源共享（CORS）
XMLHttpRequest可以向不同域名的服務器發出HTTP請求，叫做CORS
可以進行CORS有兩個條件:
1)瀏覽器要支持CORS
2)服務器允許跨域：響應頭需要添加一下選項

self.set_header('Access-Control-Allow-Origin', '*')
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
self.set_header('Access-Control-Max-Age', 1000)
self.set_header('Access-Control-Allow-Headers', '*')
self.set_header('Content-type', 'application/json')