本文介绍: 概念ajax(AJavascriptAndXML):异步的JavaScript和Xml。

CSDN话题挑战赛第2期
参赛话题:学习笔记

1 Ajax

1.1Ajax概述

概念ajaxAsynchronous Javascript And XML):异步的JavaScript和Xml

1.2 Ajax的作用

使用Html+Ajax替换Jsp页面,并可以实现 前后端分离

image-20220917211524959

本来是通过Servlet和Jsp实现的,下图是Jsp实现原理。上篇文章提到Jsp逐步被淘汰了。

image-20220917211639847

如下就是一个异步请求例子

image-20220917212032456

1.2.1 同步异步

image-20220917213033536

image-20220917213048912

个人感觉还是比较容易理解的:

1.3 Ajax的快速入门

1.3.1 编写AjaxServlet(后端)

并用Response输出字符串。继承HttpServlet

@WebServlet("/ajaxServlet01")
public class AjaxDemo01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("hello,ajax~~");
    }

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

1.3.2 编写Ajax(前端

放在Html文件

需要记,用到的时候查询网站即可 Ajax官方网站

image-20220917205859968

点下一节,就可以看到每一步的代码copy过来为我所用就ok

image-20220917210217317

需要注意的是:Ajax的代码需要放在script

下面的全路径指的是在浏览器访问这个Servlet的全路径,如下

image-20220917214020771

为什么要用全路径

这是因为前端后端的代码并不是放在一个服务器之中的,所以也需要输入地址端口号,这也就说明了为什么可以实现项目的前后端分离。

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

</body&gt;
<script&gt;
    /*1、创建xhttp对象*/
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    /*2、向服务器发送请求 */
    /* 此处应该写全路径 */
    xhttp.open("Get","http://localhost:8081/JavaWeb_Demo_06_war/ajaxServlet01");
    xhttp.send();
    /*3、获得请求对象*/
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 &amp;&amp; this.status == 200) {
            /*用this.responseText获取数据*/
                alert(this.responseText);
        }
    };
</script>
</html>

访问hello.html,成功看到了如下的效果,代表异步请求设置成功

image-20220917211156197

2 Axios

2.1 概念

Axios原生的Ajax进行封装,简化书写官网 传送门

官网定义

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

2.2 Axios快速入门

Axios只是对Ajax的一种封装,除了一些方法不同外,他们的语法是一样的

2.2.1 编写AxiosServlet

@WebServlet("/axiosServlet01")
public class AxiosDemo01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get.....");

        /*获取参数*/

        String username = req.getParameter("username");
        System.out.println("获取参数为:"+username);
        resp.getWriter().write("hello,axios~~");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post.....");
        req.setCharacterEncoding("UTF-8");
        /*获取参数*/
        String username = req.getParameter("username");
        System.out.println("获取参数为:"+username);
        resp.getWriter().write("hello,axios~~");
    }
}

2.2.2 编写Axios+Html

get

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

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /* 1、get请求 */
    axios({
        url:"http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01?username=zhangsan",
        method:"get"
    }).then(function (response) {
        // 处理成功情况
        alert(response.data)
    })
   
</script>
</html>

image-20220918103901041

image-20220918103744714

post

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

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
 
    /* 2、post请求 */
    axios({
        url:"http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01",
        method:"post",
        data:"username=张三"
    }).then(function (response) {
        // 处理成功情况
        alert(response.data)
    })
</script>
</html>

image-20220918103938572

image-20220918104544379

2.3 Axios请求方式别名(★)

感觉这个才是常用的,官网上也是用的这种方式。

但是这种请求方式阅读性稍微差一点,不过用多了就没什么了。

方便和可阅读性二者不可兼得嘛

get

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

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /* 1、get请求 */
    axios.get("http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01?username=zhangsan")
        .then(function (response) {
        // 处理成功情况
        alert(response.data)
    })

</script>
</html>

post

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

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /* post请求 */
    axios.post("http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01","username=zhangsan")
        .then(function (response) {
        // 处理成功情况
        alert(response.data)
    })

</script>
</html>

3 Json

3.1 Json的简介

3.1.1 Json和JavaScript的对比

非常的类似,JavaScript对象的键,是可以加引号也可以不加引号的。但是JSON对象的键是必须要加引号的。

image-20220918111659747

3.2 JSON的基础语法

image-20220918111919075

value数据类型

3.3 JSON数据和Java对象的转换

请求数据:JSON字符串转为Java对象

获取数据:Java对象转为JSON字符串

3.3.1 引入Fastjson依赖

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

<!--引入FastJson-->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.75</version>
</dependency>

3.3.2 Java对象转Json

String jsonStr = JSON.toJSONString(obj);

3.3.3 JSON转Java对象

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

通过一个整体例子实战一下

3.4 Json实战

用户类

package com.you.Ajax;


public class User {
    private String username;
    private String password;
    private String email;

    public User() {
    }

    public User(String username, String password, String email) {
        this.username = username;
        this.password = password;
        this.email = email;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + ''' +
                ",   password + ''' +
                ", email='" + email + ''' +
                '}';
    }
}

JsonServlet

@WebServlet("/JsonDemo01")
public class JsonDemo01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get.....");
        User user = new User();
        user.setEmail("1111@qq.com");
        user.setUsername("zhangsan");
        user.setPassword("2000000");
        /* Java对象转Json */
        String jsonString = JSON.toJSONString(user);
        /* 响应请求 */
        resp.getWriter().write(jsonString);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post.....");
        User user = new User();
        user.setEmail("1111@qq.com");
        user.setUsername("zhangsan");
        user.setPassword("2000000");
        /* Java对象转Json */
        String jsonString = JSON.toJSONString(user);
       
        /* 响应请求 */
        resp.getWriter().write(jsonString);
    }
}

访问这个Servlet是可以拿到JSon数据

image-20220918114048472

前端

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

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    var json = {
        "username":"zhangsan",
        "passworD":"1",
        "email":"qq.com"
    }
    axios.post("http://localhost:8081/JavaWeb_Demo_06_war/JsonDemo01",json).then(function (response) {
        let resultData = response.data;
        alert("username:"+resultData.username+",password:"+resultData.password+",email:"+resultData.email);


    })
</script>
</html>

在这里插入图片描述

原文地址:https://blog.csdn.net/m0_59792745/article/details/126911527

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8289.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注