• AJAX
• Asynchronous JavaScript And XML 的首字母縮寫
• AJAX 并不是一種新的編程語言，而僅僅是一種技術方案，它可以創建更好、更快且交互性更強的 web 應用程序。
• 本質是在HTTP協議的基礎上通過異步的方式與服務器進行通信
• 功能：
  可以不用跳轉新界面, 就可以發送請求。
  可以直接和服務器進行交互。
• 同步和異步的概念解釋
• 指某段程序執行時不會阻塞其它程序執行，其表現形式為程序的執行順序不依賴程序本身的書寫順序，相反則為同步
• 同步：一個做完才能做另外一個
• 異步：把一個任務交給其他人，自己做另外一個，兩人一塊做
• XMLHttpRequest
• 瀏覽器內建對象，用于在后臺與服務器通信(交換數據) ， 由此我們便可實現對網頁的部分更新，而不是刷新整個頁面。
• get請求使用步驟
• 1.創建請求對象（找個電話）
  new XMLHttpRequest()
  new ActiveXObject('Microsoft.XMLHTTP'); 支持IE5.6

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

• 2.設置請求方式、URL地址、同異步（輸入電話號碼）

// 參數1: 請求方式
// 參數2: 請求的url
// 參數3: 是否是異步
xhr.open('get', '01-ajax-base-server.php', true);

• 3.發送請求（撥出號碼）

xhr.send();

• 4.監聽服務器響應 (等待電話接通)

xhr.onreadystatechange = function () {  }
判斷readyState
if (xhr.readyState == 4) {
判斷狀態碼status
      var status = xhr.status;
      if (status >= 200 && status < 300 || status == 304) {
          執行第5步
        }
}

• readyState
  0：請求未初始化（還沒有調用open()）
  1：請求已經建立，但是還沒有發送（還沒有調用send()）
  2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）
  3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成
  4：響應已完成；您可以獲取并使用服務器的響應了
• 5.處理返回（響應）數據（你聽到對方說話）

在第四步的函數中處理
xhr.responseText     獲得字符串形式的響應數據。
xhr.responseXML    獲得 XML 形式的響應數據。

• Ajax-get請求參數與緩存
• 如何把數據傳送到服務器
  直接拼接到url地址后面即可
  url?name=sz&age=18

// 拿到本地需要傳送的數據
var account = document.getElementById('account').value;
var pwd = document.getElementById('pwd').value;
 設置請求的目標url (輸入電話號碼)
                // 參數1: 請求方式
                // 參數2: 請求的url
                // 參數3: 是否是異步
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd, true);

• 注意:IE瀏覽器下的get請求緩存問題,如果發送的請求，是同一個URL地址,則瀏覽器會返回之前響應的緩存
• 原因:一個相同的URL地址，一般只有一個結果， 所以，第二次訪問的時候， 如果URL字符串沒有變化，IE瀏覽器則直接使用之前的結果
• 解決方案:生成隨機數拼接到URL地址后面

 function getRandomStr() {
            return Math.random() + (new Date()).getTime();
        }
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);

• post請求與get請求區別
• 第二步中，將open的請求參數改為post即可
• 第二步中，不能將參數放在URL后面。應該在第三步send方法中傳遞

xhr.send('name=sz&age=19');

• 注意：在第二步open之后，第三步send之前需要添加：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//Content-Type防止亂碼

• 從發起請求到響應成功的完整寫法示例：

/*js 內置的 http 請求對象  XMLHttpRequest*/
/*1.初始化這個內置對象*/
var xhr = new XMLHttpRequest();
/*2.請求報文*/
/*請求行*/
xhr.open('post','01.php');
/*請求頭*/
//get  沒有必要設置
//post 必須設置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
/*請求主體*/
//get: xhr.send(null);
//post: xhr.send("數據");
xhr.send("name=xzz&age=10");/*發送請求*/
/*3.響應報文*/
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){/*通訊完全完成*/    
        if(xhr.status == 200){/*響應成功*/      
            document.querySelector('body').innerHTML = xhr.responseText;//渲染頁面
        }
    }
}