原生Ajax
注:使用不了yapi的,可以使用foxapi参考下文
概念:Asynchronous JavaScript and XML(异步的JavaScript和XML)
作用:
1.数据交换:可以通过Ajax与服务器交换数据,实现动态内容更新,并获取服务器的响应
2.异步交互:可以在不重新加载整个页面的情况下,与服务器进行异步通信,实现页面的局部更新
<script> //1.创建Ajax对象 var xhr = new XMLHttpRequest(); //2.发送异步请求 XMLHttpRequest.open('GET','http://yapi.smart-xwork,cn/mock/169327/emp/list'); XMLHttpRequest.send(); //3.接收服务器响应 XMLHttpRequest.onreadystatechange = function(){ if(XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200){ document.getElemById('div1').innerHTML = XMLHttpRequest.responseText; } } </script>
Axios
介绍: Axios对原生Ajax进行了封装,简化书写,快速开发。
Axios入门
1.引入Axios的js文件
<script src = "js/axios-0.18.0.js"></script>
2.使用Axios发送请求,并获取响应结果
通过axious发送异步请求-get / -post 并且获取响应结果 (获取/发送)
请求方式别名
Apifox
也是由于yapi网站的后续只对内部开放,yapi-pro也是不再维护,听劝自己捣鼓apifox对api接口进行管理和创建。
打开后对api接口进行创建
然后对接口进行管理 设置接口属性功能
{petId}是接口的Path参数设置,可以使一个接口创建多个Mock地址,使其url参数+1
不同的url地址获取的数据不同 点击Mock地址的名称就可以对其进行内容修改,选择其格式
这里选择JSON格式 然后内容仿照着课程写大概就可以自己完成创建一个api接口啦!但是apifox功能还有很多,非常强大,最重要是free所以自行学习了解吧