AjaxJson笔记，axios

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, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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响应状态码是否为200if (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字符串@Testpublic void test1() throws Exception {//1.创建Person对象Person p = new Person();p.setName("张三");p.setAge(23);p.setGender("男");//2.创建Jackson的核心对象  ObjectMapperObjectMapper 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);}@Testpublic 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"}}@Testpublic 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);}@Testpublic 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对象@Testpublic 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;}@Overridepublic 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 层。