当前位置：首页 > news >正文

ajax axios json

news 2025/6/5 12:12:54

一、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用法

一、ajax概述

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

（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: mayiktDate: 2022/6/8Time: 15:48To 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 {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}@Overrideprotected 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();@Overrideprotected 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: mayiktDate: 2022/6/6Time: 17:12To 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.接受用户输入的userNamevar 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.定义jsonvar 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）转换方法：
                   * writeValue(参数1，obj):
   参数1：
   File：将obj对象转换为JSON字符串，并保存到指定的文件中
   Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
   OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
   * writeValueAsString(obj):将对象转为json字符串

（b）注解：
@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化
* @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.嵌套jsonJSONObject 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());}
}package com.mayikt;import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.JSONPObject;
import com.mayikt.entity.MayiktUserEntity;/*** @author 余胜军* @ClassName Test02* @qq 644064779* @addres www.mayikt.com* 微信:yushengjun644*/
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----jsonobjectJSONObject 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);}}
}package com.mayikt;import com.alibaba.fastjson.JSONObject;
import com.mayikt.entity.Result;/*** @author 余胜军* @ClassName Test03* @qq 644064779* @addres www.mayikt.com* 微信:yushengjun644*/
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);}
}
package com.mayikt.entity;import java.util.List;/*** @author 余胜军* @ClassName Result* @qq 644064779* @addres www.mayikt.com* 微信:yushengjun644*/
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;}@Overridepublic 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概述

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用法

相关文章：