实现ajax、网络你必须要知道的点

实现ajax

以2开头都是正常的
以3开头的都是重定向–地址变化了
以5开头就是服务器端的问题
以4开头，就是前端的问题 404–没有找到资源，原因可能是地址写错了
400—代表的是传递的数据的类型不是后端接收的

ajax: async javascript and json
主要用来实现前后端的数据交流
A 要发送一个信息给B
请求当中需要有的基本信息：
1、B的地址
2、请求方式 get post
3、请求数据
4、状态码（B是否正常接受数据）
5、响应数据

创建ajax必须考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject(“Microsoft.XMLHTTP”)

function ajax(url, type, data, success, flag) {
 //创建ajax必须考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject("Microsoft.XMLHTTP")
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.onreadystatechange = function () {
        /* 
            0 1 2 3 4
            0：当前代理已经被创建  还没有调用open方法
            1：调用了open方法  建立连接
            2：send方法已经被调用
            3：代理正在接受响应信息
            4：代表响应数据全部发送完成
        */
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success(JSON.parse(xhr.responseText))
            } else {
                console.log('error')
            }
        }

    }
    if (type == 'GET') {
        xhr.open(type, url + '?' + data, flag); //当flag为true，就是异步传输
        xhr.send();
    } else {
        xhr.open(type, url, flag);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //setRequestHeader更改请求头
        xhr.send(data);
    }

}

网络你必须要知道的点

1. ajax ===> 封装ajax函数 ajax 用来请求资源 可以使页面局部刷新
   
   2. 网络的基础知识
   (1). 五层网络模型： 物理层 —》 数据链路层 ----》网络层—》 传输层—》 应用层
   duing 邓哥奇遇记
   七层网络模型：
   应用层: 网络服务与最终用户的一个接口。协议有：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
   表示层: 数据的表示、安全、压缩。（在五层模型里面已经合并到了应用层）格式有，JPEG、ASCll、DECOIC、加密格式等
   会话层: 建立、管理、终止会话。（在五层模型里面已经合并到了应用层） 对应主机进程，指本地主机与远程主机正在进行的会话
   (2). 同源策略
   浏览器提出的安全机制 规定 协议域名端口号均相同的资源 可以相互之间通信
   如果在不同源的位置去交互的话需要认证
   源： 协议+域名+端口号
   https://www.baidu.com:443/
   http://www.baidu.com:80/
   (3). 三次握手 和 四次挥手 发生在传输层 TCP/IP协议 TCP 和 UDP
   (4). 请求方式： GET(获取数据的时候会用到) POST（新建数据保存的时候用到） HEAD PUT（修改数据的时候会用到） DELETE（删除数据的时候会用到）
   GET POST区别：
   1. get请求把参数拼接在了地址上， post请求放在了请求体里
   2. get请求方式传递数据量较少， post请求传递数据量较大
   3. post相对于get而言较安全

                1.	GET	请求指定的页面信息，并返回实体主体。
                2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
                3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
                4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
                5	DELETE	请求服务器删除指定的页面。
                6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
                7	OPTIONS	允许客户端查看服务器的性能。
                8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
                9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新 。
        (5). 状态码：
            2xx  请求成功返回
            3xx  重定向   301永久性重定向   302 临时性重定向   304 资源未修改  
            4xx  客户端错误    404没有找到（检查地址）   403没有权限   400错误的请求（参数有错误） 
            5xx  服务器端错误  500  服务器内部错误
        (6). http 和 https的区别
            https  是在http的基础上运用了ssl加密  运用的加密算法 rsa 默认端口号443 
            http:  超文本传输协议 端口号80
            非对称 和 对称 
        (7). 
            客户端和服务器端的跨域：     
            <1>  jsonp  ---》 不是w3c标准里的
                原理： script标签身上的src属性是不受同源策略的限制的
                src="http://www.baicu.com?"
            <2>  服务器代理
            <3>  iframe 
                iframe + window.name   ---》  父页面请求子页面的数据  儿子给父亲数据
                iframe + location.hash ----》  子页面请求父页面的数据  父亲给儿子数据
                iframe + window.postMessage  ---》  双向请求
            <4>  CORS  ---》cross-origin resource sharing  跨域资源共享
                    后端来设置一个响应头  access-control-allow-origin: 'http://www.duyiedu.com'
                    浏览器先发出请求到服务器  返回的过程中 判断是否是同源的   
                    如果不是同源的会去看响应报文的响应头是否有 access-control-allow-origin: * / 当前页面的域名
                    w3c标准里面提出的
            <5>  document.domain   ---》 基础域名相同的页面 可以跨域
                浏览器将 CORS 请求分成两类：
                简单请求和非简单请求，只要同时满足下面两个条件就属于简单请求 
                    ( 1 ) 请求的方法只能是 HEAD，GET，POST 
                    ( 2 ) HTTP 的头信息不超出以下几种字段
                        Accept
                        Accept-Language
                        Content-Language
                        Last-Event-ID
                        Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
                        只要不满足以上两个条件就属于非简单请求，浏览器对于非简单请求会进行一次预检

                    对于简单请求
                非简单请求
                    预检请求
                    非简单请求指的是对服务器有特殊要求，比如请求方法为 PUT 或 DELETE，或者 Content-Type 字段的类型是 application/json。
                    非简单请求的 CORS 请求会在通信之前，增减一次 HTTP 查询的请求，成为 “预检”。
                    浏览器会先询问服务器，当前网页所在的域名是否在服务器许可的名单之中，
                    以及可以使用哪些 HTTP 请求和头部字段。如果通过服务器的校验，才会发起正式的 XMLHttpRequest 请求，否则就报错


                非简单请求的响应头里面必须含有以下字段：

                    Allow-Control-Access-Origin 必需，表示可以请求的源。
                    Access-Control-Allow-Methods 必需，表示支持的所有方法，以逗号分隔
                    Access-Control-Allow-Headers 如果浏览器请求包括 Access-Control-Req方法，以逗号分隔
                    Access-Control-Allow-Headers 如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段。

            HTTP请求的发出经历了什么