if(xhr.readyState=4&&xhr.status=200){
console.log(xhr.status) //状态码
console.log(xhr.statusText)//状态码字符串
console.log(xhr.getAllResponseHeaders()) //所有响应头
console.log(xhr.response) //所有响应体
}
}
//?号后面写参数 用&符号分隔 键值对方式
xhr.open(‘GET’,‘http://127.0.0.1:8000/server?a=100&b=200’);
//可以在 query String Parameters 里面做一个请求参数预览
4.post请求发送
//请求方式都为大写
xhr.open(‘POST’,‘http://127.0.0.1:8000/server’);
//send里面不仅仅可以发送请求，还可以携带参数发送
xhr.send(‘a=100&b=200’)
5.设置请求头信息
//一般采用预定义请求头信息，如果需要设置自定义请求头则需要在服务器端开启允许设置自定义请求头
//content-type 是设置请求体内容类型 固定写法
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
//自定义请求头信息
//需要在后端开启允许设置自定义请求头
//第一个参数是name 第二个是值
xhr.setRequestHeader(‘name’,‘1’);
6.对返回json参数进行操作
//后端不支持接受对象，所以采用发送字符串的方式
//可以调用json方法
//对返回的参数进行操作
JSON.parse(参数)
//设置对json数据自动转换
设置响应体数据类型
xhr.responseType=‘json’;
BUG ie缓存问题
//问题：ie浏览器，发送请求会存在缓存，下次请求新的数据返回但还是旧的数据
//解决方案：可以在接口请求参数后面添加当前时间戳 Date.now()
xhr.open(‘POST’,'http://127.0.0.1:8000/server?t='Date.now);
7.超时与网络异常响应
//用于网络请求超时和网络异常给用户的提醒比较友好
//请求超过2秒就自动取消
xhr.timeout=2000;
//超时回调
xhr.ontimeout=function(){
alert(‘网络超时’)
}
//网络异常操作
xhr.οnerrοr=function(){
alert(‘网络异常’)
}
8.手动取消请求
//取消请求
xhr.abort();
重复发送问题解决
//可以通过标识变量进行判断，发送请求改成false，发送成功在改回true
//也可以通过判断标识是否取消请求
以上是原生发送的请求，下面介绍的是前端常用框架发送请求
第一个框架：jquery 基于回调函数进行发送请求
//第一个是路径 第二个是数据 第三个是回调函数 第四个是设置响应体方法
//get请求
$.get(‘http://127.0.0.1:8000/jquery’,{a:100},function(res){
console.log(res)
},‘json’)
//post
$.post(‘http://127.0.0.1:8000/jquery’,{a:100},function(res){
console.log(res)
})
//jquery通用方法 post还可以设置请求体
$.ajax({
//url
url:‘http:127.0.0.1/scfe’,
//类型
type:‘GET’,
//请求头信息
headers:{
a:100,b:200
},
//响应体结果类型
dataType:“json”,
//数据
data:{},
//成功回调
success:function(){},
//超时时间
timeout:2000,
//失败回调
error:function(){}
})
Axios 库发送ajax请求，是目前最为热门的，是vue和react最为推荐的
基于promise发送请求
可以安装也可以在线链接引用
npm i axios
配置baseURL
axios.defaults.vaseURL=‘http://127.0.0.1:8000’;
//配置过后，axios请求每次都会在前面加上这个，后面直接写接口名称就行
发送请求
//get请求 第一个参数是url 第二个是data
axios.get(‘/server’,{
//url参数
params:{
a:100,b:200
},
//请求头信息
headers:{
name:‘100’,
age:‘200’
}
//.then查看是否发送成功
}).then(res=>{
console.log(res)
})
//post发送请求 第一个路径 第二个请求体 第三个其他选项
axios.post(‘/server’,{user:“112”,age:“21”},{
//url参数
params:{
a:100,b:200
},
//请求头信息
headers:{
name:‘100’,
age:‘200’
}
//.then查看是否发送成功
}).then(res=>{
console.log(res)
})
//通用性方法发送请求
axios({
//请求方法
method:“POST”,
//url
url:“/sert”,
//url参数
params:{
user:‘huhu’,
age:“dd”
},
//请求头信息
headers:{
a:100,
b:200
},
//请求体信息
data:{
a:1,
b:2
}
}).then(res=>{
console.log(res)
})
ferch（）函数发送ajax请求,返回一个promise对象
//第一个参数是url 第二个是配置对象
fetch(‘http://127.0.0.1:8000/sever’,{
//请求方法
method:‘POST’,
//请求头
headers:{
name:111
},
//请求体
body:‘user=1&age=2’
}).then((res)=>{
console.log(res)
//解析成json
res.json()
})
AJAX跨域
跨域首先要了解同源策略
同源策略是浏览器的一种安全策略
同源：协议，域名，端口号三者必须完全相同
http协议
8000端口号，一般都是省略的
http://www.baidfcvsad.com:8000
ajax是默认遵循同源策略的，不遵循同源策略，无法直接发送ajax请求
跨域：违背同源策略就是跨域
跨域是经常出现的，因为一台服务器的性能是有限的，所以有需要的时候需要多台服务器去支撑
不是同源策略无法直接发送ajax请求
同源策略可以省略协议和域名，发送时会自动添加上
JSONP解决跨域
ctrl+f5 强制刷新
//JSONP是非官方得跨域解决方案，是程序员发明的一种方法，仅仅支持get请求。
JSONP原理：网页中有一些标签天生具有跨域能力，如：script,link,img,iframe,JSONP是通过script标签的跨域能力来发送请求的。
JSONP的使用：
1.动态创建一个script标签
var script=document.createElement(‘script’);
2.设置script的src，设置回调函数
script.src=‘http://127.0.0.1:8000/text?callback=abc’
3.将script标签插入到document文档最后
document.body.appendChind(script)
实现原理
//a.js
const data={
name:‘王菜菜’
}
console.log(data)
abc(data)
//b.js
function abc(data){
console.log(data)
}
//这里运行b.js文件能打印出来data,这里的srcipt的scr路径为http协议开头，可以通过创建一个script文件发送请求，实现跨域
//不过仅仅支持get请求
//这俩个文件是互通的b.js文件的内容,a.js文件也可以访问
//JSONP的数据，是一个函数调用的内容，也就是一段js代码，这样浏览器引擎才能解析和执行该内容
//JSON数据格式可以通过函数携带json格式返回
//app.js
const data={
name:“王菜菜”
}
let str=JSON.stringify(data)
handle(handle(${str}))
//index.js
index通过script的src发送get请求，返回数据并接受
function handle(data){
console.log(data)
}
//函数的实参就是返回给客户端的数据，函数必须提前声明
实际实现
//a.js 接口
app.all(‘/st’,(request,res)=>{
const data={
name:‘王菜菜’
}
})
let str=JSON.stringify(data);
res.send(hand(${str}))
index.js
jsonp首先得定义函数，接受函数，因为jsonp是通过回调函数的方式实现的跨域
因篇幅问题不能全部显示，请点此查看更多更全内容