AJAX技术学习
Posted 健伟学习平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX技术学习相关的知识，希望对你有一定的参考价值。
水里的游鱼是缄默沉静的，陆地上的兽类是喧哗的，空中的飞鸟是喧哗着的。人类却兼有海洋的缄默沉静、陆地的喧哗与天空的音乐。
——泰戈尔
佳
著
荐
AJAX技术
AJAX全称为Asynchronous javascript And XML,即异步的JS和XML;通过AJAX可以在浏览器中向服务端发送异步请求，最大的优势就是：无刷新获取数据。
1
ajax
AJAX的优点与缺点
优点：
1、可以无需刷新页面而与服务器端进行通信。
2、允许你根据用户事件来更新部分页面内容。
缺点：
1、没有浏览历史，不能回退
2、存在跨域问题（同源策略）
3、SEO不友好
HTTP请求报文与响应报文结构
2
ajax
请求报文与响应报文
请求报文：
重点是格式与参数
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文：
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head></head>
<body>
<h5>尚硅谷</h5>
</body>
</html>
AJAX中的GET与POST请求
3
AJAX
GET&POST&请求头设置
GET请求
//创建ajax对象
Const xhr = new XMLHttpRequest();
//初始化，设置请求方法和url
Xhr.open(“GET”,”http://127.0.0.1/server?a=100&b=200&c=300”);
//发送请求
Xhr.send();
//时间绑定，处理服务端返回结果
Xhr.onreadystatechange=function(){
//判断服务端返回了所有的结果
If(xhr.readState==4){
//判断响应状态码
If(xhr.status>=200 && xhr.status <300){
Console,log(xhr.response);
}
}
}
POST请求
//创建ajax对象
Const xhr = new XMLHttpRequest();
//初始化，设置请求方法和url
Xhr.open(“GET”,”http://127.0.0.1/server”);
//发送请求
Xhr.send(“a=3&b=4”);
//时间绑定，处理服务端返回结果
Xhr.onreadystatechange=function(){
//判断服务端返回了所有的结果
If(xhr.readState==4){
//判断响应状态码
If(xhr.status>=200 && xhr.status <300){
Console,log(xhr.response);
}
}
}
请求头设置
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.setRequestHeader("name1","ddd");
自动重启工具nodemon
3
AJAX
nodemon
安装npm install -g nodemon
使用nodemon [your node app]
AJAX中的一系列问题
3
AJAX
iE缓存&超时&网络异常&取消请求&重复发送
Ie中ajax缓存问题解决
初始化对象时路径后面加上时间戳
xhr.open("POST","http://localhost:8000/ie?t="+Date.now());
Ajax请求超时（ontimeout）与网络异常（onerror）
xhr.timeout=2000;
//超时回调
xhr.ontimeout=function(){
alert("你的网络超时了")
}
//网络异常
xhr.onerror=function(){
alert("你断网了")
}
Ajax取消请求
xhr.abort();//执行之后就会取消
Ajax请求重复发送问题
<script>
//获取所有button
const btns = document.querySelectorAll("button");
let x = null;
let isSending=false;//判断是否重复点击
btns[0].onclick=function(){
//判断是否重新请求，是就取消掉
if(isSending) x.abort();
x = new XMLHttpRequest();
//初始化
isSending = true;
x.open("GET","http://localhost:8000/server");
//发送请求
x.send();
x.onreadystatechange=function(){
if(x.readyState === 4){ //判断是否成功发送请求，如果成功就将状态改为false
isSending = false;
}
}
}
//取消发送的请求
btns[1].onclick=function(){
x.abort();//执行之后就会取消
}
</script>
Jqurey发送AJAX请求
3
AJAX
GET&POST&通用方式
$.get(“http://127.0.0.1/server”,{a:100,b:200},function(){
Console.log(data)
},”json”);
POST请求
$.post(“http://127.0.0.1/server”,{a:100,b:200},function(){
Console.log(data)
},”json”);
Jquery通用发送请求方式
$.ajax({
//url
Url:”http://127.0.0.1/server”,
//参数
Data:{a:100,b:200},
//请求类型
Type:”GET/POST”,
//响应体结果
dataType:”json”,
//成功的回调
Sucess:function(data){
Console.log(data);
}
//超时时间
Timeout:2000,
//失败的回调
Error:function(){
Console.log(“错误”)
},
//头信息
Headers:{
C:200,
D:400
}
})
Axios发送AJAX请求
3
AJAX
GET&POST&函数发送
GET请求
Axios.get(“/axios-server”,{
//url参数
Params:{
Id:200,
Vip:7
},
//请求头信息
Headers:{
Name:”mmm”,
Age:20
}
}).then(val =>{
Console.log(val)
})
POST请求
Axios.post(“/axios-server”,{
A:100,
B:200
},{
//url参数
Params:{
Id:200,
Vip:7
},
//请求头信息
Headers:{
Name:”mmm”,
Age:20
}
})
Axios函数发送ajax请求
Axios({
//请求方法
Method:”POST”,
//url
Url:”/axios-server”,
//url参数
Params:{
Vip:10,
Leavel:30
},
//头信息
Headers:{
A:100,
B:200
},
//请求体参数
Data:{
Username:”admin”,
Password:”admin”
}
}).then(response =>{
Console.log(response)
})
Fetch函数发送AJAX请求
3
AJAX
fetch函数
GET&POST请求
fetch(“http://127.0.0.1/fetch-server?vip=10”,{
//请求方法
Method:”GET/POST”,
//请求头
Headers:{
Name:”ad”,
},
//请求体
Body：”username=admin&password=admin”
}).then(response=>{
//如果返回结果是字符串
Return response.text();
//如果返回结果是json格式
Return response.json()
}).then(response=>{
Console.log(response)
})
AJAX中的跨域问题解决
3
AJAX
原生JsonP&Cors
原生jsonp(只支持get请求)
//创建script标签
Const script = document.createElement(“script”);
//设置标签的src属性
Script.src=”http://127.0.0.1:200/srrver”;
//将script插入文档中
Document.body.appendChild(script);
服务端返回函数体（js代码）才行，字符串不行
Cors
//服务端设置一个响应头,设置允许跨域
response.setHeader("Access-Control-Allow-Origin","*");
//服务端设置请求头 所有请求头都可以通过
response.setHeader("Access-Control-Allow-Headers","*");
有些书也许现在你读不懂，但你一定要去读它。时间会告诉你经典存在的意义。
——寄语
以上是关于AJAX技术学习的主要内容，如果未能解决你的问题，请参考以下文章