A. AJAX是什么?

英文: Asynchronous Javascript And XML
简写: AJAX(异步无刷新技术)

描述:
   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

作用:
    1. 异步与服务器通信
        减少不必要的数据传输、时间及降低网络上数据流量
    2. 无刷新更新数据
    3. 按需请求
        AJAX 并不适合大量的数据交互
        建议: 保持小量传输

B. 页面

每一次HTTP请求，我们都从服务器获取了整个页面的数据。

假设我们做个体育网站，通常需要经常更新比分，比如勇士VS骑士。按照以前的方式，就是不断地刷新页面，不断地请求服务器，比分才得以更新，而通常我们需要更新的仅仅是比分数据，其他的数据压根不需要改变。不断地刷新页面，不断地请求服务器带来的就是对人力财力资源的严重资源浪费。

于是机智的人类，就想，能不能通过一种方式，在不刷新页面的情况下，数据也能得到更新呢？此时AJAX就诞生了。

AJAX的本质，就是在同一个页面，发起多个HTTP请求，只不过就是由开发者通过代码去实现。

C. 实现步骤

1. 实例化对象
    `var ajax = new XMLHttpRequest();`

2. 建立连接
    * 调用open()方法并不会真正发送请求，而只是启动一个请求准备发送

    ajax.open(method,url,async)

        method: 请求的类型；GET 或 POST
        url: 文件在服务器上的位置
        async: true(异步) 或 false(同步)

3. 发送请求
    ajax.send([string])
    string: string 参数仅用于 POST 请求

4. 准备事件
    ajax.onreadystatechange
        每当 readyState 改变时，就会触发 onreadystatechange 事件。

    监听状态
        status
            200: "OK"
            404: 未找到页面
            http请求状态码
                2xx - 成功
                304
                    状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据
                4xx - 错误
        readyState
            0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成，且响应已就绪

        `把请求比喻"打电话",status 就相当于你拨打的电话号码是否正确，号码正确时，对方是否直接挂掉你的电话，200就是一切正常，电话拨通了，404就是你的电话号码错误，403就是对方直接拒绝接听。`

5. 响应
    响应主体内容会保存到 ajax.responseText 中

D. 摸清 ajax.open 中的参数

ajax.open(method,url,async)
    1. async: 是否启用异步
        true
            表示异步,发生请求后，无需等到服务器执行完毕，可以继续执行当前代码
        false
            表示同步,发生请求后，要等待服务器执行完毕才继续执行当前代码。

    2. method: 设置请求方式
        1. post
            * 告诉浏览器，使用 urlencoded 格式发送数据
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            * urlencoded 格式
            ajax.send('key1=val1&key2=val2');

        2. get
            * get 方式是通常URL将数据传递

            ajax.send();

    3. url: 请求地址


* ajax函数
    自定义成函数，方便不同请求执行不同操作