JavaScript学习笔记 —— Ajax

写在前面：

      我们知道，浏览器想要从服务器获取内容，首先需要向服务器发送HTTP请求，然后服务器响应请求，并根据请求内容返回数据。通常，HTTP并不在脚本的控制下，只是当用户单击链接、提交表单和输入URL时才发生。

     Ajax（Asynchronous JavaScript and XML）描述了一种主要 使用脚本操纵  HTTP的web应用架构，它能够异步处理HTTP的响应，这意味着我可以同时发送多个HTTP请求，但是并不用阻塞等待处理服务器的响应。

三要素：请求（request）、响应（response）、回调（callback）

一个HTTP请求由4部分组成：

• HTTP请求方法（GET、POST、DELETE、HEAD、OPTIONS、PUT等）或“动作”
• 正在请求的URL
• 请求头集合（可选，可能包括身份验证信息：token等）
• 请求主体（可选）

服务器返回的HTTP响应包含3部分：

• 状态码（用来显示请求成功或失败：200 ‘OK’ -> 成功、404 ‘NOT FOUND’ -> URL不能匹配服务器上任何资源 ）
• 响应头结合
• 响应主体

实现核心：XMLHttpRequest

    XMLHttpRequest 类的每个实例对象都表示一个独立的 请求/响应对，它允许指定请求细节和提取响应数据。

指定请求：

1. request.open()  //开始一个HTTP请求
2. request.setRequestHeader()  //设置请求头
3. request.send()  //发送请求

取得响应：

1. 监听onreadystatechange事件
2. 判断readystate 和 status 的值
3. 通过 request.getResponseHeather('Content-type')  判断响应体的类型
4. 执行回调函数callback

具体代码

function getData(url, data, callback) {
        const request = new XMLHttpRequest();
        request.open('POST', url);
        request.onreadystatechange = function () {
            if (request.readyState === 4 && callback) {
                callback(request);
            }
        };
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        request.send(data);
    }

参考文献：《JavaScript权威指南》