本文只算做个人笔记，由于我对ajax这块刚接触，所以写的很乱，之后会整理
概念
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页
优点
1.可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验
2.按需获取数据，节约带宽资源
分类
分为 原生ajax 和 jQuery 中的 ajax ， 其中原生ajax是核心
原生ajax
过程如下：
- 1. 实例化XHR对象
let xhr = new XMLHttpRequest();- 2. 打开请求（设置请求行）
xhr.open(method,url);- 3.设置请求头信息
xhr.responseType = 'json';
xhr.setRequestHeader('Content-type','application/json');- 4.设置监听
xhr.onreadystatechange = function(){
if(this.readyState = 4){
if(this.status == 200){
响应成功
this.response
} else {
失败
}
}
}- 5.发送请求（请求体）
xhr.send(JSON.stringify(data));提交的数据类型分为：查询字符串 、 json
- 参数类型为查询字符串
1.Content-Type
x-www-form-urlencoded
2.send()
如果要发送的数据格式为：
var obj = {
name:'xpf',
age:'22'
}
那么在发送的时候一定要将obj转换为查询字符串，send(qs.stringify(obj)); qs必须在ES6模块代码下才能用，也可以手动封装
- 参数类型为json
1.Content-Type
application/json
2.send()
var obj = {
name:'xpf',
age:'22'
}
在发送的时候一定要将obj转换为json字符串，send(JSON.stringify(obj));
例子如下：（此处测试所用的接口只能接收查询字符串）
- 参数为查询字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax</title>
<script>
var url = 'http://120.78.164.247:8099/manager/category/saveOrUpdateCategory';
var method = 'POST';
var successHandler = function(){
alert('请求成功');
console.log(this.response);
}
var errorHandler = function(){
alert('请求失败');
console.log(this.response);
}
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
successHandler.call(this);
} else{
errorHandler.call(this);
}
}
}
xhr.send('name=xpf&comment=thisIsTest&no=1010');
</script>
</head>
<body>
</body>
</html>结果如下：
- 参数为json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax</title>
<script>
var url = 'http://120.78.164.247:8099/manager/category/findAllCategory';
var method = 'GET';
var successHandler = function(){
alert('请求成功');
console.log(this.response);
}
var errorHandler = function(){
alert('请求失败');
console.log(this.response);
}
var xhr = new XMLHttpRequest();
xhr.open(method,url);
//对于get方式，可以不设置请求头
xhr.setRequestHeader('Content-type','application/json');
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
successHandler.call(this);
} else{
errorHandler.call(this);
}
}
}
xhr.send();
</script>
</head>
<body>
</body>
</html>结果如下：
查询栏目时请求体没有参数
jQuery 中的 ajax
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var url = 'http://120.78.164.247:8099/manager/category/saveOrUpdateCategory';
var obj = {
name:"test02",
comment:"thisIsTest02",
no:1002
}
$.post(url,obj,function(data){
alert('成功');
console.log(data);
});
</script>
</head>
<body>
</body>
</html>结果如下:
