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/postif (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>
