http请求概述

当浏览器输入网址后

浏览器首先向DNS域名解析服务器发送请求。

DNS反解析：根据浏览器请求地址中的域名，到DNS服务器中找到对应的服务器外网IP地址

通过找到外网IP，向对应的服务器发请求（首先访问服务器的WEB站点管理工具：准确来说是我们先基于工具在服务器上创建很多服务，当有客户端访问的时候，服务器会匹配出具体请求那个服务）

通过url地址中的端口号，找到服务器上对应的服务，以及服务管理的项目资源文件

服务端根据请求的地址名称或问号传参或者哈希值，把客户端要的内容进行准备和处理

把准备的内容响应给客户端（如果请求的是HTML文件或者css等这样的资源文件，服务器返回的是资源文件中的源代码【不是文件本身】）

客户端浏览器接收到服务器返回的源代码，基于自己内部的渲染引擎（内核）开始进行页面绘制和渲染

首先DOM结构，生成DOM TREE

自上而下运行代码，加载css等资源内容

根据css生成带样式的 RENDER TREE

开始渲染和绘制

客户端请求

打开请求：发送请求之前的一些配置

HTTP METHOD 请求方式

POST：向服务端推送数据（传向服务端发送的多，向服务端获取的少）

GET：向服务端推送数据（传向服务端发送的少，向服务端获取的多）

PUT：像服务端存放一些内容（一般是存放文件）

DELETE：删除服务端的的某些内容（一般是删除一些文件）

HEAD：只想获取响应头信息，不要响应主体的内容

OPTIONS && TRACE：一般使用它向服务器发送一个探测性请求，如果服务器端返回信息了，说明客户端和服务器端建立了连接，我们可以继续执行其它请求了（TRACE就是干这件事的，但是axios这个AJAX类库在基于cross domain进行跨域请求的时候，就是先发送OPTIONS请求进行探测尝试，如果能连通服务器，才会发送其他请求）

CONNECT：使用TCP直接去连接的，所以不适合在网页开发中使用

URL 向服务器端发送请求API（Application Programming Interface）接口地址 3.ASYNC设置AJAX同步或者异步，默认是异步（写TRUE也是异步），FALSE是同步，项目中都是用异步编程，防止阻塞后影响后部代码执行 4.USER-NAME/USER-PASS: 用户名和密码一般不设置

    // 创建AJAX实例：IE6是不兼容的，使用new ActiveXObject来实现的
    let xhr = new XMLHttpRequest();
    // 打开请求：发送请求之前的一些配置项
    xhr.open([HTTP METHOD], [URL], [USER-NAME], [USER-PASS])
    // 事件监听：一般监听的都是 READY-STATE-CHANGE 事件（AJAX状态改变事件），基于这个事件可以获取服务器返回的响应头和响应主题内容
    xhr.onreadystatechange=()=>{
        if(xhr.readyState === 4 && xhr.status === 200) {
            xhr.responseText;
        }
    }
    // 发送AJAX请求：从这步开始，当前AJAX任务开始，如果是同步的，后面代码会等待请求成功后执行，反之不会
    xhr.send([请求主体内容])

常用的POST && GET请求方式

传递服务器的方式不一样 GET是URL问号传参的方式把信息传到服务器，POST是基于 请求主题把信息传到服务器。

    [GET]
    xhr.open('GET', '/status/list?id=100&name=zhangsan');
    [POSt]
    xhr.send('---URL---');

区别：

GET一般应用于（向服务器传递的少一些），而POST是传给服务器的多一些，如果POST是基于问号传参方式的话会出现一些问题：URL会拼接很长，浏览器对于URL的长度有最大限度（谷歌8Kb 火狐7KB IE2KB ...）超过的部分浏览器就把他截掉了，所以POST都是使用请求主题传参的，请求主体是没有限制的，项目中会做大小限制，以防请求发送数据过大会迟迟完不成。

GET不安全，POST相对安全 因为GET是基于问号传参把信息传递给服务器的，容易被骇客进行URL劫持，POST是基于请求主题传递的，相对来说不容易被劫持，所以登陆注册等安全性操作，应该用POST请求

GET会产生不可控的缓存，POST不会 不可控：是浏览器自主记忆的缓存，我们无法基于js控制，项目中我们会把这个缓存干掉， GET缓存产出是因为向某个页面请求多次，浏览器会把之前的数据从缓存中拿到返回，导致拿不到新的数据（post不会）

    // GET请求处理缓存的方案：在URL后面添加一个随即小数每次会获得新数据
    xhr.open('GET', `/status/list?id=100&name=zhangsan&_=${Math.random()}`);

关于XMLHttpRequest常用内置方法

var xhr = XMLHttpRequest() (ie6以下是new ActiveXObject('Microsoft.XMLHTTP')) xhr.response 响应主题 xhr.responseText 响应主题内容（JSON或者XML格式字符串都可以） xhr.responseXML 响应主体内容是XML文档 xhr.status 返回HTTP状态码 xhr.statusText 状态码描述 xhr.timeout 设置请求超时的时间 xhr.withCredentials 是否允许跨域（FALSE） xhr.abort() 强制中断AJAX请求 xhr.getAllResponseHeaders() 获取所有响应头信息

实现简易的AJAX库

    ajax({
        url: "", //请求地址
        type: "POST",//请求方式
        data: { name: "super", age: 20 },//请求参数
        dataType: "json",
        success: function (response, xml) {
          // 此处放成功后执行的代码
        },
        error: function (status) {
          // 此处放失败后执行的代码
        }
    });

    function ajax(option) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);
        var xhr;
        
        //创建 - 第一步
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else if(window.ActiveObject) {    //IE6及以下
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        //连接 和 发送 - 第二步
        if (options.type == "GET") {
          xhr.open("GET", options.url + "?" + params, true);
          xhr.send(null);
        } else if (options.type == "POST") {
          xhr.open("POST", options.url, true);
          //设置表单提交时的内容类型
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send(params);
        }
    
        //接收 - 第三步
        // xhr.status状态码
        // 200 OK成功（只能证明服务器返回信息了，但是信息不一定是业务所需要的）
        // 301 Moved Permanently 永久转移（永久重定向：域名更改，访问原始域名重定向到新的域名）
        // 302 Move temporarily 临时转移（临时重定项：307：网站现在是基于HTTPS协议运作的，如果访问的是HTTP协议，会基于307重定向到HTTPS协议上）
        // 302一般用作服务器负载均衡：当一台服务器达到最大并发数的时候，会把后续访问的用户临时转移到其他服务器机组上处理
        // 偶尔真实项目中会把所用的图片单独放到服务器上“图片处理服务器”，这样减少主服务器的压力，当用户向主服务器访问图片的时候，主服务器都把它转移到图片服务器上处理
        // 304 Not Modified设置缓存：对于不经常更新的文件，例如：css/js/html/img等，服务器会结合客户端设置304缓存，第一次加载的资源会缓存到客户端了，下次在获取的时候，会从缓存中加获取，如果更新了，服务端会通过最后修改时间来强制让客户端从服务器从新拉取，基于Ctrl+F5强制刷新页面，304的缓存就没有用了。
        // 400 Bad Request 请求参数错误
        // 401 Unauthorized 无权限访问
        // 404 NOt Found 找不到资源（地址不存在）
        // 413 Request Entity Too Large 和服务器交互的内容资源超过服务器最大限制
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300 || status == 304) {
              options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
              options.error && options.error(status);
            }
          }
        }
        
    }
    
    // 拼接get方式传参?号后面url
    function formatParams(data) {
        var arr = [];
        for (var item in data) {
            arr.push(item + "=" + data[item]);
        }
        arr.push(("v=" + Math.random()).replace("."));
        return arr.join("&");
    }