AJAX
1.概述
1.AJAX
AJAX全称为Asynchronous Javascript And XML （异步的JS和XML）。通过AJAX可以在浏览器中发送异步请求，最大的优势是不用刷新就能获取数据。
优点：
- 可以无需刷新页面就与服务器端进行通信；
- 允许你根据用户事件来更新部分页面内容。
缺点：
- 没有浏览历史，不能回退；
- 存在跨域问题；
- SEO不友好（搜索引擎优化，爬虫爬不到）。
2.XML
XML可扩展标记语言，用来传输和存储数据。XML和HTML类似，但HTML中是预定于标签，而XML都是自定义标签。现在已经被JSON取代了。
3.跨域问题
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。localhost和127.0.0.1虽然都指向本机，但也属于跨域。
跨域会阻止接口的请求，会阻止Dom的操作。
4.HTTP协议
HTTP（hypetext transport protovol）协议，超文本传输协议，规定了浏览器与万维网服务器之间互相通信的规则。
请求报文
- 行：请求方式、URL路径、HTTP协议版本
- 头：Host、Cookie、Content-type、User-Agent
- 空行
- 体
响应报文
- 行：协议版本、响应状态码、响应状态字符串
- 头：Content-Type、Content-length、Content-encoding
- 空行
- 体：html源码
5.环境准备
下载node.js 和express：操作链接
2.使用
1.请求基本操作
//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/路径');
//3.发送
xhr.send();
//4.事件绑定 处理服务器端返回结果
//readystate 是xhr对象中的属性，表示状态0 1 2 3 4
//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果
xhr.onreadystatechange=function(){
if(xhr.readystate===4){
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
}
2.设置参数
在url中之间设置。
3.发送POST请求
xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');
4.响应JSON数据
服务器端发送：
const data={
name:'hh'};
let str=JSON.stringify(data);
response.send(str);
客户端接收：
//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);
5.请求超时问题
//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调，超时后调用该函数
xhr.ontimeout=function(){
}
//网络异常回调
xhr.onerror=function(){
}
6.取消请求
xhr.abort();
7.请求重复发送问题
//标识是否正在发送ajax请求
let isSending=false;
//发送后将isSending 改为true
//绑定事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
isSending=false;
}
}
8.使用fetch函数发送ajax请求
fetch('url',{
method:'POST',
//请求头
headers:{
name:'ahh'
},
//请求体
body:''
}).then(response=>{
return response.text();//response.json();
});
3.jQuery中使用ajax
1.get请求
$.get(url,[data],[callback],[type])
- url：请求的url地址
- data：携带的参数
- callback：载入成功时的回调函数
- type：设置返回内容格式
2.post请求
$.post(url,[data],[callback],[type])
- url：请求的url地址
- data：携带的参数
- callback：载入成功时的回调函数
- type：设置返回内容格式
3.通用模式
$('button').eq(0).click(function(){
$.ajax({
url:'',
data:{
a:100,b:200},
type:'GET' //'POST',
dataType:'json',
success:function(data){
},
timeout:2000,
error:function(){
}
})
})
4.axios使用ajax
5.跨域问题
1.同源策略
浏览器的一种安全策略，同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。
2.如何解决跨域
- JSONP：只支持get请求。
有些标签具有跨域能力，img、link、iframe、script，JSONP就是使用script标签的跨域能力来发送请求的。
script发送请求应该返回js语句。
jQuery发送jsonp请求：
$('button').eq(0).click(function(){
$.getJSON('url',function(data){
})
})
- CORS：跨域资源共享
不需要在客户端做任何特殊操作，完全在服务器中进行处理，支持get和post请求。
CORS通过设置一个响应头来告诉浏览器，该请求允许跨域。
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*：全部
// 也可以写一个具体的url地址。