在线图片编辑源码武汉seo优化
目录
一、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>
<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>密   码: </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 => {})