Java学习笔记-全栈-web开发-10-AjaxJSONAxios
Ajax&JSON&Axios
- 1. Ajax
- 1.1 简介
- 1.2 XMLHttpRequest 对象
- 1.2.1 XMLHttpRequest 的open方法
- 1.2.2 ajax准备状态码
- 1.2.3 获取响应数据
- 1.3 案例（GET）
- 1.3.1 html页面
- 1.3.2 js中的ajax
- 1.3.3 loginServlet
- 1.4 案例（POST）
- 1.4.1 js中的ajax
- 2. JSON
- 2.1 简介
- 2.2 入门
- 2.2.1 JSON基本数据形式--字典
- 2.2.2 JSON复合嵌套数据形式
- 2.3 客户端JSON处理 -- js
- 3. 服务端JSON处理 -- jackson
- 3.1 案例
- 3.1.1 model
- 3.1.2 model转JSON
- 4. ajax处理JSON
- 5. axios(重点)
- 5.1 简介
- 5.2 基本使用方法
- 5.3 重点笔记
1. Ajax
1.1 简介
-
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
-
AJAX = 异步 JavaScript 和 XML。
- 同步：加锁，排队，一条线执行
- 异步：多条线执行
-
AJAX 是一种用于创建快速动态网页的技术。
-
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
当你在百度搜索栏中输入一些内容后，下面就出现一些候选相关选项，这就是ajax实现的：没有重载页面，但是更新了数据
1.2 XMLHttpRequest 对象
- XMLHttpRequest 是 AJAX 的基础，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
- 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
- XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest使用流程
- 创建XMLHttpRequest对象
- 请求(同步或者异步请求)
- 响应
1.2.1 XMLHttpRequest 的open方法
通过open方法发送请求，实现异步传输。
注意：默认方法是异步的，也就是开子线程，同步方法已经被废弃，
1.2.2 ajax准备状态码
request.readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
最常用的就是与http响应状态码“request.status == 200 && request.readyState == 4”进行请求成功与否的验证。
1.2.3 获取响应数据
通过request.responseText获取
1.3 案例（GET）
1.3.1 html页面
form表单不通过action发送请求，而是通过提交触发js代码，在js中发送异步请求
<form action="" method="get">用户名：<input type="text" name="username" id="username"/>密码：<input type="password" name="password" id="password"/><input type="button" value="登录" onclick="getlogin()"/>
form>
1.3.2 js中的ajax
<script type="text/javascript">function getlogin() {//1.获取表单的值var username = document.getElementById('username').value;var password = document.getElementById('password').value;//注意需要将参数拼接var params = 'username=' + username + '&password=' + password;console.log(params);//2.创建ajax 对象XMLHttpRequestvar request = new XMLHttpRequest();//3.发送请求,把请求参数放在?号后面request.open('get','${pageContext.request.contextPath}/LoginServlet?' + params);request.send(); //get方法不需要传参，post需要//4.监听准备状态的改变（这种写法表明：js的属性可以是方法）request.onreadystatechange = function(){console.log('准备状态码' + request.readyState + ' - ' + '响应状态码' + request.status);if(request.readyState == 4 && request.status == 200){var rspTxt = request.responseText;console.log('服务器响应：' + rspTxt);if(rspTxt == 'success'){ //success是servlet返回的响应alert('登录成功');}else{alert('登录失败');}}}}
script>
1.3.3 loginServlet
对于服务器来说，ajax请求和普通请求都是一样的，没有区别
1.4 案例（POST）
ajax的post请求流程
- a.创建请求对象
- b.连接
- c.设置content-type请求头，如果不设置请求头，发送请求会失败
- d.发送请求，传递请求参数
- e.接收响应
POST跟GET差不多，区别就在于
- 需要设置content-type请求头
- 在send发送参数，而不是拼接在url后面
1.4.1 js中的ajax
其他都一样
2. JSON
2.1 简介
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言
- JSON 具有自我描述性，更易理解
无论在任何语言中，JSON几乎成了网络中最广泛的数据交互手段。
2.2 入门
2.2.1 JSON基本数据形式–字典
键值对
{ "firstName":"Bill" , "lastName":"Gates" }
相当于Java中的map，python中的字典。
如果你学习过python，那么只要把JSON当成python字典来看即可，他们的“组合使用方式”基本一致。
2.2.2 JSON复合嵌套数据形式
就像是函数嵌套，只要符合最基本的
{ "firstName":"Bill" , "lastName":"Gates" }
如何嵌套，就看你的想象力。
数组形式：
[{ "firstName":"af" , "lastName":"al" },
{ "firstName":"bf" , "lastName":"bl" }]
字典套字典数组：
{"people":[{ "firstName":"af" , "lastName":"al" },{ "firstName":"bf" , "lastName":"bl" }]
}
其实就是数据结构的组合使用，只要符合键值对的形式，任意套用都可以。
2.3 客户端JSON处理 – js
- JSON.parse(str) ------- 将str解析为JSON
- JSON.stringify(str) -------将str字符串化
3. 服务端JSON处理 – jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json字符串和xml文档，同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少，简单易用并且性能也要相对高些，并且Jackson社区相对比较活跃，更新速度也比较快。
jackson特点
- 容易使用 - jackson API提供了一个高层次外观，以简化常用的用例。
- 无需创建映射 - API提供了默认的映射大部分对象序列化。
- 性能高 - 快速，低内存占用，适合大型对象图表或系统。
- 干净的JSON - jackson创建一个干净和紧凑的JSON结果，很容易阅读。
- 不依赖 - 除了JDK，不需要任何其他的库，
- 开源代码 - jackson是开源的，可以免费使用。
在maven仓库下载即可
3.1 案例
相关方法：
创建“对象映射”对象，该对象提供对象与JSON的转换：
ObjectMapper mapper = new ObjectMapper();
转换方法：
//对象转JSON String
mapper.writeValueAsString(Object);//JSON String 转对象
mapper.readValue(JSONString, Object.class);
案例：
//准备对象
User user1 = new User ("shunxu","123456");//对象转字符串
String string = mapper.writeValueAsString(user1);String str = "{\"username\":\"shunxu\",\"password\":\"123456\"}";
System.out.println(str);User user2 = mapper.readValue(str, User.class);
System.out.println(user2);
writeValueAsString(Object) 可以传对象，map，list等多种方式。
3.1.1 model
3.1.2 model转JSON
4. ajax处理JSON
原理：
- Servlet：将model的数据写为map，利用jackson将map内容转为json字符串给前端。
- 前端：利用js将json字符串转为json
Servlet
注意将contentType设为text/json
JS
<script type="text/javascript">function postlogin() {//1.获取表单的值var username = document.getElementById('username').value;var password = document.getElementById('password').value;var params = 'username=' + username + '&password=' + password;console.log(params);//2.创建XMLHttpRequest对象var request = new XMLHttpRequest();//3.发送请求,把请求参数放在send方法中request.open('post','${pageContext.request.contextPath}/LoginServlet');//设置请求头,一定要设置请求头request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");request.send(params);//4.监听准备状态的改变request.onreadystatechange = function(){console.log(request.readyState + ' - ' + request.status);if(request.readyState == 4 && request.status == 200){var rspTxt = request.responseText;console.log(rspTxt);//把返回的字符串转成json对象var jsonObj = JSON.parse(rspTxt);console.log(jsonObj);var tip = document.getElementById('tip');//添加一个span标签用于显示登录状态//通过对象点属性的方式取值if(jsonObj.success == 1){tip.innerHTML = "登录成功";}else{tip.innerHTML = jsonObj.message;}}}}
script>
5. axios(重点)
实际开发中，更多的是使用ajax的封装，axios就是其中的佼佼者。
请移步官网或中文网进行学习，本节只做初学基础重点总结。
axios官网
axios中文网
5.1 简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
安装
使用npm：
- $ npm install axios
使用bower：
- $ bower install axios
使用cdn：
5.2 基本使用方法
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});
5.3 重点笔记
RESTful与axios
-
post和put：
- js中使用method:’post/put’,data:{x:’xx’}
-
get/delete：
- js中使用method:’get/delete’,parmas:{x:’xx’}
-
Const instance = axios.create({})
- 对xhr的二次封装，通过定制不同的axios来解决一个前端多个后台多个API的问题。
-
处理链
- 请求拦截器先入后出，响应拦截器先入先出
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！