JavaWeb-Ajax

原生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进行了封装,简化书写,快速开发。

官网:https://www.axios-http.cn/

Axios入门

1.引入Axios的js文件

<script src = "js/axios-0.18.0.js"></script>

2.使用Axios发送请求,并获取响应结果

通过axious发送异步请求-get / -post 并且获取响应结果 (获取/发送)

请求方式别名


Apifox 

也是由于yapi网站的后续只对内部开放,yapi-pro也是不再维护,听劝自己捣鼓apifox对api接口进行管理和创建。

官网:https://apifox.com

打开后对api接口进行创建

然后对接口进行管理 设置接口属性功能

{petId}是接口的Path参数设置,可以使一个接口创建多个Mock地址,使其url参数+1

不同的url地址获取的数据不同 点击Mock地址的名称就可以对其进行内容修改,选择其格式

这里选择JSON格式 然后内容仿照着课程写大概就可以自己完成创建一个api接口啦!但是apifox功能还有很多,非常强大,最重要是free所以自行学习了解吧 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值