Ajax异步请求

最新推荐文章于 2024-05-16 10:09:16 发布

MyikJ

最新推荐文章于 2024-05-16 10:09:16 发布

阅读量452

点赞数

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

本文链接：https://blog.csdn.net/weixin_48893653/article/details/120405195

版权

JavaWeb 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、什么是Ajax？

Ajax是指一种创建交互式网页应用的开发技术。Ajax=异步JS和XML。

二、Ajax的作用

Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更行（局部更新）。传统的网页如果需要更新内容，必须重新加载整个网页页面。
简单记： Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新。

三、异步与同步

1.浏览器访问服务器的方式

同步访问：客户端必须等待服务器端的响应，在等待过程中不能进行其他操作。
异步访问：客户端在等待浏览器响应的这段时间内，客户端浏览器可以进行其他的操作。

2.代码演示

（1）ajax.jsp

改变async:true体会同步和异步的区别

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>演示异步和同步的区别</title>
    <%-- 导入jQuery包 --%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.min.js"></script>
    <script>
            // 点击事件触发的方法
            function send() {
                // 发送ajax请求
                $.ajax({
                    url: "${pageContext.request.contextPath}/ajax",   // 请求的servlet路径
                    async:true, // 是否为异步请求
                    data: { name: "天青" },   // 传递的参数
                    type: "post",   // 请求方式
                    dataType:"text",    // 服务器响应的数据格式 text普通文本
                    success: function (res) {   // 回调函数：服务器响应成功后触发的方法
                        console.log(res)        // res是服务器返回的数据
                        alert("响应成功" + res);
                    },
                    error: function () {
                        alert("响应失败!");
                    }
                });
            }
    </script>
</head>
<body>
<input type="text">
<%-- 给这个按钮绑定单击事件，会触发send()方法 --%>
<input type="button" value="Jquery发送Ajax异步请求" onclick="send()">
</body>
</html>

package cn.xuguowen.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author 徐国文
 * @create 2021-09-21 21:11
 */
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        System.out.println("ajax.jsp页面传递的参数" + name);

        // 1.模拟业务操作，造成延时效果：体会同步请求下，客户端浏览器在这5秒内不可以做任何操作
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        resp.setContentType("text/html;charset=utf-8");

        resp.getWriter().write("hello 体会同步和异步的请求！");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

四、axios介绍

1.VUE中结合网络数据进行应用的开发

目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便。
axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送。

2.axiox入门使用步骤

（1）导包

<!-- 官网提供的 axios 在线地址 -->
<script>https://unpkg.com/axios/dist/axios.min.js</script>

（2）请求方式以get和post举例

axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

axiosget请求的语法

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

（3）随机笑话案例（get请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios实现get方式的异步请求</title>
    <!-- 1.导包 -->
    <script src="js/axios.min.js"></script>
</head>
<body>
     <!-- 点击按钮，获取一个随机的笑话 -->
     <input type="button" value="get请求" id="get">

     <script>
        /*
            随机笑话的案例：
                请求地址:https://autumnfish.cn/api/joke/list
                请求方法:get
                请求参数:num(笑话条数,数字)
                响应内容:随机笑话
        */
        // 1.获取按钮对象
        var get = document.querySelector('#get');
        // 2.给按钮绑定单击事件
        get.onclick = function() {
            // 3.使用axios发送get请求
            axios.get("https://autumnfish.cn/api/joke/list?num=2").then(
                // 服务器响应成功调用的回调函数
                function(result) {
                    console.log(result);
                },
                // 响应失败调用的回调函数
                function(error) {
                    console.log(error);
                }
            );
        }
     </script>
</body>
</html>

（4）用户注册案例（post请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios实现异步post请求</title>
    <!-- 1.导包 -->
    <script src="js/axios.min.js"></script>
</head>
<body>
    <!-- 点击按钮，获取一个随机的笑话 -->
    <input type="button" value="post请求" id="post">

    <script>
       /*
            用户注册
                请求地址:https://autumnfish.cn/api/user/reg
                请求方法:post
                请求参数:username(用户名,字符串)
                响应内容:注册成功或失败
       */
       // 1.获取按钮对象
       var post = document.querySelector('#post');
       // 2.给按钮绑定单击事件
       post.onclick = function() {
           // 3.使用axios发送get请求
           axios.post("https://autumnfish.cn/api/user/reg",{username:"徐国文"}).then(
               // 服务器响应成功调用的回调函数
               function(result) {
                   console.log(result);
               },
               // 响应失败调用的回调函数
               function(error) {
                   console.log(error);
               }
           );
       }
    </script>
</body>
</html>

（5）axios使用总结

1.必须导入axios包，可以远程导入，也可以导入本地的。
2.使用get/post方法，就可以发送异步请求
3.then方法中的回调函数，会在请求成功后触发或者请求失败后触发
通过回调函数的形参可以获取响应的内容或者错误信息

五、axios实战案例

1.随机获取一条笑话（通过vue+axios完成）

接口：随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取随机笑话</title>
    <!-- 1.先导包 -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <input type="button" value="获取一个笑话" @click="get">
        <p>{{joke}}</p>
    </div>

    <script>
        /*
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */

        // 2.创建vue实例
        var vm = new Vue({
            el:"#app",
            data : {
                joke: "笑口常开"
            },
            methods:{
                get:function() {
                    console.log(this.joke);
                    var _this = this;
                    // 3.发送get异步请求
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function(result) {
                            console.log(result);
                            // 4.我现在有个需求：将获取到的笑话内容赋值给joke，并在页面上展示
                            console.log(result.data);
                            // 发现：在回调函数内部，this的指向已经发生改变
                            console.log(_this.joke); // undefined
                            _this.joke = result.data;
                        },
                        function(error) {
                            console.log(error);
                        }
                    );
                },
            },
        });
    </script>
</body>
</html>

3.案例细节：

在异步请求得回调函数中，this的指向发生改变
想要获取this，就得先将this保存起来

MyikJ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax异步请求

一、什么是Ajax？Ajax是指一种创建交互式网页应用的开发技术。Ajax=异步JS和XML。二、Ajax的作用Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更行（局部更新）。传统的网页如果需要更新内容，必须重新加载整个网页页面。简单记： Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新。三、异步与同步1.浏览器访问服务器的方式同步访问：客户端必须等待服务器端的响应，在等待过程中不
复制链接

扫一扫