原生ajax

原生ajax  Async Javascript And XML

在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染

ajax分为四部分

如何创建一个原生的ajax，ajax有一个核心对象XMLHttpRequest

1.创建一个核心对象

 let xhr = new XMLHttpRequest();

2.onreadystatechange事件监听函数

        //readyState: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        //0: 请求未初始化
        //1: 服务器连接已建立
        //2: 请求已接收
        //3: 请求处理中
        //4: 请求已完成，且响应已就绪
        // 404: 未找到页面
        xhr.onreadystatechange = function (){
        if(xhr.readyState === 4){//判断readyState 为4 表示请求完成
            switch (xhr.status){
                case 200:{       //判断status 状态码 为 200 表示接口请求成功
                    console.log(JSON.parse(xhr.responseText));
                    break;
                }
                case 404:{
                    console.log("页面或者资源找不到");
                    break;
                }
            }
        }
    }

3.调用xhr.open()

 xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);
//第一个是请求的方式GIT或post，第二个是请求的地址，第三个是同步或异步，默认是false，异步

4.发送请求数据

 xhr.send(null)

常见的http状态码

http常见状态码

    1xx 请求正在处理

    2xx 一般都表示成功

    3xx 一般都表示重定向

    4xx 一般都表示资源找不到 客户端错误

    5xx 服务器内部错误

200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
404：(客户端问题)请求的资源没有找到 
400: 语义有误，当前请求无法被服务器理解。
401: 当前请求需要用户验证 
403: 服务器已经理解请求，但是拒绝执行它。
500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；
301/302/303：(网站搬家了，跳转)重定向

同源和跨域

跨域 (不同源) JSONP CORS(后端) Proxy(代理)

非跨域 (同源)

同源： 协议:域名:端口号  都一样 就是同源  如果有一个不一样 就是非同源(跨域)

https://www.cnodejs.org/api/v1/topics:80

    https://mail.qq.com

    协议(http/https/ftp/smtp/pop3)

    域名(www.一级域名.二级域名.顶级域名(org/com/cn/edu/gov))  /路径/路径

    端口号(http:80/https:443)