Ajax&Json笔记，axios

zhangsan3333

已于 2023-07-17 09:04:34 修改

阅读量84

点赞数

文章标签： ajax json 笔记

于 2023-07-16 09:34:08 首次发布

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/131747202

版权

wiki上ajax介绍

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出[1]。

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替以进一步减少数据量。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX。

chatgpt问题

java和javascript是2种语言，为什么可以通过ajax进行交互，发请求呢

Java和JavaScript是两种不同的编程语言，它们具有不同的语法和执行环境。Java通常用于后端开发，而JavaScript通常用于前端开发。虽然它们在语法和用途上存在差异，但可以通过一些技术手段进行交互和通信，其中之一就是Ajax。

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交换的技术。它允许JavaScript通过HTTP请求与服务器进行通信，获取数据并更新网页内容，而无需刷新整个页面。

当涉及到Java和JavaScript之间的交互时，通常是通过Ajax技术实现的。具体而言，前端使用JavaScript中的XMLHttpRequest或Fetch API来创建HTTP请求，并将请求发送给后端服务器。后端服务器使用Java编写的代码接收和处理这些请求，然后生成响应数据发送回前端。这种方式使得Java和JavaScript能够在前后端之间进行数据传输和交互。

需要注意的是，Ajax并不是只能与Java后端进行交互，它可以与任何支持HTTP通信的服务器进行交互。Java作为一种流行的后端语言，通常与JavaScript一起使用，因此Java与JavaScript之间的交互通过Ajax变得相对常见。

本质上是http请求实现了java和javascript的交互，对吗

是的，你说得对。本质上，Java和JavaScript之间的交互是通过HTTP请求实现的。
HTTP（Hypertext Transfer Protocol）是一种用于在网络上传输数据的协议。Java和JavaScript都可以使用HTTP协议进行通信。当使用Ajax技术时，JavaScript通过创建HTTP请求（例如GET、POST等）并发送给服务器来向后端发起请求。后端服务器接收到这些请求后，使用Java代码来处理请求并生成相应的数据。最后，服务器将响应数据发送回前端，JavaScript再根据响应数据来更新网页内容。

通过HTTP请求，Java和JavaScript能够实现数据的传输和交互。这种通信方式使得前端和后端能够协同工作，实现动态网页的构建和交互功能的实现。

ajax除了和java，还可以和哪种语言交互

Ajax可以与任何支持HTTP通信的后端语言进行交互，不仅仅局限于Java。以下是一些常见的与Ajax兼容的后端语言：

PHP：PHP是一种广泛用于Web开发的后端脚本语言，与JavaScript的Ajax配合非常常见。

Python：Python是一种通用的高级编程语言，也可以与JavaScript通过Ajax进行交互。常用的Python框架如Django和Flask提供了处理Ajax请求的支持。

Ruby：Ruby是一种简洁而优雅的脚本语言，也可以与JavaScript通过Ajax进行交互。Ruby on Rails是一个流行的Ruby框架，支持处理Ajax请求。

C#：C#是一种由微软开发的面向对象编程语言，可以与JavaScript进行Ajax交互。ASP.NET是一个常用的C#框架，支持处理Ajax请求。

Node.js：Node.js是一个基于JavaScript的后端运行环境，可以直接使用JavaScript处理Ajax请求。Node.js具有高度的可扩展性和事件驱动的特性，适用于构建高性能的Web应用程序。

除了上述语言，还有许多其他后端语言可以与JavaScript的Ajax进行交互，只要它们支持HTTP通信，并能够接收和处理Ajax请求。

AJAX：

概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步：客户端和服务器端相互通信的基础上
  - 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  - 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]
  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
  
  提升用户的体验
实现方式：
1. 原生的JS实现方式（了解）

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

        //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）

             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

            //3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }

    </script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

package com.heima.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String username = request.getParameter("username");

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println("username = " + username);

        response.getWriter().write("hello11 : " + username);

    }

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

2. JQeury实现方式
	1. $.ajax()
		* 语法：$.ajax({键值对});
		 //使用$.ajax()发送异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求

            $.ajax({
                url:"ajaxServlet" , // 请求路径 路径写为ajaxServlet111，则弹出error信息
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数
                data:{"username":"jack","age":23},
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数

                dataType:"text"//设置接受到的响应数据的格式
            });
        }

    </script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

	2. $.get()：发送get请求
		* 语法：$.get(url, [data], [callback], [type])
			* 参数：
				* url：请求路径
				* data：请求参数
				* callback：回调函数
				* type：响应结果的类型

	3. $.post()：发送post请求
		* 语法：$.post(url, [data], [callback], [type])
			* 参数：
				* url：请求路径
				* data：请求参数
				* callback：回调函数
				* type：响应结果的类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        function  fun() {

            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }

    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        function  fun() {

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }

    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

JSON：

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

	Person p = new Person();
	p.setName("张三");
	p.setAge(23);
	p.setGender("男");

	var p = {"name":"张三","age":23,"gender":"男"};

* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。

语法：
1. 基本规则
  - 数据在名称/值对中：json数据是由键值对构成的
    - 键用引号(单双都行)引起来，也可以不使用引号
    - 值得取值类型：
      1. 数字（整数或浮点数）
      2. 字符串（在双引号中）
      3. 逻辑值（true 或 false）
      4. 数组（在方括号中） {“persons”:[{},{}]}
      5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
      6. null
  - 数据由逗号分隔：多个键值对由逗号分隔
  - 花括号保存对象：使用{}定义json 格式
  - 方括号保存数组：[]
2. 获取数据:
  1. json对象.键名
  2. json对象[“键名”]
  3. 数组对象[索引]
  4. 遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义基本格式
        var person = {"name": "张三1", age: 23, 'gender': true};

        //获取name的值
        //var name = person.name;
        var name = person["name"];
         //alert(name);

        //alert(person);
        //2.嵌套格式   {}———> []
        var persons = {
            "persons": [
                {"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}
            ]
        };
        // alert(persons);
        //获取王五值
        var name1 = persons.persons[2].name;
         //alert(name1);


        //2.嵌套格式   []———> {}
        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
        //获取李四值
        alert(ps);
        alert(ps[1].name);


    </script>

</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var person = {"name": "张三1", age: 23, 'gender': true};

        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];

        //遍历
        for (var key in person) {
            // alert(key + ":"+ person.key); 获取不到，相当于person."name"
            alert(key + ":" + person[key]);
        }


        //数组遍历
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for (const key in p) {
                alert(key +":"+p[key]);
            }
        }
    </script>

</head>
<body>

</body>
</html>

JSON数据和Java对象的相互转换
- JSON解析器：
  - 常见的解析器：Jsonlib，Gson，fastjson，jackson
1. JSON转为Java对象
  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
    1. readValue(json字符串数据,Class)
2. Java对象转换JSON
  1. 使用步骤：
    1. 导入jackson的相关jar包
    2. 创建Jackson核心对象 ObjectMapper
    3. 调用ObjectMapper的相关方法进行转换
      1. 转换方法：
        
        writeValue(参数1，obj):
        参数1：
        File：将obj对象转换为JSON字符串，并保存到指定的文件中
        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
        writeValueAsString(obj):将对象转为json字符串
      2. 注解：
        
        @JsonIgnore：排除属性。
        @JsonFormat：属性值得格式化
        @JsonFormat(pattern = “yyyy-MM-dd”)
      3. 复杂java对象转换
        
        List：数组
        Map：对象格式一致


import com.heima.pojo.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.File;
import java.io.FileWriter;
import java.util.*;

public class TestJson {


    //Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        //2.创建Jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();

        //3.转换
        /*
            转换方法：
                writeValue(参数1，obj):
                    参数1：
                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                writeValueAsString(obj):将对象转为json字符串

         */
        String json = mapper.writeValueAsString(p);
        //{"name":"张三","age":23,"gender":"男"}
        System.out.println(json);//{"name":"张三","age":23,"gender":"男"}


        //writeValue，将数据写到d://a.txt文件中
        mapper.writeValue(new File("d://a.txt"),p);

        //writeValue.将数据关联到Writer中
        mapper.writeValue(new FileWriter("d://b.txt"), p);
    }


    @Test
    public void test2() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());
        System.out.println("p = " + p);


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
        //{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}
    }


    @Test
    public void test3() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());


        //创建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        // [{},{},{}]
        //[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
        System.out.println(json);
    }

    @Test
    public void test4() throws Exception {
        //1.创建map对象
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("name", "张三");
        map.put("age", 23);
        map.put("gender", "男");


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        //{"name":"张三","age":23,"gender":"男"}
        System.out.println(json);//{"gender":"男","name":"张三","age":23}
    }

    //演示 JSON字符串转为Java对象
    @Test
    public void test5() throws Exception {
        //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";

        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);
    }

}

package com.heima.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Person {
    private String name;
    private int age;
    private String gender;
 //   @JsonIgnore//忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                '}';
    }
}

案例：

校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
  1. $.get(type):将最后一个参数type指定为"json"
  2. 在服务器端设置MIME类型
    response.setContentType(“application/json;charset=utf-8”);

axios和ajax区别

理论区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。ajax技术实现了局部数据的刷新，axios实现了对ajax的封装；
axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一定有。

ajax：ajax本身是针对MVC的编程。

最典型的MVC就是jsp+servlet+javabean模式：

JavaBean作为模型，既可以作为数据模型来封装业务数据，又可以作为业务逻辑模型来包含应用的业务操作。
JSP作为表现层，负责提供页面为用户展示数据，提供相应的表单（Form）来用于用户的请求，并向控制器发出请求来请求模型进行更新。
Serlvet作为控制器，用来接收用户提交的请求，然后获取请求中的数据，将之转换为业务模型需要的数据模型，然后调用业务模型相应的业务方法进行更新，同时根据业务执行结果来选择要返回的视图。

axios：axios符合现在前端MVVM的浪潮。

ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层。

axios的主要特点

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

zhangsan3333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax&Json笔记，axios

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。var person = {“name”: “张三”, age: 23, ‘gender’: true};var p = {“name”:“张三”,“age”:23,“gender”:“男”};Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。//data: “username=jack&age=23”,//请求参数。},//表示如果请求响应出现错误，会执行的回调函数。type:“POST” , //请求方式。
复制链接

扫一扫