ajax 和amp; axios 和amp; json

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

参考原生ajax：AJAX 简介 | 菜鸟教程

1. 概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

同步和异步：客户端和服务器端相互通信的基础上
* 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

       Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
       通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
       传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

提升用户的体验

2. 实现方式

（1）原生的JS实现方式（了解）

//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);
}
}

（2） JQeury实现方式

a. $.ajax()

* 语法：$.ajax({键值对});

//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});

b. $.get()：发送get请求

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

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

二、axios 介绍

1.axios 是一个专注于网络请求的库，核心负责发请求和拿数据

在后面的vue react都会用axios来请求数据（类似于后端 httpclient）

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

3.Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

三、axios使用

1. axios 发送get/post请求

页面引入axios cdn依赖

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: '接口地址',
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
})

<%--
Created by IntelliJ IDEA.
User: mayikt
Date: 2022/6/8
Time: 15:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>axios</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function mayiktAxios() {
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
// URL 中的查询参数
params: {
name: "mayikt",
age: 22
}
}).then(function (result) {
alert(result.data);
})
}
</script>
</head>
<body>
<input type="button" value="发送ajax" onclick="mayiktAxios()"/>
</body>
</html>

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter writer = resp.getWriter();
String name = req.getParameter("name");
String age = req.getParameter("age");
writer.print("mayikt,name:" name ",age:" age);
writer.close();
}
}

2. axios验证用户名称是否存在

需求：当我们用户输入用户名称之后（会使用ajax验证用户名称是否已经存在如果存在的话则提示该用户名称是已经存在的）

onkeyup---监听用户输入完内容走监听方法

@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
private MayikUsertService mayikUsertService = new MayikUsertService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//1.获取到用户输入的userName参数值
String userName = req.getParameter("userName");
//2.调用数据库根据userName查询用户名称是否存在
MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
PrintWriter writer = resp.getWriter();
if (mayiktUserEntity != null) {
writer.print("该用户" userName "已经存在的无法注册!");
}
writer.close();
}
}

<%--
Created by IntelliJ IDEA.
User: mayikt
Date: 2022/6/6
Time: 17:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<form action="/mayikt_session_war_exploded/register" method="post">
<label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
<label>密&nbsp&nbsp&nbsp码: </label><input type="password" name="userPwd"/><br>
<label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
<a id="ecode" href="#">看不清？换一张图片</a><br>
<span id="error" style="color: red">${errorMsg}</span>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
window.onload = function () {
//获取img标签的对象
img = document.getElementById("exchangecode");
img.onclick = function () {
//加时间戳,避免浏览器缓存
var date = new Date().getTime()
img.src = "VerifycodeServlet?" date;
}
//获取a标签的对象
ec = document.getElementById("ecode");
ec.onclick = function () {
//加时间戳
var date = new Date().getTime()
img.src = "VerifycodeServlet?" date;
}
}
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function mayiktAxios(object) {
// 1.接受用户输入的userName
var userName = object.value;
// 2.使用Axios 发送ajax请求验证 userName是否存在的
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
// URL 中的查询参数
params: {
userName: userName,
}
}).then(function (result) {
//定位 span id 名称 error 修改
document.getElementById("error").innerText = result.data;
})
}
</script>
</head>
</html>

四、json

1. 概念

JavaScript Object Notation JavaScript对象表示法

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

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

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

2. 语法

(1) 基本规则

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

（2）获取数据

a. json对象.键名
b. json对象["键名"]
c. 数组对象[索引]
d. 遍历
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};

var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取ps中的所有值
for (var i = 0; i < ps.length; i ) {
var p = ps[i];
for(var key in p){
alert(key ":" p[key]);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonDemo</title>
<script>
// 1.定义json
var json1 = {name: "mayikt", age: 22, isFlag: true};
alert(json1.name);
alert(json1.age);
alert(json1.isFlag);
// 2.定义json数组
var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
alert(jsonArr.code);
alert(jsonArr.data[0].name);
var userArr = jsonArr.data;
for (var i = 0; i < userArr.length; i ) {
alert(userArr[i].name "," userArr[i].age);
}
</script>
</head>
<body>
</body>
</html>

五、 JSON数据和Java对象的相互转换

* JSON解析器：
* 常见的解析器：Jsonlib，Gson，jackson ， fastjson

1. JSON转为Java对象

（1）导入jackson的相关jar包
（2）创建Jackson核心对象 ObjectMapper
（3）调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class) 学新通

学新通

2. Java对象转换JSON（jackson）

使用步骤：

a. 导入jackson的相关jar包
b. 创建Jackson核心对象 ObjectMapper 学新通
c. 调用ObjectMapper的相关方法进行转换
（a）转换方法：

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

学新通

（b）注解：

@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化

@JsonIgnore:转换后直接不显示

学新通

@JsonFormat(pattern = "yyyy-MM-dd")

学新通

（c）复杂java对象转换
List：数组
Map：对象格式一致学新通

3. fastjson用法

文档：javaweb开发相关资料下载.notea

链接：有道云笔记

学新通

public class Test01 {
public static void main(String[] args) {
//1.将数据对象变成json（字符串类型）
MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
String json1 = JSONObject.toJSONString(user1);
System.out.println(json1);
//2.嵌套json
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 200);
jsonObject.put("msg", "ok");
//data值数组类型
ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
mayiktUserEntities.add(user1);
mayiktUserEntities.add(user2);
jsonObject.put("data", mayiktUserEntities);
System.out.println(jsonObject.toJSONString());
}
}
public class Test02 {
public static void main(String[] args) {
String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
// string类型-----jsonobject----jsonobject
JSONObject jsonObject = JSONObject.parseObject(jsonStr);
// Integer code = (Integer) jsonObject.get("code");
Integer code = jsonObject.getInteger("code");
String msg = jsonObject.getString("msg");
System.out.println(code "," msg);
JSONArray data = jsonObject.getJSONArray("data");
for (int i = 0; i < data.size(); i ) {
JSONObject object = (JSONObject) data.get(i);
Integer id = object.getInteger("id");
String userName = object.getString("userName");
String userPwd = object.getString("userPwd");
MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
System.out.println(mayiktUserEntity);
}
}
}
public class Test03 {
public static void main(String[] args) {
String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
JSONObject jsonObject = JSONObject.parseObject(jsonStr);
Result result = JSONObject.parseObject(jsonStr, Result.class);
// java序列化技术将 json变成对象
System.out.println(result);
}
}
public class Result {
private Integer code;
private String msg;
private List<MayiktUserEntity> data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public List<MayiktUserEntity> getData() {
return data;
}
public void setData(List<MayiktUserEntity> data) {
this.data = data;
}
@Override
public String toString() {
return "Result{"
"code=" code
", msg='" msg '\''
", data=" data
'}';
}
}

axios({
method: "post",
url: "${pageContext.request.contextPath}/user/addUser",
data: JSON.stringify(userList),
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(resp => {
})

这篇好文章是转载于：学新通技术网

ajax 和amp; axios 和amp; json

一、ajax概述

1. 概念

2. 实现方式

（1）原生的JS实现方式（了解）

（2） JQeury实现方式

二、axios 介绍

三、axios使用

1. axios 发送get/post请求

2. axios验证用户名称是否存在

四、json

1. 概念

2. 语法

(1) 基本规则

（2）获取数据

五、 JSON数据和Java对象的相互转换

1. JSON转为Java对象

2. Java对象转换JSON（jackson）

3. fastjson用法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐