一、什麼是Ajax：

• 全稱Asynchronous JavaScript and XML；

• 非同步的 JavaScript 和 XML；

• 可以在不重新載入整個頁面的情況下（偷偷發資料），與伺服器交換資料並更新部分網頁內容；

二、Ajax之XMLHttpRequest：

1）五步使用法:

　　1.建立XMLHTTPRequest物件

　　2.使用open方法設定和伺服器的互動資訊

　　3.設定傳送的資料，開始和伺服器端互動

　　4.拿到資料後執行相關操作

這是GET請求：

HTML：
<a class="btn" onclick="AjaxSubmit2()">XMLHttpRequest點我</a>

<script>
        function AjaxSubmit2() {
            //第1步
            var xhr = new XMLHttpRequest();
            //第2步設定傳送方法
            xhr.open('GET','/ajax1.html?p=123');
            //第3步設定傳送資料
            xhr.send(null);
            //第4步，回撥函式，拿到服務端資料後執行相關操作
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){        {# 有0,1,2,3,4 四個數字都代表4個狀態 #}
                    // 接收服務端的全部資訊
                    console.log(xhr.responseText);
                }
            };
        }
    
</script>

POST請求：跟GET請求不一樣的是需要加上請求頭

HTML:
<a class="btn" onclick="AjaxSubmit4()">XMLHttpRequest點我</a>

<script>
function AjaxSubmit4() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                console.log(xhr.responseText);
            }
    };
    xhr.open("POST","/ajax1.html");
    {#  POST請求需要攜帶請求頭，Django才能解析出來  #}
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
    xhr.send("q=456");
}
</script>