AJAX &Axios 学习

ValcanoZz

已于 2023-11-15 15:44:47 修改

阅读量78

点赞数

分类专栏： Java Web 文章标签： ajax 学习笔记

于 2023-11-07 18:42:34 首次发布

本文链接：https://blog.csdn.net/m0_51970364/article/details/134273638

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

AJAX

概念：AJAX（Asynchronous JavaScript And XML）：异步的 javaScript 和 XML

AJAX作用

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

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX 来替换 JSP 页面了。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。

同步：浏览器请求服务器，需要等待服务器处理并响应后，才能继续操作。

异步：浏览器请求服务器，服务器在处理时，浏览器可以做其他操作。

使用步骤

服务端：Servlet程序

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

    //3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

XMLHttpRequest对象

方法：

方法	说明
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	发送请求 —— method：请求类型 GET 或 POST； url：文件位置； async：true（异步）或 false（同步）； user：可选的用户名称； psw：可选的密码
send()	将请求发送到服务器，用于GET请求
send(string)	将请求发送到服务器，用于POST请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest属性：

属性	说明
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存XMLHttpRequest的状态
responseXML	以字符串返回响应数据
status	返回请求的状态号
statusText	返回状态文本（如 “OK” 或 “Not Found”）

readyState中的XMLHttpRequest的状态：

0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪

status中常见的返回请求的状态：

200: “OK”
403: “Forbidden”
404: “Not Found”

示例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

前端完成的逻辑
1. 给用户名输入框绑定光标失去焦点事件 onblur
2. 发送 ajax请求，携带username参数
3. 处理响应：是否显示提示信息
后端完成的逻辑
1. 接收用户名
2. 调用service 查询User。此案例是为了演示前后端异步交互，所以此处我们不做业务逻辑处理
3. 返回标记

后端：

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户名
        String username = request.getParameter("username");
        //2. 调用service查询User对象，此处不进行业务逻辑处理，直接给 flag 赋值为 true，表明用户名占用
        boolean flag = true;
        //3. 响应标记
        response.getWriter().write("" + flag);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

前端：

//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {
    //2. 发送ajax请求
    // 获取用户名的值 
    var username = this.value;

    //2.1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
    xhttp.send();

    //2.3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            //判断
            if(this.responseText == "true"){
                //用户名存在，显示提示信息
                document.getElementById("username_err").style.display = '';
            }else {
                //用户名不存在 ，q提示信息
                document.getElementById("username_err").style.display = 'none';
            }
        }
    };
}

Axios

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

Axios对原生的AJAX进行封装，简化书写。

使用

axios 使用是比较简单的，分为以下两步：

引入 axios 的 js 文件

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

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

发送 get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (a){
    alert(a.data);
})

发送 post 请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (a){
    alert(a.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post。
url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

示例

1.后端实现

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");
        //1. 接收请求参数
        String username = request.getParameter("username");
        System.out.println(username);
        //2. 响应数据
        response.getWriter().write("hello Axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

2.前端实现

引入 js 文件

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

发送 ajax 请求

get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

post 请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    //2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>
</body>
</html>

方法

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

get 请求： axios.get(url[,config])
delete 请求： axios.delete(url[,config])
head 请求： axios.head(url[,config])
options 请求： axios.option(url,config])
post 请求：axios.post(url[,data,config])
put 请求：axios.put(url[,data,config])
patch 请求：axios.patch(url[,data,config])

案例中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

携带JSON数据

var jsObject = {name:"张三"};

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:jsObject  	//这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
    alert(resp.data);
})

注：

发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。
axios将js对象转为json字符串，用了 js提供的 JSON对象，即 JSON.stringify (jsObject)。（了解即可）

Vue中的axios

下载axios：
```
npm i axios
```
引入：
```
import axios from 'axios'
```
使用

跨域问题：

在vue.config.js

方式一：
module.experts={
	devServer:{
		proxy: 'http://localhost:80' //获取数据的地址
	}
}
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

前端请求的地址端口要改成 8080 （与自己页面的端口一致）

方式二：
module.experts={
	proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
          target: 'http://localhost:80',// 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
          target: 'http://localhost:5001',// 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api2': ''}
      }
    }
}
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

ValcanoZz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX &Axios 学习

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。//2. post 在js中{} 表示一个js对象，而这个js对象中有三个属性。为了方便起见， Axios 已经为所有支持的请求方法提供了别名。Axios对原生的AJAX进行封装，简化书写。参数是对响应的数据进行封装的对象，通过。中传递的匿名函数称为。
复制链接

扫一扫

专栏目录