封装一个原生js的ajax请求,支持IE9CORS跨域请求

栏目: jQuery · 发布时间: 5年前

内容简介:关于纯js的ajax请求,我之前有文章写过,在IE中存在一个已经废弃了的属性XDomainRequest,这个属性在IE8和IE9中运行良好。方法如下:

前言

关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https://www.haorooms.com/post/cors_requestheaders, 但是在IE8和IE9中,cors跨域是无效的。针对这个,其实IE有个另类的CORS请求,仅仅在IE8和IE9中存在,IE10就废弃了,假如你要兼容IE8和IE9,那么这个属性就用到了。

IE8和IE9的 XDomainRequest

在IE中存在一个已经废弃了的属性XDomainRequest,这个属性在IE8和IE9中运行良好。

方法如下:

if(window.XDomainRequest){
  var xdr = new XDomainRequest();

  xdr.open("get", "http://www.haorooms.com/api/method");

  xdr.onprogress = function () {
    //Progress
  };

  xdr.ontimeout = function () { 
    //Timeout
  };

  xdr.onerror = function () { 
    //Error Occurred
  };

  xdr.onload = function() {
    //success(xdr.responseText);
  }

  setTimeout(function () {
    xdr.send();
  }, 0);
}

文档请看: https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest

原生js的ajax请求,

// 因为要兼容IE8和IE9,这里就不用Promise了,因为用了之后babel打包瞬间变大
// 创建请求对象
function CreateRequest() {
  try {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest()
    } else if (window.ActiveXObject) {
      return new ActiveXObject('Microsoft.XMLHTTP')
    }
  } catch (e) {
    console.log(e)
  }
  return null
}
// IE9及IE8不支持CORS跨域请求,针对IE9和IE8做请求兼容
function IE89Request(request) {
  if (IsEmptyObject(request)) {
    return
  }
  request.Method = request.Method == undefined ? 'GET' : request.Method
  if (StringIsNullOrEmpty(request.Url)) {
    return
  }
  if (window.XDomainRequest) {
    var xdr = new XDomainRequest()
    xdr.open(request.Method, request.Url)
    xdr.onerror = function () {
      if (request.ErrorCallback != undefined && typeof (request.ErrorCallback) == 'function') {
        request.ErrorCallback('XDomainRequest error')
      }
    }
    xdr.onload = function() {
      // console.log(xdr.responseText)
      try {
        if (request.SuccessCallback != undefined && typeof (request.SuccessCallback) == 'function') {
          var json = JSON.parse(xdr.responseText)
          request.SuccessCallback(json, xdr)
        }
      } catch (e) {
        // console.log(e, '进入请求error')
        if (request.ErrorCallback != undefined && typeof (request.ErrorCallback) == 'function') {
          request.ErrorCallback(e)
        }
      }
    }
    setTimeout(function () {
      xdr.send(request.Data)
      return xdr
    }, 0)
  }
}

// 数据请求函数封装
function Request (request) {
  if (IsEmptyObject(request)) {
    return
  }
  // 初始化请求属性
  request.Method = request.Method == undefined ? 'GET' : request.Method
  if (StringIsNullOrEmpty(request.Url)) {
    return
  }
  // 默认异步请求
  request.Async = request.Async == undefined ? true : request.Async
  request.Headers = request.Headers == undefined ? {} : request.Headers
  request.DataType = request.DataType == undefined ? 'json' : request.DataType
  request.ContentType = request.ContentType == undefined ? 'application/x-www-form-urlencoded' : request.ContentType
  request.Data = request.Data == undefined ? '' : request.Data
  var xmlHttp = null
  // 创建请求
  xmlHttp = CreateRequest()
  if (xmlHttp == null) {
    return
  }
  // 打开请求
  xmlHttp.open(request.Method, GetUrl(request.Url), request.Async)
  // 设置请求头信息
  xmlHttp.setRequestHeader('Accept', request.DataType)
  xmlHttp.setRequestHeader('Content-Type', request.ContentType)
  for (var key in request.Headers) {
    xmlHttp.setRequestHeader(key, request.Headers[key])
  }
  // 处理请求响应返回
  xmlHttp.onreadystatechange = function () {
    // readyState属性用来表示请求的状态,有5个可取值,分别是:
    // “0”:表示未初始化,即对象已经建立,但是尚未初始化(尚未调用open()方法);
    // “1”:表示正在加载,此时对象已建立,尚未调用send()方法;
    // “2”:表示请求已发送,即send()方法已调用;
    // “3”:表示请求处理中;
    // “4”:表示请求已完成,即数据接收完毕。
    if (xmlHttp.readyState == 4) {
      if (xmlHttp.status == 200) {
        if (request.SuccessCallback != undefined && typeof (request.SuccessCallback) == 'function') {
          var data
          if (request.DataType == 'json') {
            data = JSON.parse(xmlHttp.responseText)
          } else if (request.DataType == 'xml') {
            data = xmlHttp.responseXML
          } else {
            data = xmlHttp.responseText
          }
          request.SuccessCallback(data, xmlHttp)
        }
      } else {
        if (request.ErrorCallback != undefined && typeof (request.ErrorCallback) == 'function') {
          request.ErrorCallback(xmlHttp)
        } else {
          if (StringIsNullOrEmpty(xmlHttp.responseText)) {
            alert(xmlHttp.status + ':' + xmlHttp.statusText)
          } else {
            alert(xmlHttp.responseText)
          }
        }
      }
    }
  }
  // 发送请求
  xmlHttp.send(request.Data)
  return xmlHttp
}

// POST数据请求
function PostRequest (url, data, successCallback, errorCallback, asyncs) {
  var request = {}
  var xmlHttp = null
  request.Url = url
  request.Method = 'POST'
  request.Async = asyncs
  request.ContentType = 'application/json; charset=utf-8'
  request.Data = JSON.stringify(data)
  request.SuccessCallback = function (a, b) {
    request.IsCallback = true
    successCallback && successCallback(a, b)
  }
  request.ErrorCallback = function (a) {
    request.IsErrorCallback = true
    errorCallback && errorCallback(a)
  }
  if (IEVersion() == 8 || IEVersion() == 9) {
    xmlHttp = IE89Request(request)
  } else {
    xmlHttp = Request(request)
  }
  return xmlHttp
}

请求示例封装

export function api_haoroomsData(data, successCallback, errorCallback) {
  return PostRequest(baseUrl + 'haorooms/haoroomsAjaxtest', data, successCallback, errorCallback)
}

调用

let params = {name:'haorooms',value:'ajaxTest'}
api_haoroomsData(params, function(res){
 // 请求结果
}, funcrion(error){
// 错误结果
})

备注

上面封装中用到了一些方法,例如IEVersion(),判断IE版本,IsEmptyObject判断是否是空对象,StringIsNullOrEmpty空字符串

这里共享一下吧:

// IE浏览器版本判断
    export function IEVersion() {
      var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 // 判断是否IE<11浏览器
      var isEdge = userAgent.indexOf('Edge') > -1 && !isIE // 判断是否IE的Edge浏览器
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
      if (isIE) {
        var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
        reIE.test(userAgent)
        var fIEVersion = parseFloat(RegExp['$1'])
        if (fIEVersion == 7) {
          return 7
        } else if (fIEVersion == 8) {
          return 8
        } else if (fIEVersion == 9) {
          return 9
        } else if (fIEVersion == 10) {
          return 10
        } else {
          return 6// IE版本<=7
        }
      } else if (isEdge) {
        return 'edge'// edge
      } else if (isIE11) {
        return 11 // IE11
      } else {
        return -1// 不是ie浏览器
      }
    }

// 是否空对象
export function IsEmptyObject (obj) {
  if (obj === null || obj === undefined) {
    return true
  }
  if (typeof (obj) == 'object' && obj.length > 0) {
    return false
  }
  if (typeof (obj) == 'object') {
    var blExists = false
    for (var key in obj) {
      blExists = true
      break
    }
    return !blExists
  }
  return false
}

// 字符串去掉空格
export function StringTrim (str) {
  return (str === undefined || str === null) ? '' : str.replace(/(^\s*)|(\s*$)/g, '').replace(/(^ *)|( *$)/g, '')
}

// 字符串是否为空
export function StringIsNullOrEmpty(value) {
  return (value === null || value === undefined) || StringTrim(value.toString()) == ''
}

就到这里,haorooms博客文章底部和右侧广告记得有空帮忙点击一下哦~~


以上所述就是小编给大家介绍的《封装一个原生js的ajax请求,支持IE9CORS跨域请求》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解网络硬件

图解网络硬件

[日] 三轮贤一 / 盛荣 / 人民邮电出版社 / 2014-7 / 69.00元

本书详细介绍了计算机网络硬件的相关知识,在对硬件设备、相关技术及规范进行详尽考据和整理的同时,侧重工程实践,重点讲述了在实际网络建设工程中真实使用的网络硬件设备及其相关背景知识,能够帮助读者深入理解计算机网络在工程实践中某些容易混淆的概念,如L3交换机和路由器等。 本书在讲解的同时,还辅以丰富的图例,使计算机网络设备的真实情况一目了然,同时深入浅出地介绍了原本复杂抽象的计算机网络术语,因此对......一起来看看 《图解网络硬件》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具