AJAX

xhttp.open(method, url, async);
xhttp.send();
/*
open(method, url, async) —— 规定请求的类型
    method：请求的类型：GET 还是 POST
    url：服务器（文件）位置
    async：true（异步）或 false（同步）

send() —— 向服务器发送请求（用于 GET）

send(string) —— 向服务器发送请求（用于 POST）
*/

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

GET 请求

一条简单的 GET 请求：

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

如果需要用 GET 方法来发送信息，请向 URL 添加这些信息：

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

POST 请求

一条简单的 POST 请求：

xhttp.open("POST", "demo_post.asp", "true");
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定需要发送的数据：

xhttp.open("POST", "ajax_text.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

/*
setRequestHeader(header, value) —— 向请求添加 HTTP 头部
    header：规定头部名称
    value：规定头部值
*/

url —— 服务器上的文件

open() 方法的 url 参数，是服务器上文件的地址。

该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送回响应之前在服务器执行操作）。

跨域访问（Access Across Domains）

出于安全原因，现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的文件必须位于同一台服务器上。

异步 —— true 还是 false？

异步请求

如需异步发送请求，open() 方法的 async 参数必须设置为 true。

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。

通过异步发送，JavaScript 不必等待服务器响应，而是可以：

在等待服务器响应时执行其他脚本
当响应就绪时处理响应

xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200){
        document.getElementById("demo").innerHTML = this.responsoText;
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

/*
onreadystatechange 属性
    通过 XMLHttpRequest 对象，可以定义当请求接收到应答时所执行的函数。
    这个函数是在 XMLHttpRequest 对象的 onreadystatechange 属性中定义的。
*/

同步请求

如需执行同步的请求，请把 open() 方法中的第三个参数设置为 false。

有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。

由于代码将等待服务器完成，所以不需要 onreadystatechange 函数。

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

我们不推荐同步的 XMLHttpRequest（async = false），因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。

同步 XMLHttpRequest 正在从 Web 标准中移除，但是这个过程可能需要很多年。

现代开发工具被鼓励对使用同步请求作出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。

AJAX 响应

onreadystatechange 属性

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

readyState 属性保存 XMLHttpRequest 的状态。

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：正在处理请求
4：请求已完成且响应已就绪

status 属性返回请求的状态号。

200："OK"
403："Forbidden"
404："Page not found"

statusText 属性返回状态文本（例如："OK" 或 "Not Found"）。

注：

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

当 readyState 为 4 ，status 为 200 时，响应就绪：

function loadDoc(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status = 200){
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
}

onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。