1.安装express创建服务器端
npm i express
const express =require("express") //引入
const ex=express()//创建应用对象
//创建路由规则,request是对请求报文的监听,response是对响应报文的监听
ex.get('/',(request,response)=>{
//设置响应头,允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send("hello")
})
ex.listen(8000,()=>{//监听8000端口,有人访问就将“hello”发送给她
console.log("服务器已经启动,8000端口监听中。。。")
})
2.发送AJAX请求
发送请求需要用到XMLHttpRequest对象。这个状态有五个readystate,分别:
0:最初始的状态
1:open()方法调用
2:send()方法调用
3:服务器有返回结果
4:服务器返回全部结果
<script>
const btn=document.querySelectorAll("button")
const inp=document.querySelectorAll("input")
btn[0].addEventListener('click',function(){
const xhr=new XMLHttpRequest()
xhr.open("GET","http:127.0.0.1:8000/")
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
console.log(xhr.status)//状态码200
console.log(xhr.statusText)//状态字符串ok
console.log(xhr.getAllResponseHeaders)//整个响应头
console.log(xhr.response)//响应体""hello AJAX"
//修改页面,页面不会刷新
inp[0].value=xhr.response
}
}
}
})
</script>
3.设置请求体内容:post请求,可以带参数
send的参数内容为请求体
服务器端要有 对应处理post请求的。
4.设置请求头内容:一般关于用户的身份校验放在请求头
此时后台需要做响应的响应处理
5.接收服务器的json数据
只能传输字符串和buffer内容,所以需要把json对象转换成string(JSON.stringify )
在客户端,需要把字符串重新转换成json,两种方式:手动、自动
手动:
自动:
6.为解决IE缓存问题(发送的请求与之前一样,则会将之前缓存的数据拿出来用,而不会再次联系服务器发数据),需要给请求地址加上当前时间的时间戳
7.超时和网络异常的处理
8.手动取消请求
9. 解决请求重复发送问题(设置标识变量)
10.发送AJAX请求的方式:jQuery、axios、fetch
11.解决跨域问题
1)JSONP,只支持get请求。利用script标签的跨域能力来发送请求的。
利用前端的函数,将参数返回,并在前端做处理:
2)CORS,支持get、post
12.源码在B站视频