原生 ajax
Posted auserroot
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生 ajax相关的知识,希望对你有一定的参考价值。
Ajax
原生写法
// ajax
// 步骤:创建 ajax 实例
let xhr = new XMLHttpRequest()
console.dir(xhr) //打印 xhr 对象
let res = undefined // 保存响应
// 建立链接
// xhr.open(method,url,isasync)//方法 地址 是否异步
xhr.open('get','./1.json',true) //get 请求
//设置请求头
//xhr.setRequestHeader(header,value) //可自定义 默认 '*/*'
xhr.setRequestHeader('Access-Control-Allow-Origin','*')
xhr.timeout = 1000 //设置请求超时时长 可不设置 (仅异步请求支持)
//监听状态变化
xhr.onreadystatechange = ()=>
//获取状态
if(xhr.readyState === 4)
xhr.status >= 200 && xhr.status <= 300&&(res = xhr.responseText ,console.log(res))
//请求完成处理
xhr.onload = (res)=>
console.log(res)
//请求超时处理
xhr.ontimeout = ()=>
console.log('超时')
//发送 请求
xhr.send()
//终止请求
//xhr.abort()
promise 写法:
//定义 ajax 给定参数 请求方法 请求地址
const _ajax = (method,url)=>
//创建 promise 实例
let req = new Promise((reslove,reject)=>
//接下来是原生 ajax 操作
let xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.onreadystatechange = ()=>
if(xhr.readyState === 4)
xhr.status >=200 && xhr.status <300 ? reslove(xhr.responseText) : reject(xhr.responseText?xhr.responseText:'error')//请求成功 将响应给 reslove 失败 则给 reject (若失败无响应则直接抛错或给出响应提示)
xhr.send()//发送请求
)
return req //返回promise实例
//测试
_ajax('get','./1.json').then((res)=>
console.log(res)
).catch((reason)=>
console.log(reason)
)
注意:
- 请求外域 需做跨域处理
- 请求可能触发 302 重定向 会导致部分请求无法正常获取响应 需要做拦截
- 关于违反同源策略导致跨域 解决方法有很多 常用的一般就是 nginx 反向代理、 jsonp 、ws协议(webSocket)等 前端方法,后端常用的是添加允许跨域的请求头
以上是关于原生 ajax的主要内容,如果未能解决你的问题,请参考以下文章