使用 Ajax 技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程式能夠更快地回應用戶的操作。 ...
AJAX
一. 什麼是 AJAX？
AJAX 全稱：Asynchronous Javascript And XML（非同步的 JavaScript 與 XML）
網頁的局部刷新技術，網頁不需要刷新整個頁面來更新部分網頁數據
二. 原始的 JS 創建 AJAX 步驟（☆）
-
創建 AJAX 的核心對象，XMLHttpRequest 根據不同的瀏覽器來創建相對應的Ajax對象
var req; if(window.XMLHttpRequest){ // 非IE req = new XMLHttpRequest(); }else { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); } -
與伺服器進行連接
// 第一個參數：提交方式 get 或 post // 第二個參數：訪問後臺的 URL // 第三個參數：是否非同步，true 表示非同步，false 表示同步 req.open("post", url, true); -
發送請求
req.send(); // get方式：index?id=1 req.send(null); // post方式: 設置編碼方式 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var data = "id=" + 1; req.send(data); -
指定回調函數，接收後臺返回值（綁定回調函數 / 狀態監聽函數）
req.onreadystatechange = function() { // AJAX 狀態是否等於4，狀態為4表示完成了整個請求 if(req.readyState == 4) { // HTTP 狀態等於200 if(req.status == 200) { // 處理返回值 var info = req.responseText; } } }
三. readyState 屬性值（AJAX 的狀態）
| 狀態值 | 描述 |
|---|---|
| 0 | 表示“未初始化狀態”，已經創建好 XMLHttpRequest 對象，但沒有初始化 |
| 1 | 表示"載入狀態"，XMLHttpRequest 調用了 open 函數，但沒有發送請求 |
| 2 | 表示"發送狀態"，XMLHttpRequest 調用了 send 函數，發送請求 |
| 3 | 表示"接收狀態"，Servlet 已經接收到 HTTP 請求，但沒有執行完畢 |
| 4 | 表示"已載入狀態"，完全被接收，並且處理完成，前端 AJAX 可以接收返回值 |
本文來自博客園，作者：Schieber，轉載請註明原文鏈接：https://www.cnblogs.com/xiqingbo/p/front-end-11.html
