1.AJAX是什么
AJAX(Asynchronous Javascript And XML)就是异步的JavaScript和XML.
2.AJAX的作用
- 无需重新装载(不用刷新)整个页面便能向服务器发送请求与服务器端通信.
- 对XML文档的解析和处理．
- 允许根据用户事件来更新部分页面内容
缺点：
- 没有浏览历史，不支持回退；
- 存在跨域问题（浏览器同源策略）；
- SEO（搜索引擎优化）不友好（数据来源于请求，爬不到）
3.XML是什么
XML是可扩展标记语言，被设计用来传输和存储数据，与HTML不同的是，XML没有预定义标签，全都是自定义标签，用来表示一些数据。
<student>
<name>三毛</name>
<age>10</age>
</student>
现在用的一般都是JSON格式
{
name:"三毛",
age:10
}
4.HTTP协议
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它详细规定了浏览器与万维网服务器之间通信的规则。
4.1 请求报文
HTTP请求报文主要由请求行、请求头部、请求正文3部分组成。
请求行
请求行由3部分组成，分别为：请求方法、URL以及协议版本，之间由空格分隔
请求行：GET /index.html HTTP/1.1
请求头
请求头部为请求报文添加了一些附加信息，由“键/值”对组成，每行一对，名和值之间使用冒号分隔。
请求正文
可选部分，GET请求没有请求正文
POST请求体中存放的是表单提交的键值对。例如Json格式：{"name":"c","age":10}
4.2 响应报文
所谓响应其实就是服务器对请求处理的结果，或者如果浏览器请求的直接就是一个静态资源的话，响应的就是这个资源本身。 HTTP响应报文主要由状态行、响应头部、响应正文3部分组成。
状态行
状态行格式为：协议版本，状态码，状态码描述，之间由空格分隔。
HTTP-Version Status-Code Reason-Phrase CRLF
状态码
状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。
- 1xx：指示信息--表示请求已接收，继续处理。
- 2xx：成功--表示请求已被成功接收、理解、接受。
- 3xx：重定向--要完成请求必须进行更进一步的操作。
- 4xx：客户端错误--请求有语法错误或请求无法实现。
- 5xx：服务器端错误--服务器未能实现合法的请求。
5.AJAX请求基本操作
5.1 原生AJAX
const btn = document.querySelector("button");
var div = document.querySelector("div");
btn.onclick = function() {
//创建对象
const xhr = new XMLHttpRequest();
//设置响应体数据的类型(设置后可以自动将服务器数据转化为对象)
xhr.responseType='json';
//初始化 设置请求方法和url 设置请求参数，多个参数用&分开
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
//发送
xhr.send();
//事件绑定,onreadystatechange
//readystate是xhr对象中的属性，表示状态
//0初始化 1open方法调用完毕 2send方法调用完毕 3服务端返回的部分结果 4服务端返回的所有结果
xhr.onreadystatechange = function() {
//判断服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断是否响应成功 xhr.status状态码 xhr
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果
//响应行
// console.log(xhr.status); //状态码
// console.log(xhr.statusText); //状态字符串
// console.log(xhr.getAllResponseHeaders()); //所有响应头
// console.log(xhr.response); //响应体
//手动转化数据
//let data=JSON.parse(xhr.response);
div.innerHTML = xhr.response;
} else {
alert("出错了，请重新尝试");
}
}
};
}
5.2 IE缓存问题解决
5.2.1 让每次发请求的url不同
当url没有发生变化时，浏览器不会重新向服务器端发送请求，因此需要让每次发送请求时的url不同，这时可以利用date.now()获取当前时间戳加在url后面，或者也可以使用random随机数
5.2.2 让IE在延用缓存的时候真的发起请求，携带请求头
If-Modified-Since:0 故意让缓存过期
让IE发起请求,并主动把缓存文件的产生时间携带到服务器端,进行缓存是否有效的比较
在ajax对象.setRequestHeader(‘请求头名’,’请求头内容’);
//在发送请求前设置请求头
xhr.setRequestHeader("If-Modified-Since",'0');
xhr.send()
5.2.3 在服务器端设置请求头，彻底禁用缓存
在ajax发送请求前加上 setRequestHeader("Cache-Control","no-cache")
5.3 AJAX请求超时与网络异常处理
xhr.timeout=2000设置当服务器在2s内没有返回结果就取消请求
超时的回调函数,当请求超时时调用
xhr.ontimeout=function(){
alert('请求超时，请稍后重试')
}
网络异常时的回调函数
xhr.onerror=function(){
alert('网络出现问题，请稍后重试')
}
取消AJAX请求
xhr.abort()
5.4 重复请求问题
var btns = document.querySelectorAll('button');
let xhr = null;
// 标识变量
let isSending = false;//是否正在发送ajax请求
btns[0].onclick = function(){
// 判断标识符变量
if(isSending) xhr.abort();//如果正在发送，则取消该发送，创建一个新的请求
xhr = new XMLHttpRequest();
// 修改 标识变量的值
isSending = true;
xhr.open("GET","http://127.0.0.1:8000/delay");
xhr.send();
xhr.onreadystatechange = function(){
if(x.readyState === 4){//请求发送成功
// 修改标识变量
isSending =false;
}
}
}
5.5 JQuery发送AJAX请求
<div class="container">
<h2 class="page-header">jquery发送ajax请求</h2>
<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法Ajax</button>
</div>
<script>
$('button').eq(0).click(function(){
//get请求
//第一个参数为url；第二个参数为带给服务器的数据，第三个参数为带有服务器数据的回调函数
$.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
console.log(data);
},'json');//第四个参数设置服务器返回的数据类型为json
});
$('button').eq(1).click(function(){
//post请求
$.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
console.log(data);
});
})
$('button').eq(2).click(function(){
//通用请求方法
$.ajax({
//url
url:'http://127.0.0.1:8000/jquery-server',
//参数
data:{a:100,b:200},
//请求类型
type:'GET',
//响应体内容：
dataType:'json',
//成功的回调
success:function(data){
console.log(data)
},
//超时时间
timeout:2000,
error:function(){
console.log("出错了！！！！");
},
//头信息
headers:{
c:300,
d:400
}
});
})
5.6 Axios发送AJAX请求
const btns=document.querySelectorAll('button');
//配置baseURL
axios.defaults.baseURL='http://127.0.0.1:8000';
btns[0].onclick=function(){
//GET请求（没有请求体）
//第一个参数为url路径，第二个参数为其他配置
axios.get('/axios-server',{
//url参数
params:{
id:100,
vip:7
},
//请求头
headers:{
name:'jinggangshan',
age:20
}
}).then(value=>{
console.log(value);//返回完整的数据
})
}
btns[1].onclick=function(){
//post请求
//第一个参数为url路径，第二个参数为请求体，第三个参数为其他配置
axios.post('/axios-server',{
username:'admin',
password:'admin'
},
{
params:{
id:200,
vip:9
},
//请求头
headers:{
height:180,
weight:180
},
})
}
btns[2].onclick=function(){
//axios通用方法
axios({
//请求方法：
method:'POST',
//url
url:'/axios-server',
//url参数
params:{
vip:10,
level:30
},
//头信息
headers:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:"admin"
}
}).then(response=>{
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体信息
console.log(response.data);
})
}
5.7 全局对象的fetch函数发送AJAX请求
const btn=document.querySelector('button');
btn.onclick=function(){
//请求的方法
fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
//请求方法
method:'POST',
//请求头
headers:{
name:'jinggangshan',
},
//请求体
body:'username=admin&password=admin'
}).then(response=>{
return response.text();
//return response.json();
}).then(response=>{
console.log(response)
});
}
6.浏览器跨域问题
6.1同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。违背同源策略就是跨域
同源： 协议、域名、端口号 必须完全相同。
const x=new XMLHttpRequest();
//这里是因为满足同源策略的，所以url可以简写
x.open("GET",'/data');
//发送
x.send();
x.onreadystatechange=function(){
if(x.readyState===4){
if(x.status>=200&&x.status<300){
console.log(x.response);
}
}
}
6.2 jsonp的实现原理
6.2.1. JSONP 由来
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，是由程序员自己开发出来的，只支持 get 请求。
1、Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态页面、web服务，只要是跨域请求，一律不准。
2、不过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>。
3、于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。
4、恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。
5、这样，解决方案就呼之欲出了，web服务端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件，显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装进去。
6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来很像ajax，但其实并不一样。
7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，简称JSONP。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名包裹在JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
6.2.2. JSONP 怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img、link、iframe、script。
JSONP 就是利用 script 标签的跨域能力来发送请求的
//获取 input 元素
const input = document.querySelector('input');
const p = document.querySelector('p');
//声明 handle 函数
function handle(data){
input.style.border = "solid 1px #f00";
//修改 p 标签的提示文本
p.innerHTML = data.msg;
}
//绑定事件
input.onblur = function(){
//获取用户的输入值
let username = this.value;
//向服务器端发送请求 检测用户名是否存在
//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的 src 属性
script.src = 'http://127.0.0.1:8000/check-username';
//3. 将 script 插入到文档中
document.body.appendChild(script);
}
服务器代码：
app.all('/check-username',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
exist: 1,
msg: '用户名已经存在'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
6.3 JQuery发送jsonp请求解决跨域
$('button').eq(0).click(function(){
//callback作为query参数传递过去,=?为固定格式会生成一个函数名带给服务器
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
$('#result').html(`
名称: ${data.name}<br>
校区: ${data.city}
`)
});
});
服务器代码：
app.all('/jquery-jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name:'尚硅谷',
city: ['北京','上海','深圳']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
6.4 CORS解决跨域
6.4.1 CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
6.4.2 CORS如何工作？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
服务器代码：
app.all('/cors-server', (request, response)=>{
//设置响应头，'*'通配符表示所有
//允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许带自定义的响应头
response.setHeader("Access-Control-Allow-Headers", '*');
//允许get和post之外的方法跨域
response.setHeader("Access-Control-Allow-Method", '*');
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
response.send('hello CORS');
});
学习资料参考：
blog.csdn.net/guorui_java… blog.csdn.net/weixin_3800… www.bilibili.com/video/BV1WC…
