ajax主要用于无刷新获取数据
优缺点：
优点：无需刷新页面与服务器端实现通信。 允许根据用户事件来更新部分页面内容(局部刷新); 缺点： 没有浏览历史，不可回退 存在跨域问题 seo不友好(搜索引擎搜索不到关键字)
1.创建ajax对象
//可以在点击事件里面创建 const xhr=new XMLHttpRequest();
2.发送请求
//请求方法 第一个参数 请求方式第二个是请求路径 //初始化请求 //同源策略可以省略协议和域名，发送时会自动添加上 //xhr.open('GET','/server'); xhr.open('GET','http://127.0.0.1:8000/server'); //发送请求 xhr.send(); //on 当 //readystate是xhr对象的属性，表示状态的意思，有五个值 //change 改变的意思 //0：未初始化 1：open方法调用完毕 2：send方法调用完毕 3：服务端返回了部分的结果 4：服务端返回所有结果 //会触发四次 xhr.onreadystatechange=function(){ //当结果全部返回的时候且状态码为200 if(xhr.readyState===4&&xhr.status===200){ console.log(xhr.status) //状态码 console.log(xhr.statusText)//状态码字符串 console.log(xhr.getAllResponseHeaders()) //所有响应头 console.log(xhr.response) //所有响应体 } }
3.get请求参数
//?号后面写参数 用&符号分隔 键值对方式 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.onerror=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协议 www.xxx.com 域名 ip地址不好记，所以都解析成一个域名 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 <script src='./a.js'></script> 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是通过回调函数的方式实现的跨域 function hand(data){ //服务端返回数据 console.log(data) } <script src='URL'></script>
jquery发送jsonp请求
//路径后面跟?callback=?是固定写法,必写 第二个参数是服务器返回参数 $.getJSON('URL?callback=?',function(data){ console.log(data) })
//服务端获取 请求.query.带过来函数名 let cb= request.query.callback; res.send(`${cb}(${str})`)
CORS跨域
//cors是什么？ CORS是跨域资源共享。CORS是官方解决跨域方案，不需要在客户端作任何特殊操作，完全在服务器中处理，支持get和post,其他请求支持。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。 //cors原理 CORS通过响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应就会对响应放行。
CORS实现
//固定写法 返回响应头 *是所以都可访问 response.setHeader('Access-Control-Allow-Origin','*'); //请求头信息自定义 response.setHeader('Access-Control-Allow-Headers','*'); //请求方法自定义 response.setHeader('Access-Control-Allow-Method','*'); //单独设置 response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:9000');
