Ajax数据请求——（异步请求、同步请求，完整详解，附有代码）

蔚一

已于 2024-10-01 23:09:17 修改

阅读量407

点赞数 14

分类专栏： Java知识文章标签： ajax 前端 javascript html html5 js

于 2024-10-01 23:08:35 首次发布

本文链接：https://blog.csdn.net/weixin_54555405/article/details/142675938

版权

Java知识专栏收录该内容

80 篇文章 0 订阅

订阅专栏

Ajax

1.1 概述

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。

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

前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

同步请求发送:

在这里插入图片描述

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步请求发送

在这里插入图片描述

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

1.2原生Ajax

<body>

    <input type="button" onclick="getData()">
    <div id="div01"></div>
</body>
<script>
    function getData() {

        //1. 创建XMLHttpRequest 
        var xmlHttpRequest = new XMLHttpRequest();

        //2. 发送异步请求
        xmlHttpRequest.open('get', 'http://bit.ly/2mTM3nY');
        xmlHttpRequest.send();

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


    }
</script>

1.3 Axios

引入Axios的js文件

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>
    <input type="button" value="获取数据GET" onclick="get()">
  <input type="button" value="删除数据POST" onclick="post()"> 
</body>
<script>
    function get() {
        // 通过axios发送异步请求-get
        /* 
        axios({
            method: "get",
url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
        }).then(result => {
            console.log(result.data);
        })
        */

        axios.get("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.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById", "id=1")
            .then(result => {
                console.log(result.data);
            })
    }
</script>

</html>