初探Ajax

最新推荐文章于 2024-05-31 12:14:17 发布

似吻火

最新推荐文章于 2024-05-31 12:14:17 发布

阅读量259

点赞数 3

分类专栏： JavaWeb 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_63780361/article/details/138483011

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初探Ajax

Ajax

概念：AsynchronousJavaScriptAndXml,异步的JavaScript和xml

作用：数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想、用户名是否可以用的校验等。

同步与异步

同步的方式：互相等待

异步的方式：无需等待

原生Ajax:

1.准备数据地址

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<body>
  <input type="button" value="获取数据" onclick="getData()">
  <div id="div1"></div>
</body>
<script>
  function getData() {
    //1.创建XMLHttpRequest
    var xmlHttpRequest = new XMLHttpRequest();

    //2.发布异步请求
    xmlHttpRequest.open('GET', '替换->json文件地址')
    xmlHttpRequest.send();//发送请求

    //3.获取服务响应数据
    xmlHttpRequest.onreadystatechange = function () {
      if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
      }
    }
  }
</script>

Ajax-Axios

Axios对原生的Ajax进行封装，简化书写，快速开发

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

有多种渠道可以下载Axios

Axios入门

1.引入Axios的js文件

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

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

 function get() {
    //通过axios发送异步请求-get
    axios({
      method: 'get',
      url: 'https://mock.apifox.cn/m1/3128855-0-default/emp/list'
    }).then(result => {
      console.log(result.data);
    })
  }
  function post() {
    //通过axios发送异步请求-post
    axios({
      method: 'post',
      url: 'https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById',
      data: "id=1"
    }).then(result => {
      console.log(result.data);
    })
  }

Axios请求方式别名

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])

发送GET请求

axios.get(“https://mock.apifox.cn/m1/3128855-0-default/emp/list”).then(result =>{

console.log(result.data);

});

axios.post(“https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById”,“id=1”).then(result =>{

console.log(result.data);

});

似吻火

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
初探Ajax

的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想、用户名是否可以用的校验等。作用：数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。2.创建XMLHttpRequest对象：用于和服务器交换数据。官网：https://www.axios-http.cn/Axios对原生的Ajax进行封装，简化书写，快速开发。2.使用Axios发送请求，并获取响应结果。//1.创建XMLHttpRequest。1.引入Axios的js文件。//3.获取服务响应数据。//2.发布异步请求。
复制链接

扫一扫