Axios介绍

Axios是专注于网络数据请求的库，相比于XMLHttpRequest对象。axios简单易用，相比于jQuery，axios更加轻量化，只专注于网络数据请求

引入外部js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

格式

Axios发送get请求的语法：

Axios.get("url",{params:{} }).then(callback)

其中then中执行成功后的回调函数

Axios发送post请求的语法：

Axios.post("url",{ {} }).then(callback)

其中then中执行成功后的回调函数

小练习

<script>
    axios.get("/data/student.json").then(function (res) {
        console.log(res)
    })
    //所传参数
    var obj = {}
    //JSON.stringify(obj)转换为字符串向node后台传参
    axios.post("/data/student.json",{JSON.stringify(obj)}).then(function (res) {
        console.log(res)
    })
</script>

node 运行的js后台文件，每次接口调用时都需要在终端使用nide运行js文件

以下代码直接c v到js文件中

var http = require("http");
var queryString = require("querystring");
http.createServer(function (req, res) {
    //实现跨域
    res.writeHead(200, { "Access-Control-Allow-Origin": "*" });
    //创建存储数据变量
    var params = "";
    //获取数据
    req.on("data", function (d) {
        //参数拼接
        params += d.toString();
    });
    //请求数据结束
    req.on("end", function () {
      //将获取的参数转换为json格式
      params = JSON.parse(params);
      var retu = {message:"成功返回",states:1}
        //将多条信息转换为字符串返回到客户端
      res.write(JSON.stringify(retu));
      // 结束
      res.end();
    });
  })
  .listen(8090);

使用原生Ajax封装函数

// function myAjax(type, url, data, async, success, error)
function myAjax(obj) {
  // 定义xmlhttp变量存储拆功能键对象
  var xmlHttp = createXmlHttp();
  //请求方式    get/post
  if (obj.type.toUpperCase() == "GET") {
    //明文地址栏传参
    xmlHttp.open(obj.type, obj.url + "?" + obj.data, obj.async);
    // 发送请求
    xmlHttp.send();
  } else if (obj.type.toUpperCase() == "POST") {
    //明文地址栏传参
    xmlHttp.open(obj.type, obj.url, obj.async);
    xmlHttp.setRequestHeader(
      "Content-Type",
      "application/x-www-form-urlencoded"
    );
    // 发送请求
    xmlHttp.send(obj.data); //post请求方式通过send()将参数传递到服务器端
  } else {
    throw new Error("您的请求方法有误！");
  }
  //事件处理
  xmlHttp.onreadystatechange = function () {
    //   判断状态值
    switch (xmlHttp.readyState) {
      case 1:
        console.log(
          "open() 方法已调用，但是sned()方法未调用，请求还没有被发送"
        );
        break;
      case 2:
        console.log(
          "send() 方法已调用，HTTP请求已发送到web服务器，未接受到响应。"
        );
        break;
      case 3:
        console.log("所有响应头部都已经接收到。响应体开始接收但未完成。");
        break;
      case 4:
        if (xmlHttp.status == 200) {
          console.log("HTTP相应已经完全接收。");
          // 回调函数
          obj.success(xmlHttp.responseText);
        }
        break;
      default:
        error(xmlHttp.statusText());
        break;
    }
  };
}
function createXmlHttp() {
  //   判断浏览器是否支持ActiveX控件
  if (window.ActiveXObject) {
    // try{}试试    不行就执行catch{}
    try {
      xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //判断是是否把XMLHttpRequest实现为本地JavaScript对象
  } else if (window.XMLHttpRequest) {
    try {
      xmlHttp = new XMLHttpRequest();
    } catch (e) {
      xmlHttp = false;
    }
  }
  return xmlHttp;
}

同源策略

同源策略（Same origin policy）是浏览器提供的一个安全功能

MDN官方给定的概念:同源策略限制了从同一个原加载的文档或脚本如何与来自另一个元的资源进行交互。这是一个用于隔离潜在而已文件的重要安全机制。

通俗的理解:浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如:无法读取非同源王爷的Cookie、LocalStorage和IndexedDB

无法接触非同源网页的DOM

无法向非同源地址发送Ajax请求

实现跨域请求的两种方式JSONP和CORS

JSONP实现跨域请求的原理：由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受同源策略的影响，可以通过src属性，请求非同源的js脚本。因此，JSONP的实现原理，就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

<script>
    function success(data) {
        console.log("获取到了数据");
        console.log(data);
    }
</script>
<script src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=success"></script>