认识Ajax、JSON、axios

原创已于 2022-11-07 21:49:42 修改 · 841 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json #javascript

于 2022-11-07 21:48:07 首次发布

本文介绍了Ajax技术，包括其异步特性和如何实现，强调了它在用户体验和前后端数据交互上的优势。接着，文章讲解了axios，一个基于Promise的HTTP库，用于发送HTTP请求。同时，详细阐述了JSON数据格式，包括其与JavaScript对象的区别，以及在数据转换和存储中的应用。总结中指出JSON在前后端交互中的关键作用。

JavaScript 对象的定义格式与JSON 的格式区别

JSON 基础语法

JSON可以存储非常复杂的数据格式（多种编译方式）

JSON串和Java对象的相互转换

总结：

Ajax

什么是Ajax？

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

同步与异步的区别

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

<form action="..."method="get/post" > 同步
先请求，再响应，再转发，，在请求，在...

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

实现一下

客户端html代码

//1.创建核心对象
    var xhttp;
    if(window.XMLHttpRequest){
        //浏览器 -> IE  7.0...的版本才能创建对象ajax的核心对象
        xhttp=new XMLHttpRequest();
    }else{
        //浏览器 -> IE 5,6... 这么创建,是一个固定写法
        xhttp=new ActiveXObject("Micrsoft.XMLHTTP")
    }
    //2.发送异步请求
xhttp.open("GET","hello-servlet",true);
    xhttp.send();
    //3.获取响应
    xhttp.onreadystatechange=function (){//回调函数
        if(this.status==200&&this.readyState==4){//固定写法，代表接收到了servlet的结果
            alert(this.responseText);
        }
    }

服务器Servlet代码

@WebServlet("/hello-servlet")
public class HelloServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
      response.getWriter().write("hello ajax...");
    }

Ajax是一种无需重新加载网页，就能更新部分网页脚本技术。特点：异步交互，局部刷新。传统网页和服务器交互方式：同步交互，全部刷新

Ajax好处：

1.提高用户的体验

2.节省带宽

3.前后端分离（ajax+JSON）

axios

axios是什么？

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

Axios 对原生的AJAX进行封装，简化书写。功能强大的Ajax

Axios官网是： https://www.axios-http.cn

基本使用

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

引入 axios 的 js 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/axios-0.18.0.js"></script>

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

//1.发送get请求
   /* axios({
       method:"get",//请求方法
       url:"axiosServlet?username=zhangsan"//get通过地址栏进行传参
    }).then(function(resp){//方式返回结果，应答
        alert(resp.data)
    })*/

//2.post
    axios({
        method:"post",
        url:"axiosServlet",
        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 可以

获取到响应的数据。

实现一下

前端实现发送 ajax 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<script>
    //1.发送get请求
   /* axios({
       method:"get",//请求方法
       url:"axiosServlet?username=zhangsan"//get通过地址栏进行传参
    }).then(function(resp){//方式返回结果，应答
        alert(resp.data)
    })*/

服务器Servlet代码

@WebServlet("/axiosServlet")
public class axiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //就收请求参数
        String username=request.getParameter("username");
        //响应数据
        response.getWriter().write("hello"+username);
    }

请求方法别名

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

1 .get 请求： axios.get(url[,config])

2. delete 请求： axios.delete(url[,config])  head 请求： axios.head(url[,config])

3. options 请求： axios.option(url[,config])

4 .post 请求： axios.post(url[,data[,config])

5. put 请求： axios.put(url[,data[,config])

6. patch 请求： axios.patch(url[,data[,config])

JSON

什么是json?

JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别。并且可以转换为任意语言中的对象。概念： JavaScript Object Notation 。JavaScript 对象表示法.

JavaScript 对象的定义格式与JSON 的格式区别

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

{//json
"name":"zhangsan",
"age":23,
"city":"北京"
}
// json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的

属性名可以使用引号（可以是单引号，也可以是双引号）；

JSON 基础语法

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。定义格式如

下 ：重点

//字符串JSON
    var jsonStr='{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

 //2.将JSON字符串转成JS对象
    var jsObject=JSON.parse(jsonStr);

//3.JS对象转换成JSON字符串
    var jsString=JSON.stringify(jsObject);
    alert(jsString);

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据

类型分为如下：

1.数字（整数或浮点数）

2. 字符串（使用双引号括起来）

3. 逻辑值（true或者false）

4. 数组（在方括号中）

5. 对象（在花括号中）

6. null

JSON可以存储非常复杂的数据格式（多种编译方式）

//编辑方式一
    var person={//存储的json的对象
        "name":"张三",
        "age":23,
        "gender":"男"
    }

//再json中定义好脚本的格式，就可以循环输出
    for(var key in person){
        //alert(key+":"+person[key])
    }

//2.嵌套格式存储更加复杂的格式{}
    var persons={
        "persons":[
            {"name":"张三","age":23,"gender":true},
            {"name":"李四","age":14,"gender":false},
            {"name":"王五","age":24,"gender":true},
            {"name":"马六","age":25,"gender":false}
        ]
    }

获取值

//获取 ps中的值
36 for(var i=0;i<ps.length;i++){
37 var p=ps[i];
38 for(var key in p){
39 alert(key+":"+p[key]);
40 }
41 }

axios 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 JSON 串进行提交。如下：

public static void main(String[] args) {
        //1.向User中存储数据
        User user=new User();
        user.setId(1);
        user.setUsername("张三");
        user.setPassword("admin123");

        //2.Java对象数据转换从JSON字符串
        String jsonString= JSON.toJSONString(user);
        //System.out.println(jsonString);

        //3.JSON字符串转换成java对像
        String jsonStr="{\"id\":2,\"password\":\"admin456\",\"username\":\"张四\"}";//转义字符   \
        User us=JSON.parseObject(jsonStr,User.class);
        System.out.println(us.getId()+"/"+us.getUsername()+"/"+us.getPassword());
    }

发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST 。因为 JSON 串需要放在请求体中。