原生 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的主要内容,如果未能解决你的问题,请参考以下文章

Dmarc指定外域邮箱接收报告

网易免费邮箱开放搜索引擎外域登录

Eloquent 自定义关系 hasMany(外域包含由外键连接的文本)

解决nginx跨域问题

在任何扩展中显示 K2 外场

Ajax_原生ajax写法理解异步请求js单线程+事件队列封装原生ajax