如何⽤原⽣js写Ajax请求？
如何⽤原⽣js写Ajax？
我们在node.js配置的服务器
// 创建应⽤对象
const app =express();
// 创建路由规则
<('/lb',(request,response)=>{
// 设置允许跨域
response.header("Access-Control-Allow-Origin","*");
// 请求响应
response.send('hello express 11111')
})
app.all('/lb',(request,response)=>{
// 设置允许跨域
response.header("Access-Control-Allow-Origin","*");
// 响应头，允许接受所有请求头信息
response.header("Access-Control-Allow-Headers","*");
// 请求响应
response.send('hello express post')
})
// 服务器监听
app.listen(8000,()=>{
console.log('服务器已经启动....')
})
我们客户端通过绑定按钮点击事件来请求Ajax
<body>
<button>点击发送get</button>
<button>点击发送post </button>
<div>
</div>
<script>
let btn =ElementsByTagName('button')[0]
//绑定点击事件触发请求
btn.addEventListener('click',function(){
//1.创建对象
let xhr =new XMLHttpRequest()
//2.初始化设置请求⽅法和url
xhr.open('GET',url地址,false)
//3.发送,send() ⽅法可将请求送往服务器。
xhr.send()
//4.事件绑定处理服务器端返回的结果,onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执⾏。
//readystate是xhr对象中的⼀个属性，存有服务器响应的状态信息，它的值状态分为0 1 2 3 4
//0: 请求未初始化（代理被创建，但尚未调⽤ open() ⽅法）
原生js和js的区别
//1: 服务器连接已建⽴（open⽅法已经被调⽤）
//2: 请求已接收（send⽅法已经被调⽤，并且头部和状态已经可获得）
//3: 请求处理中（下载中，responseText 属性已经包含部分数据）
//4: 请求已完成，且响应已就绪（下载操作已完成）
//判断，当服务器返回所有结果时，也就是状态码等于4
adyState===4){
//判断响应码状态，⼀般2xx，2开头的响应码都是成功的
if(xhr.status>=200&&xhr.status<300){
//处理结果⾏头空⾏体
//1.响应⾏
console.log(xhr.status)//状态码
console.log(xhr.statusText)//状态字符串
console.AllResponseHeaders())//所有响应头
console.sponse)//响应体，服务器端响应的数据
}
}
}
},false)
// post请求
btn1.addEventListener('click',function(){
//1.创建对象
let xhr =new XMLHttpRequest()
/
/2.初始化设置请求⽅法和url
xhr.open('POST','127.0.0.1:8000/lb')
// 添加http头，post请求发送信息⾄服务器时定义内容编码类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//，如果要配置⾃定义请求头，服务器端的配置的post请求⽅式要改为all，并在服务器端配置配置允许所有请求头信息，
xhr.setRequestHeader('name','liubin')
//3.发送,send() ⽅法可将请求送往服务器。post得请求参数可放在send⾥⾯
xhr.send('a=1&b=2')
// 设置响应体得类型
/
/4.事件绑定处理服务器端返回的结果,onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执⾏。
// 响应超时设置
xhr.timeout=2000
// 响应超时得回调
console.log('你的响应超时')
}
// ⽹络异常回调
console.log('你的⽹络开⼩差了')
}
//判断，当服务器返回所有结果时，也就是状态码等于4
adyState===4){
//判断响应码状态，⼀般2xx，2开头的响应码都是成功的
if(xhr.status>=200&&xhr.status<300){
//处理结果⾏头空⾏体
//1.响应⾏
console.log(xhr.status)//状态码
console.log(xhr.statusText)//状态字符串
console.AllResponseHeaders())//所有响应头
console.sponse)//响应体，服务器端响应的数据
}
}
}
},false)
</script>
</body>
代码注释：
1.open(method, url, async) 初始化设置请求⽅法和url
open⽅法需要三个参数:
①⽆法使⽤缓存⽂件（更新服务器上的⽂件或数据库）
②向服务器发送⼤量数据（POST 没有数据量限制）
③发送包含未知字符的⽤户输⼊时，POST ⽐ GET 更稳定也更可靠
2.url：规定服务器端脚本的 URL(该⽂件可以是任何类型的⽂件，⽐如 .txt 和 .xml，或者服务器脚本⽂件，⽐如 .asp 和 .php （在传回响应之前，能够在服务器上执⾏任务）)；
3.async：规定应当对请求进⾏异步（true）或同步（false）处理；true是在等待服务器响应时执⾏其他脚本，当响应就绪后对响应进⾏处理；false是等待服务器响应再执⾏。可以省略这个参数。
2.send() ⽅法可将请求送往服务器。
在post的请求中，我们可以在send(‘a=1’)来携带请求参数
onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执⾏。
1. readyState：存有服务器响应的状态信息。
0: 请求未初始化（代理被创建，但尚未调⽤ open() ⽅法）
1: 服务器连接已建⽴（open⽅法已经被调⽤）
2: 请求已接收（send⽅法已经被调⽤，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）
4.Ajax的其他配置
1. setRequestHeader()：POST传数据时，⽤来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上
就可以，⽐如url?a=a1&b=b1
// 添加http头，post请求发送信息⾄服务器时内容编码类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2. timeout来设置响应超时
// 响应超时设置
xhr.timeout=2000
3. ontimeout响应超时得回调
// 响应超时得回调
console.log('你的响应超时')
}
4. onerror⽹络异常得回调
// ⽹络异常回调
console.log('你的⽹络开⼩差了')
}
5. responseType设置返回数据类型
// 设置响应体得类型
5.如何在响应之前终⽌请求
可以通过绑定事件来触发abort()⽅法
//可以写在事件回调函数内部，通过实例化的同⼀个对象调⽤abort（）
xhr.abort()
Ajax的原理：
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤javascript来操作DOM⽽更新页⾯。这其中最关键的⼀步就是从服务器获得请求数据。
XMLHttpRequest 是 ajax 的核⼼机制，它是在 IE5 中⾸先引⼊的，是⼀种⽀持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，⽽不阻塞⽤户，达到⽆刷新的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。