AJAX 与 Axios 快速入门教程

不想写代码的Rayoung

已于 2022-12-30 22:55:17 修改

阅读量201

点赞数 1

文章标签： ajax javascript servlet

于 2022-12-30 22:54:34 首次发布

本文链接：https://blog.csdn.net/qq_60467212/article/details/128494691

版权

AJAX 与 Axios

文章目录

AJAX 与 Axios

1. AJAX

1.1 AJAX概念

AJAX(Asynchronous JavaScript And XML)：异步的JavaScript 和 XML
AJAX作用：
- 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
  - 使用了AJAX和服务器通信，就可以使用HTML+AJAX来替换JSP页面了
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名密码校验……

1.2 AJAX 快速入门

编写AjaxServlet，并使用response输出字符串
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

@WebServlet("/ajaxDemoServlet")
public class AjaxDemoServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        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>ajax</title>
</head>
<body>
<div id="demo">
    <h2 id = "change">让 AJAX 更改这段文本</h2>
    <button type="button" onclick="loadDoc()">更改文本</button>
</div>
<script>
    function loadDoc() {
        //1. 获取XMLHttpRequest对象
        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//ajaxDemoServlet");
        xhttp.send();

        //3. 获取服务器响应数据
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("change").innerHTML =
                    this.responseText;
            }
        };

    }
</script>
</body>
</html>

2. Axios

2.1 Axios 概念

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

2.2 Axios 快速入门

引入 axios 的 js 文件
<script src="js/axios-0.18.0.js"></script>
使用axios发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
<!--引入 axios 的 js 文件-->
<script src="js/axios-0.18.0.js"></script>

<div id="demo">
    <h2 id = "change">让 Axios 更改这段文本</h2>
    <button type="button" onclick="loadDoc()">更改文本</button>
</div>
<script>
    function loadDoc() {
        //使用 axios 发送请求，并获取响应结果
        //get方式
        axios({
            method:"get",
            url:"http://localhost:8080/ajax_demo/ajaxDemoServlet？"
        }).then(function (resp) {
            document.getElementById("change").innerHTML = resp.data;
        })

        //post方式
        /*axios({
            method:"post",
            url:"http://localhost:8080/ajax_demo/ajaxDemoServlet",
            data:""
        }).then(function (resp) {
            document.getElementById("change").innerHTML = resp.data;
        })*/
    }


</script>
</body>
</html>

2.3 Axios 请求方式起别名

为了方便起见，Axios 已经为所有的请求方式提供了别名

axios.get("url")
	.then(function(resp){
	alter(resp.data);
});

axios.post("url","参数")
	.then(function(resp){
	alter(resp.data);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
<!--引入 axios 的 js 文件-->
<script src="js/axios-0.18.0.js"></script>

<div id="demo">
    <h2 id = "change">让 Axios 更改这段文本</h2>
    <button type="button" onclick="loadDoc()">更改文本</button>
</div>
<script>
    function loadDoc() {
        //Axios 请求方式起别名
        //get方式
        axios.get("http://localhost:8080/ajax_demo/ajaxDemoServlet?parameter=参数1").then(function (resp) {
            document.getElementById("change").innerHTML = resp.data;
        })

        //post方式
       /* axios.post("http://localhost:8080/ajax_demo/ajaxDemoServlet","parameter = 参数1").then(function (resp) {
            document.getElementById("change").innerHTML = resp.data;
        })*/


    }
</script>
</body>
</html>

3. JSON

3.1 概念

JavaScript Object Notation：JavaScript 对象表示法
由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

3.2 基础语法

定义：

var 变量名 = {
 	"key1":value1,
 	"key2":value2,
	...        
}

vaule 的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
获取数据
变量名.key
示例

<script>
    var json = {
        "name": "rayoung",
        "age": 20,
        "ismarried": false,
        "courses": ["computer", "software", "math"]
    }
    alert(json.courses)
</script>

3.3 JSON 数据和Java对象转换

3.3.1 JSON数据

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

3.3.2Java对象转换

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换
使用：
1. 导入坐标
```
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>
```
1. Java对象转JSON字符串
  String jsonStr = JSON.toJSONString(user);
2. JSON字符串转Java对象
  User user = JSON.parseObject(jsonStr, User.class);

public class JsonDemo {
    public static void main(String[] args) {
        User user = new User();
        user.setId(1);
        user.setUsernmae("rayoung");
        user.setPassword("rayoung");

        String jsonStr = JSON.toJSONString(user);
        System.out.println(jsonStr);

        User userTemp = JSON.parseObject(jsonStr, User.class);
        System.out.println(userTemp);
    }
}

声明：本文内容整理自：黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版

不想写代码的Rayoung

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX 与 Axios 快速入门教程

* axios.post("http://localhost:8080/ajax_demo/ajaxDemoServlet","parameter = 参数1").then(function (resp) {"http://localhost:8080/ajax_demo/ajaxDemoServlet?//1. 获取XMLHttpRequest对象。//使用 axios 发送请求，并获取响应结果。//Axios 请求方式起别名。//3. 获取服务器响应数据。//2. 向服务器发送请求。
复制链接

扫一扫