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

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

• 2.設(shè)置請(qǐng)求方式、URL地址、同異步（輸入電話號(hào)碼）

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

• 3.發(fā)送請(qǐng)求（撥出號(hào)碼）

xhr.send();

• 4.監(jiān)聽服務(wù)器響應(yīng) (等待電話接通)

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

• readyState
  0：請(qǐng)求未初始化（還沒有調(diào)用open()）
  1：請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用send()）
  2：請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）
  3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成
  4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了
• 5.處理返回（響應(yīng)）數(shù)據(jù)（你聽到對(duì)方說話）

在第四步的函數(shù)中處理
xhr.responseText     獲得字符串形式的響應(yīng)數(shù)據(jù)。
xhr.responseXML    獲得 XML 形式的響應(yīng)數(shù)據(jù)。

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

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

• 注意:IE瀏覽器下的get請(qǐng)求緩存問題,如果發(fā)送的請(qǐng)求，是同一個(gè)URL地址,則瀏覽器會(huì)返回之前響應(yīng)的緩存
• 原因:一個(gè)相同的URL地址，一般只有一個(gè)結(jié)果， 所以，第二次訪問的時(shí)候， 如果URL字符串沒有變化，IE瀏覽器則直接使用之前的結(jié)果
• 解決方案:生成隨機(jī)數(shù)拼接到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請(qǐng)求與get請(qǐng)求區(qū)別
• 第二步中，將open的請(qǐng)求參數(shù)改為post即可
• 第二步中，不能將參數(shù)放在URL后面。應(yīng)該在第三步send方法中傳遞

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

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

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

• 從發(fā)起請(qǐng)求到響應(yīng)成功的完整寫法示例：

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