摘要：一是什么的全稱是，其中，是異步的意思。一定要注意如果請求是請求格式必須設(shè)置請求頭字符串拼接模板字符串

1、ajax?的全稱是Asynchronous?JavaScript?and?XML，其中，Asynchronous?是異步的意思。 
2、是7種技術(shù)的綜合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css   
3、ajax是一個與服務(wù)器端語言無關(guān)技術(shù)
4、ajax返回的數(shù)據(jù)格式（文本格式、xml、json）
5、作用：
        1、頁面五刷新的動態(tài)數(shù)據(jù)交互
        2、局部刷新頁面
        3、界面的美觀
        4、對數(shù)據(jù)庫的操作
        5、可以返回簡單的文本格式，也可以返回xml文件格式、json數(shù)據(jù)格式
      
6、原理
        數(shù)據(jù)庫
         ↑ ↓
         ↑ ↓
        服務(wù)器
          ↑ ↓
http請求  ↑ ↓  http響應(yīng)（文本/json/xml）
          ↑ ↓
     創(chuàng)建ajax引擎對象
      （瀏覽器）       相當(dāng)于是一個代理 （幫我買東西，這個就類似ajax 我自己干自己事情）
    (XmlHttpRequest)
         ↑ ↓
         ↑ ↓
         頁面
         

1、url 回車 刷新
2、特定元素href或者src
3、表單

// 1. 創(chuàng)建一個 XMLHttpRequest 類型的對象 —— 相當(dāng)于打開了一個瀏覽器
var xhr = new XMLHttpRequest()

// 2. 打開與一個網(wǎng)址之間的連接 —— 相當(dāng)于在地址欄輸入訪問地址
xhr.open("GET", "./time.php")

// 3. 通過連接發(fā)送一次請求 —— 相當(dāng)于回車或者點擊訪問發(fā)送請求
xhr.send(null)

// 4. 指定 xhr 狀態(tài)變化事件處理函數(shù) —— 相當(dāng)于處理網(wǎng)頁呈現(xiàn)后的操作
xhr.onreadystatechange = function () {
// 通過 xhr 的 readyState 判斷此次請求的響應(yīng)是否接收完成
    if (this.readyState === 4) {
    // 通過 xhr 的 responseText 獲取到響應(yīng)的響應(yīng)體
        console.log(this)
    }
}

0:初始化請求代理對象
1:open方法已經(jīng)調(diào)用,建立一個與服務(wù)端特定端口的連接
2:已經(jīng)接受到響應(yīng)報文的響應(yīng)頭,但拿不到題體
3:正在下載響應(yīng)報文的響應(yīng)體，有可能響應(yīng)體為空，也有可能不完整 // 在這里處理響應(yīng)體不保險
4: 一切ok 整個響應(yīng)報文都下載下來

get方法:通常在一次 GET 請求過程中，參數(shù)傳遞都是通過 URL 地址中的 ? 參數(shù)傳遞。

HTML


JS
var listElement = document.getElementById("list");

var xhr = new XMLHttpRequest();
// 這里任然是使用URL中問號參數(shù)傳遞數(shù)據(jù)
xhr.open("GET", "users.php");
xhr.send(null);
xhr.onreadystatechange = function () {
    if (this.readystate != 4) return
    console.log(this.responseText)
    var data = JSON.parse(this.responseText)
    for (var i = 0; i < data.length; i ++) {
        var liElement = document.createElement("li");
        liElement.innerHTML = data[i].name;
        // 設(shè)置每個元素的id
        liElement.id = data[i].id
        listElement.appendChild(liElement)
        listElement.children[i].addEventListener("click", function () {
            // TODO： 通過ajax操作獲取對應(yīng)的信息  
            // 如何獲取當(dāng)前被點擊元素的ID
            var xhr1 = new XMLHttpResquest();
            xhr1.open("GET", "users.php?id"+this.id);
            xhr1.send(null);
            xhr1.onreadystatechange = function () {
                if (this,readystate != 4) return;
                var obj1 = JSON.parse(this.responseText)
                alert(obj1.age)
            }
        }) 
    }
}

// 給每一個li注冊一個點擊事件
// 應(yīng)為li后來動態(tài)創(chuàng)建,不能在這里動態(tài)生成  應(yīng)該移上面
// for (var i = 0; i < listElement.children.length; i ++) {
//    listElement.children[i].addEventListener("click", function () {
//        console.log(11)
 //   })
//}

Post方法：請求過程中，都是采用請求體承載需要提交的數(shù)據(jù)。

JS
var btn = document.getElementById("btn");
var txtUsername = document.getElementById("username");
var txtPassword = document,getElementById("password")
btn.onclick = function () {
    var username = txtUsername.value;
    var password = txtPassword .value;
    var xhr = new, XMLHttpRequest();
    xhr.open("POST", "login.php");
    // !!!! 一定要注意 如果請求是post請求 urlencoded 格式 必須設(shè)置請求頭
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    // 字符串拼接
    // xhr.send("username=" + username + "&password=" + password)
    // 模板字符串
    xhr.send(`username=${username}&password=${password}`);
    xhr.onreadystatechange = function () {
        if ( this.readystate != 4) return;
        console.log(this.responseText)
    }
}