ajax-原生js

原生ajax可能是你头疼的一个东西,简单说一下

首先模拟一下 创建一个json文件

大概步骤呢 4步

1. 初始化xml对象

 var xml =new XMLHttpRequest();

2. 打开与服务器的链接通道

   xml.open("get",".文件路径",true);

请求方式两种：
GET 不安全 传输是通过url地址栏携带的 最大限制约等2KB 传输效率快
GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。
POST相对安全 不通过url地址传输 理论无大小限制 传输效率慢…

3. 向服务器发送请求

   xml.send(data);

4. xmlhttp.onreadystatechange=state_Change
   注释：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

ajax中的两种状态码:

HTTP协议状态码： status

200: 成功，并且没有任何异常
404： 地址路径出现问题，前端代码的路径有问题

      1xx  信息状态码，服务器正在处理
      2xx 成功
      3xx 重定向
      4xx 前端代码问题
      5xx 后端出现问题

ajax请求状态码：

0 未初始化 open()调用之前
1 与服务器建立连接
2 请求发送
3 服务器正在处理
4 服务器处理完成并返回内容

<script>
    //初始化xml对象
    var xml =new XMLHttpRequest();
    //打开与服务器的链接通道
    xml.open("get","./package.json",true);
    //向服务器发送请求
    xml.send(data);
    //
    xml.onreadystatechange = function(){
        /*
         readyState 属性返回当前文档的状态（载入中……）。
         该属性返回以下值:
             uninitialized - 还未开始载入
             loading - 载入中
             interactive - 已加载，文档与用户可以开始交互
             complete - 载入完成
          */
        if(xml.readyState = 4&&xml.status == 200){
            //xml.response 获取到的的数据
            console.log(xml.response);
            //callback
        }
    }
</script>