前言
前面完成了頁面的跳轉、登錄，很多時候不刷新頁面就想刷新局部數據，此時ajax就是此種技術，且是異步的。
本篇實現網頁內部使用js調用ajax實現異步交互數據。
在js中使用 ajax是通過XMLHttpRequest來實現的。
Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括:HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT以及最重要的XMLHttpRequest。使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程序能夠更快地迴應用戶的操作。
Ajax不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。使用JavaScript向服務器提出請求並處理響應而不阻塞用戶核心對象XMLHttpRequest。通過這個對象，JavaScript可在不重載頁面的情況與Web服務器交換數據，即在不需要刷新頁面的情況下，就可以產生局部刷新的效果。Ajax在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。
- Ajax可使因特網應用程序更小、更快，更友好。
- Ajax是一種獨立於Web服務器軟件的瀏覽器技術。
- Ajax基於Web標準：JavaScript、XML、HTML與CSS，在Ajax中使用的Web標準已被良好定義，並被所有的主流瀏覽器支持。
- Ajax用程序獨立於瀏覽器和平臺。
Web應用程序較桌面應用程序有諸多優勢；它們能夠涉及廣大的用戶，它們更易安裝及維護，也更易開發。但是，因特網應用程序並不像傳統的桌面應用程序那樣完善且友好。 通過 Ajax，因特網應用程序可以變得更完善，更友好。
XMLHTTP是一組API函數集，可被JavaScript、JScript、VBScript以及其它web瀏覽器內嵌的腳本語言調用，通過HTTP在瀏覽器和web服務器之間收發XML或其它數據。XMLHTTP最大的好處在於可以動態地更新網頁，它無需重新從服務器讀取整個網頁，也不需要安裝額外的插件。該技術被許多網站使用，以實現快速響應的動態網頁應用。例如：Google的Gmail服務、Google Suggest動態查找界面以及Google Map地理信息服務。
XMLHTTP是AJAX網頁開發技術的重要組成部分。除XML之外，XMLHTTP還能用於獲取其它格式的數據，如JSON或者甚至純文本。
使用XMLHttpRequest來發送HTTP請求以實現網站和服務器之間的數據交換。
XMLHttpRequest對象是Ajax的核心，它有許多的屬性、方法和事件。
當一個XMLHttpRequest對象被創建後，readyState屬性標識了當前對象的狀態。
responseText屬性包含客戶端接收到的HTTP響應的文本內容。
- readyState爲0、1、2時：爲一個空字符串；
- readyState爲3時：爲還未完成的響應信息；
- readyState爲4時：爲含完整的響應信息；
描述了HTTP狀態代碼文本，並且僅當readyState屬性值爲3或4時纔可用。檢測返回結果的判斷就是：
if(readyState===4 && statusText===200)
{
……
}
如我們的Demo：
open(method, url, async, username, password)
- 參數method：請求的類型，GET、POST、PUT、DELETE、HEAD類型，輸入的時候使用大寫；
- 參數url：請求的資源地址，請求資源的web api地址；
- 參數async：是否發送異步請求，true-異步請求，false-同步請求；
- 參數username（可爲空）：需要服務器驗證訪問用戶時，設置username；
- 參數password（可爲空）：需要服務器驗證訪問用戶時，設置password；
調用open()方法後，再調用send()方法將請求發送。當open()方法中async參數爲true（異步）時，在send()方法調用後立即返回，否則將會中斷直到請求返回。
設置請求的頭部信息
獲取請求的頭部信息
onreadystatechange：狀態變化事件
當readyState屬性值發生改變時，就會觸發onreadystatechang事件，代碼中是依賴onreadystatechang進一步判斷狀態和狀態文本來做處理。
var xhr = new XMLHttpRequest();
xhr.open('GET','/checkState/data',true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200)
{
……
}
}
document.getElementById("dt2").innerHTML = xhr.responseText;
準備之前的demo v1.3.0模板：
下面是新增定時獲取和手動按鈕獲取得html：
新建了一個處理，特別是增加了對於ajax技術的路徑處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>長沙紅胖子Qt</title>
</head>
<body>
<p><a>這裏是檢測狀態Demo v1.4.0了</a></p>
<p><a id="dt1">123.567</a></p>
<p><a id="dt2">123.567</a></p>
<p><a id="dt3">123.567</a></p>
<p><button onclick="reset()">清空</button></p>
<p><button onclick="getDt1()">獲取</button></p>
<script>
function reset() {
document.getElementById("dt1").innerHTML="---.---";
document.getElementById("dt2").innerHTML="---.---";
document.getElementById("dt3").innerHTML="---.---";
}
function getDt1(