AJAX（一）版本兼容性、XHR請求、GET 還是 POST？async= True 或 False？

總結：

• AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，

• AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換資料并更新部分網頁內容，

• 與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用，

  然而，在以下情況中，請使用 POST 請求：

  • 無法使用快取檔案（更新服務器上的檔案或資料庫）
  • 向服務器發送大量資料（POST 沒有資料量限制）
  • 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

回憶：

• 瀏覽器與服務器之間，采用 HTTP 協議通信，用戶在瀏覽器地址欄鍵入一個網址，或者通過網頁表單向服務器提交內容，這時瀏覽器就會向服務器發出 HTTP 請求，

• 1999年，微軟公司發布 IE 瀏覽器5.0版，第一次引入新功能：允許 JavaScript 腳本向服務器發起 HTTP 請求，這個功能當時并沒有引起注意，直到2004年 Gmail 發布和2005年 Google Map 發布，才引起廣泛重視，2005年2月，==AJAX 這個詞第一次正式提出，它是 Asynchronous JavaScript and XML 的縮寫，指的是通過 JavaScript 的異步通信，從服務器獲取 XML 檔案從中提取資料，再更新當前網頁的對應部分，而不用重繪整個網頁，后來，AJAX 這個詞就成為 JavaScript 腳本發起 HTTP 通信的代名詞，也就是說，只要用腳本發起通信，就可以叫做 AJAX 通信，==W3C 也在2006年發布了它的國際標準，

• 具體來說，AJAX 包括以下幾個步驟，

  1. 創建 XMLHttpRequest 實體
  2. 發出 HTTP 請求
  3. 接收服務器傳回的資料
  4. 更新網頁資料

• 概括起來，就是一句話，AJAX 通過原生的XMLHttpRequest物件發出 HTTP 請求，得到服務器回傳的資料后，再進行處理，現在，服務器回傳的都是 JSON 格式的資料，XML 格式已經過時了，但是 AJAX 這個名字已經成了一個通用名詞，字面含義已經消失了，

• XMLHttpRequest物件是 AJAX 的主要介面，用于瀏覽器與服務器之間的通信，盡管名字里面有XML和Http，它實際上可以使用多種協議（比如file或ftp），發送任何格式的資料（包括字串和二進制），

• 詳細流程

  • XMLHttpRequest本身是一個建構式，可以使用new命令生成實體，它沒有任何引數，

    var xhr = new XMLHttpRequest();
    

    一旦新建實體，就可以使用open()方法指定建立 HTTP 連接的一些細節，

    xhr.open('GET', 'http://www.example.com/page.php', true);
    

    上面代碼指定使用 GET 方法，跟指定的服務器網址建立連接，第三個引數true，表示請求是異步的，

  • 然后，指定回呼函式，監聽通信狀態（readyState屬性）的變化，

  • xhr.onreadystatechange = handleStateChange;
        
    function handleStateChange() {
      // ...
    }
    

    上面代碼中，一旦XMLHttpRequest實體的狀態發生變化，就會呼叫監聽函式handleStateChange

  • 最后使用send()方法，實際發出請求，

    xhr.send(null);
    

    上面代碼中，send()的引數為null，表示發送請求的時候，不帶有資料體，如果發送的是 POST 請求，這里就需要指定資料體，

  • 一旦拿到服務器回傳的資料，AJAX 不會重繪整個網頁，而是只更新網頁里面的相關部分，從而不打斷用戶正在做的事情，

1. AJAX簡介

AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），

AJAX 不是新的編程語言，而是一種使用現有標準的新方法，

AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換資料并更新部分網頁內容，

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行，

什么是 AJAX ？

AJAX = 異步 JavaScript 和 XML，

AJAX 是一種用于創建快速動態網頁的技術，

通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，

傳統的網頁（不使用 AJAX）如果需要更新內容，必需多載整個網頁面，

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等，

AJAX 作業原理

AJAX是基于現有的Internet標準

AJAX是基于現有的Internet標準，并且聯合使用它們：

• XMLHttpRequest 物件 (異步的與服務器交換資料)
• JavaScript/DOM (資訊顯示/互動)
• CSS (給資料定義樣式)
• XML (作為轉換資料的格式)

AJAX應用程式與瀏覽器和平臺無關的！

2. 創建 XMLHttpRequest 物件（兼容性）

XMLHttpRequest 是 AJAX 的基礎，

所有現代瀏覽器均支持 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject），

==XMLHttpRequest 用于在后臺與服務器交換資料，==這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，

創建 XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：

variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 物件，如果支持，則創建 XMLHttpRequest 物件，如果不支持，則創建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3. 向服務器發送請求（XHR請求）

如需將請求發送到服務器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

GET 還是 POST？

參考鏈接：[點這里]：

• HTTP定義了與服務器互動的不同方法，最基本的方法有4種，分別是GET，POST，PUT，DELETE，HTTP中的GET，POST，PUT，DELETE就對應著對這個資源的 查，改，增，刪 4個操作，
• GET請求的資料會附在URL之后（就是把資料放置在HTTP協議頭中），以?分割URL和傳輸資料，引數之間以&相連，如login.actionname=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD，如果資料是英文字母或數字，則原樣發送；如果是空格，轉換為+；如果是中文或其他字符，則直接把字串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII碼值，而與之對應的，POST把提交的資料放置在HTTP包的包體中，
• POST的安全性要比GET的安全性高，注意：這里所說的安全性和上面GET提到的“安全”不是同個概念，上面“安全”的含義僅僅是不作資料修改，而這里安全的含義是真正的Security的含義，比如：通過GET提交資料，用戶名和密碼將明文出現在URL上，因為：(1)登錄頁面有可能被瀏覽器快取，(2)其他人查看瀏覽器的歷史紀錄，那么別人就可以拿到你的賬號和密碼了，除此之外，使用GET提交資料還可能會造成Cross-site request forgery攻擊（CSRF,跨站請求偽造，也被稱為：one click attack/session riding），

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用，

然而，在以下情況中，請使用 POST 請求：

• 無法使用快取檔案（更新服務器上的檔案或資料庫）
• 向服務器發送大量資料（POST 沒有資料量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

GET 請求(URL)

一個簡單的 GET 請求：

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，您可能得到的是快取的結果，

為了避免這種情況，請向 URL 添加一個唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通過 GET 方法發送資訊，請向 URL 添加資訊：

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST 請求(setRequestHeader(header,value))

一個簡單 POST 請求：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來添加 HTTP 頭，然后在 send() 方法中規定您希望發送的資料：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML），

XMLHttpRequest 物件如果要用于 AJAX 的話，其 open() 方法的 async 引數必須設定為 true：

對于 web 開發人員來說，發送異步請求是一個巨大的進步，很多在服務器執行的任務都相當費時，AJAX 出現之前，這可能會引起應用程式掛起或停止，

通過 AJAX，JavaScript 無需等待服務器的回應，而是：

• 在等待服務器回應時執行其他腳本
• 當回應就緒后對回應進行處理

Async=true

當使用 async=true 時，請規定在回應處于 onreadystatechange 事件中的就緒狀態時執行的函式：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async = false

我們不推薦使用 async=false，但是對于一些小型的請求，也是可以的，

請記住，JavaScript 會等到服務器回應就緒才繼續執行，如果服務器繁忙或緩慢，應用程式會掛起或停止，

注意：當您使用 async=false 時，請不要撰寫 onreadystatechange 函式 - 把代碼放到 send() 陳述句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;