Ajax&JSON&Axios
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 对象XMLHttpRequest
var 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就是其中的佼佼者。
请移步官网或中文网进行学习，本节只做初学基础重点总结。
5.1 简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
安装
使用npm：
- $ npm install axios
使用bower：
- $ bower install axios
使用cdn：
- <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
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的问题。
-
处理链
- 请求拦截器先入后出，响应拦截器先入先出
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
