AJAX、Axios、JSON快速学习笔记（建议收藏）

---

AJAX

AJAX概念

• 概念：AJAX (Asynchronous JavaScript And XML):异步的JavaScript和XML

• AJAX作用：

  1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据：使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
  2. 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等…

• 同步和异步
  

---

AJAX快速入门

1. 服务端编写AjaxServlet，并使用response输出字符串
2. 客户端创建XMLHttpRequest对象:用于和服务器交换数据

var xmlhttp;
if (window.XMLHttpRequest){
	//code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
}else {
	//code for lE6,IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
1
2
3
4
5
6
7
8

3. 客户端向服务器发送请求

xmlhttp.open("GET,"url");
xmlhttp.send();//发送请求
1
2

4. 客户端获取服务器响应数据

xmlhttp.onreadystatechange = function(){
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		alert(xmlhttp.responseText);
	}
}
1
2
3
4
5

---

Axios

Axios异步框架

Axios 对原生的AJAX进行封装，简化书写

---

Axios快速入门

1. 引入axios的js文件

<script src="jslaxios-0.18.0.js"></script>
1

2. 使用axios发送请求，并获取响应结果

axios({
	method:"get",
	url:"http:llocalhost:8080lajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
	alert(resp.data);
})
1
2
3
4
5
6

axios({
	method:"post",
	url:"http:/l/localhost:8080/ajax-demo1/aJAXDemo1",
	data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});
1
2
3
4
5
6
7

---

Axios请求方式别名

• 发送get请求

axios.get(“url")
	.then(function (resp){
		alert(resp.data);
});
1
2
3
4

• 发送post请求

axios.post("url","参数")
	.then(function (resp){
	alert(resp.data);
});
1
2
3
4

---

JSON

• 概念: JavaScript Object Notation。JavaScript 对象表示法
• 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
  

---

JSON基础语法

• 定义:

var 变量名 = {"key1": value1,
			 "key2": value2,
			 ...
			 };
1
2
3
4

示例:

var json = {"name: "zhangsan",
			"age": 23,
			"addr":["北京","上海"","西安"]
			};
1
2
3
4

• 获取数据:

变量名.key
1

json.name
1

• value的数据类型为:
  • 数字（整数或浮点数)
  • 字符串（在双引号中)
  • 逻辑值 (true或false)
  • 数组 (在方括号中)
  • 对象（在花括号中)
  • null

---

JSON数据和Java对象转换

• 请求数据:JSON字符串转为Java对象
• 响应数据:Java对象转为JSON字符串
  

Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

• 使用:

1. 导入坐标

<dependency>
	<groupld>com.alibabagroupld>	
	<artifactld>fastjsonartifactld>	
	<version>1.2.62version>
dependency>
1
2
3
4
5

2. Java对象转JSON

String jsonStr = JSON.toJSONString(obj);
1

3. JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);
1

---