Java学习笔记-全栈-web开发-10-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就是其中的佼佼者。

请移步官网或中文网进行学习，本节只做初学基础重点总结。

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：

• <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的问题。

• 处理链

  • 请求拦截器先入后出，响应拦截器先入先出