黑马程序：13、Ajax、axios、JSON

发布时间：2023-06-16 16:30

文章目录

  • 1.Ajax
    • 1.2 案例
        • 3.3.2 后端实现
        • 3.3.3 前端实现
  • 2、axios
    • 2.1 基本使用
    • 2.2 快速入门
    • 2.3 请求方法别名
  • 3.JSON
    • 3.1 JSON 基础语法
      • 3.2.2 发送异步请求携带参数
    • 3.3 JSON串和Java对象的相互转换
      • 3.3.1 Fastjson 概述和使用
      • 3.3.2 代码演示
  • 4.案例(使用Axios + JSON)

Axios 对原生的AJAX进行封装，简化书写。
Axios官网是：https://www.axios-http.cn

1.Ajax

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个我们之前都学习过。

AJAX 作用有以下两方面：

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

在项目的创建 com.itheima.web.servlet ，并在该包下创建名为 AjaxServlet 的servlet

@WebServlet(\"/ajaxServlet\")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 响应数据
        response.getWriter().write(\"hello ajax~\");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
  • 客户端实现
    完整代码如下：
DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Titletitle>
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) {
            // 通过 this.responseText 可以获取到服务端响应的数据
            alert(this.responseText);
        }
    };
script>
body>
html>

1.2 案例

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

\"黑马程序：13、Ajax、axios、JSON_第1张图片\"

分析

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

整体流程如下：

\"黑马程序：13、Ajax、axios、JSON_第2张图片\"

3.3.2 后端实现

在 com.ithiema.web.servlet 包中定义名为 SelectUserServlet 的servlet。代码如下：

@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);
    }
}

3.3.3 前端实现

综上所述，前端完成代码如下：

//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) {
            //alert(this.responseText);
            //判断
            if(this.responseText == \"true\"){
                //用户名存在，显示提示信息
                document.getElementById(\"username_err\").style.display = \'\';
            }else {
                //用户名不存在 ，清楚提示信息
                document.getElementById(\"username_err\").style.display = \'none\';
            }
        }
    };
}

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>欢迎注册title>
    <link href=\"css/register.css\" rel=\"stylesheet\">
head>
<body>

<div class=\"form-div\">
    <div class=\"reg-content\">
        <h1>欢迎注册h1>
        <span>已有帐号？span> <a href=\"login.html\">登录a>
    div>
    <form id=\"reg-form\" action=\"#\" method=\"get\">

        <table>

            <tr>
                <td>用户名td>
                <td class=\"inputs\">
                    <input name=\"username\" type=\"text\" id=\"username\">
                    <br>
                    <span id=\"username_err\" class=\"err_msg\" style=\"display: none\">用户名已存在span>
                td>

            tr>

            <tr>
                <td>密码td>
                <td class=\"inputs\">
                    <input name=\"password\" type=\"password\" id=\"password\">
                    <br>
                    <span id=\"password_err\" class=\"err_msg\" style=\"display: none\">密码格式有误span>
                td>
            tr>


            <tr>
                <td>验证码td>
                <td class=\"inputs\">
                    <input name=\"checkCode\" type=\"text\" id=\"checkCode\">
                    <img src=\"imgs/a.jpg\">
                    <a href=\"#\" id=\"changeImg\">看不清？a>
                td>
            tr>

        table>

        <div class=\"buttons\">
            <input value=\"注 册\" type=\"submit\" id=\"reg_btn\">
        div>
        <br class=\"clear\">
    form>

div>

<script>

    //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) {
                //alert(this.responseText);
                //判断
                if(this.responseText == \"true\"){
                    //用户名存在，显示提示信息
                    document.getElementById(\"username_err\").style.display = \'\';
                }else {
                    //用户名不存在 ，清楚提示信息
                    document.getElementById(\"username_err\").style.display = \'none\';
                }
            }
        };

    }




script>
body>
html>

2、axios

2.1 基本使用

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 (resp){
    alert(resp.data);
})

    • 发送 post 请求

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

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

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

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

2.2 快速入门

  • 2.2.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);
    }
}
  • 前端实现
    \"黑马程序：13、Ajax、axios、JSON_第3张图片\"

  • 引入 js 文件

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

整体页面代码如下：

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Titletitle>
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);
    })*/

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



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

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


    var jsObject = {name:\"zhangsan\"};

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

script>

body>
html>

2.3 请求方法别名

为了方便起见， 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 请求和 post 请求。

入门案例中的 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);
})

3.JSON

概念：JavaScript Object Notation。JavaScript 对象表示法.

如下是 JavaScript 对象的定义格式：

{
	name:\"zhangsan\",
	age:23,
	city:\"北京\"
}

接下来我们再看看 JSON 的格式：

{
	\"name\":\"zhangsan\",
	\"age\":23,
	\"city\":\"北京\"
}

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。json 格式的数据有什么作用呢？

作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

3.1 JSON 基础语法

\"黑马程序：13、Ajax、axios、JSON_第4张图片\"

如果它是一个 js 对象，我们就可以通过 js对象.属性名 的方式来获取数据。JS 提供了一个对象 JSON ，该对象有如下两个方法：

  • parse(str) ：将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);
  • stringify(obj) ：将 js 对象转换为 JSON 串。使用方式是：var jsonStr = JSON.stringify(jsObject)

代码演示：

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Titletitle>
head>
<body>
<script>
    //1. 定义JSON字符串
    var jsonStr = \'{\"name\":\"zhangsan\",\"age\":23,\"addr\":[\"北京\",\"上海\",\"西安\"]}\'
    alert(jsonStr);

    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)
script>
body>
html>

3.2.2 发送异步请求携带参数

后面我们使用 axios 发送请求时，如果要携带复杂的数据时都会以 JSON 格式进行传递，如下

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

请求参数不可能由我们自己拼接字符串吧？肯定不用，可以提前定义一个 js 对象，用来封装需要提交的参数，然后使用 JSON.stringify(js对象) 转换为 JSON 串，再将该 JSON 串作为 axios 的 data 属性值进行请求参数的提交。如下：

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

axios({
    method:\"post\",
    url:\"http://localhost:8080/ajax-demo/axiosServlet\",
    data: JSON.stringify(jsObject)
}).then(function (resp) {
    alert(resp.data);
})

而 axios 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 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);
})

注意：

  • js 提供的 JSON 对象我们只需要了解一下即可。因为 axios 会自动对 js 对象和 JSON 串进行想换转换。
  • 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。

3.3 JSON串和Java对象的相互转换

学习完 json 后，接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

在后端我们就需要重点学习以下两部分操作：

  • 请求数据：JSON字符串转为Java对象
  • 响应数据：Java对象转为JSON字符串

接下来给大家介绍一套 API，可以实现上面两部分操作。这套 API 就是 Fastjson

3.3.1 Fastjson 概述和使用

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

Fastjson 使用也是比较简单的，分为以下三步完成

  1. 导入坐标

    <dependency>
    <groupId>com.alibabagroupId>
    <artifactId>fastjsonartifactId>
    <version>1.2.62version>
dependency>

  2. Java对象转JSON

    String jsonStr = JSON.toJSONString(obj);

    将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。

  3. JSON字符串转Java对象

    User user = JSON.parseObject(jsonStr, User.class);

    将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

3.3.2 代码演示

  • 引入坐标

  • 创建一个类，专门用来测试 Java 对象和 JSON 串的相互转换，代码如下：

    public class FastJsonDemo {

    public static void main(String[] args) {
        //1. 将Java对象转为JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername(\"zhangsan\");
        user.setPassword(\"123\");

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);//{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}


        //2. 将JSON字符串转为Java对象
        User u = JSON.parseObject(\"{\\\"id\\\":1,\\\"password\\\":\\\"123\\\",\\\"username\\\":\\\"zhangsan\\\"}\", User.class);
        System.out.println(u);
    }
}

    4.案例(使用Axios + JSON)

相关推荐

关于Charles手机设置好代理后，无法上网的问题

20行Python代码实现一款永久免费PDF编辑工具

spring注解 @Valid 的作用说明

如何使用Redis？

清风数学建模学习笔记（一）——层次分析法

Hadoop生态系统之Hive和HBase and Zookeeper

上手就能用的Python爬虫，不香吗？

SVM理解与核函数

Vue 学习笔记 -- 3.Vue 中的 AJAX

Java 基础面试题 II

居然用 Numpy 实现了一个深度学习框架

仿牛客网讨论社区项目—项目总结及项目常见面试题

记一次Elasticsearch问题排查

手把手搭建经典神经网络系列（2）——VggNet

（八）Python总结笔记：Numpy

上位机开发——Modbus联合运动控制卡实时通信

加班熬夜一个月，终于把所有Python库整理齐了，祝你早日学成

Pandas向本地Excel已存在的工作表追加写入DataFrame

网页制作 网页下拉菜单HTML＋CSS制作

车牌识别综述

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号