ajax請求的完整步驟

時間 2019-11-17

標籤 ajax 請求完整步驟欄目 Ajax 简体版

原文原文鏈接

AJAX = 異步JavaScript和XML，能夠使網頁實現異步更新，達到局部更新的目的。
html

1、AJAX請求步驟以下：

一、建立XMLHttpRequest對象
ajax

var xhr;
if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}
else{
    var xhr = new ActiveXObject("Microsoft.XMLHttp");
}

二、向服務器發送請求
瀏覽器

xhr.open(method,url,async);
xhr.send();//GET請求無參數，POST請求時必定要有參數

注：緩存

method：請求的類型 GET或POST
url：文件在服務器上的位置，相對位置或絕對位置
async：異步（true）同步（false）

三、服務器響應

responseText 得到字符串形式的相應數據

responseXML 得到XML形式的響應數據
安全

四、獲取服務器狀態碼

XMLHttpRequest有三個重要屬性：onreadystatechange，readyState ，status。
服務器

readyState 屬性存有 XMLHttpRequest 的狀態信息，從0-4發生變化。
異步

0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒async
status
post

200:OK
404:未找到頁面url
readyState 觸發onreadystatechange事件

xhr.onreadystatechange = function(){
    if(xhr.readystate == 4&& xhr.status == 200){
        do something;
    }
}

五、簡單的實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xhr;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xhr = new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行代碼
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange=function()
    {
        if (xhr.readyState==4 && xhr.status==200)
        {
            document.getElementById("myDiv").innerHTML = xhr.responseText;
        }
    }
    xhr.open("GET","/try/ajax/ajax_info.txt",true);
    xhr.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>

</body>
</html>