目录
【AJAX】—— Asynchronous JavaScript And XML
【JSON】—— JavaScript Object Notation
【AJAX】—— Asynchronous JavaScript And XML
【概述】
异步的 JavaScript 和 XML
【作用】
1、与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据
- 使用了AJAX和服务器进行通信,就可以使用 HTML+AJAX来替换JSP页面了
2、异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等
【官网】
【使用】
1、编写AjaxServlet,并使用response输出字符串
2、创建 XMLHttpRequest 对象:用于和服务器交换数据
//创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
3、向服务器发送请求
//发送请求
xhttp.open("GET", "http://localhost:8080/AJAX/ajaxServlet", true);
xhttp.send();
4、获取服务器响应数据
//获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
alert(this.responseText);
}
};
【Axios异步框架】
【概述】
Axios 对原生的AJAX进行封装,简化书写
【官网】
Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js (axios-http.cn)
【使用】
1、引入axios的js文件
<script src="js/axios-0.18.0.js"></script>
2、使用axios发送请求,并获取响应结果
//get方式
<script>
axios({
method: "get",
url: "http://localhost:8080/AJAX/axiosServlet?username=zhangsan",
}).then(function (resp) {
alert(resp.data)
})
</script>
//post方式
<script>
axios({
method:"post",
url:"http://localhost:8080/AJAX/axiosServlet",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data)
})
</script>
【Axios请求方式别名】
为了方便起见, Axios 已经为所有支持的请求方法提供了别名
方法名 | 作用 |
get(url) | 发起Get请求 |
post(url,请求参数) | 发起Post请求 |
例:
//get
axios.get("http://localhost:8080/AJAX/axiosServlet?username=zhangsan").then(function (resp) {
alert(resp.data);
});
//post
axios.post("http://localhost:8080/AJAX/axiosServlet","username=zhangsan").then(function (resp){
alert(resp.data);
});
【JSON】—— JavaScript Object Notation
【概述】
- JavaScript 对象表示法
- 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
【基础语法】
【数据类型】
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
【定义】
var 变量名 = ‘’{"key1": value1,"key2": value2,...};
例:
//定义字符串
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';
【JSON字符串转为JS对象】
//将JSON字符串转换为js对象
let jsObject = JSON.parse(jsonStr);
【JS对象转为JSON字符串】
//将js对象转换为json字符串
let jsonStr = JSON.stringify(jsObject);
【JSON数据和Java对象相互转换】
- 请求数据:JSON字符串转为Java对象
- 响应数据:Java对象转为JSON字符串
【Fastjson】
【概述】
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前Java语言中最快的JSON库,可以实现Java对象和JSON字符串的相互转换。
【使用】
1、导入坐标
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
2、Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
3、JSON字符串转Java对象
User user = JSON.parseObject(jsonStr, User.class);
例:
public static void main(String[] args) {
//将Java对象转为JSON
User user=new User();
user.setId(1);
user.setUsername("zhangsan");
user.setPassword("123");
String jsonString= JSON.toJSONString(user);
System.out.println(jsonString);
//将JSON转为Java对象
User u=JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
System.out.println(u);
}