一、各种发送AJAX请求
jquery基于回调函数，axios基于promise
1.axios发送AJAX请求!!!
服务器：
app.all('/axios-server', (request, response) => {
//设置响应头，名为Access-Control-Allow-Origin
//*设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
response.send('hello AJAX post')
const data={name:'尚硅谷'}
// response.send(JSON,stringify(data))
});
（1）get请求
//get
get.onclick=function(){
//这里就不用写http://127.0.0.1:8000了
axios.get('/axios-server',{
//url参数
params:{
vip:10,
lebel:30
},
//头信息
Headers:{
a:100,
b:200
},
}).then(value=>{
console.log(value)
})
}
axios发送请求成功的值是一个封装好的响应对象
（2）post请求
post的第二个参数是请求体，第三个参数是其他配置
//post
post.onclick=function(){
axios.post('/axios-server',{
username:'ttt',
age:18
},{
//url参数
params:{
vip:9,
lebel:20
},
//头信息
Headers:{
height:100,
weight:300
},
})
}
（3）axios通用方法来发送
axios({
method: 'POST',
url: '/axios-server',
//url参数,传的是query类型参数,只是名字叫params
params:{
vip:9,
lebel:20
},
//头信息
Headers:{
height:100,
weight:300
},
//请求体参数
data :{
username: 'ttt',
password: '123'
},
}).then(response=>{
console.log('全部响应结果:',response);
console.log('响应状态码:', response.status);
console.log('响应状态字符串:',response.statusText);
console.log('响应头信息:', response.headers);
console.log('响应体:', response.data);
})
}
2.fetch发送AJAX请求
fetch()函数接收两个参数，第一个是url，第二个是可选的参数
btn.onclick = function () {
fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
method: 'POST',
headers: {
name: 'ttt'
},
body: 'username=admin&password=admin'
}).then((response) => {
return response.json(); //把json字符串转换为js对象
}).then(response => { //第二个then处理上一个返回的正确结果
console.log(response);
});
}
它传参直接在url里面传，使用fetch不用引入第三方库，使用不多
二、同源策略
同源策略：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。（ajax默认遵循同源策略）
server：
const express = require('express');
//创建应用对象
const app = express();
app.all('/home', (request, response) => {
response.sendFile(__dirname+'/index.html')
});
app.all('/data', (request, response) => {
response.send('用户数据')
});
app.listen(9000,()=>{
console.log('9000端口已启动')
})
神奇的是在vscode打开html和输入网址127.0.0.1：9000/home得到的页面是一样的
现在我们设计一个按钮点击获取用户信息，页面是从127.0.0.1:9000来的，数据也是从9000来的，所以他们是同源的
<button>点击获取用户数据</button>
<script>
const btn=document.querySelector('button')
btn.onclick=function(){
const x=new XMLHttpRequest()
x.open("GET",'/data')
//因为是满足同源的，所以可以简写url
x.send()
x.onreadystatechange=function(){
if(x.readyState==4){
if(x.status>=200&&x.status<300)
{
console.log(x.response)
}
}
}
}
</script>
而且这个时候我再从vscode打开html是传不到数据的
三、jsonp
是一个非官方的跨域解决方案，仅支持get请求，靠借助script标签工作
1.原生jsonp
它返回的东西只认识js代码，而且返回的是一个函数调用，返回的函数实参就是我们想要给客户端返回的数据，那个函数必须得提前声明
现在我们来做一个：设计一个用户名框，丧失焦点的时刻向服务端发送请求，对用户名做一个是否存在的检测（不是真的检测）
server：
app.all('/check-username', (request, response) => {
const data={
exist:1,
msg:'用户名已经存在'
};
let str=JSON.stringify(data)
response.send(`handle(${str})`);
});
html：
用户名：<input type="text" id="username">
<p></p>
<script>
const input=document.querySelector('input')
const p=document.querySelector('p')
//提前声明handle
function handle(data){
input.style.border="solid 1px red"
p.innerHTML=data.msg;
}
input.onblur=function(){
//获取用户名
let username=this.value
//检测用户名是否存在
//1.先创建script
const script=document.createElement('script')
script.src='http://127.0.0.1:8000/check-username'
//将它插入文档中
document.body.appendChild(script)
}
</script>
得先声明handle函数，然后创建script标签，利用它的src属性请求数据。
2.JQuery发送jsonp请求
点击按钮在div里呈现数据
app.all('/jquery-jsonp-server', (request, response) => {
const data={
name:'atguigu',
city:'bj'
};
let str=JSON.stringify(data)
let cb=request.query.callback
//url后面传的 ？会带回来一串字符串，赋值给cb
response.end(`${cb}(${str})`);
});
<button>点击发送jsonp请求</button>
<div id="result"></div>
<script>
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
console.log('hh')
})
})
</script>
四、CORS
官方的跨域解决方案，支持get和post，完全在服务器处理
app.all('/cors-server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
response.setHeader('Access-Control-Allow-Method','*')
//response.send('hello cors')
//const data={name:'尚硅谷'}
});