js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言
关于纯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);
}
原生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跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求相关推荐
- 封装一个自己的通用Ajax
一个简单的Ajax请求 首先在封装一个自己的ajax函数之前,我们需要先知道怎么实现一个简单的ajax请求. 这里我建了两个文件,ajax01.html和ajax01.php ajax01.html代 ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
- 原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
- 类似ajax封装函数,JS 封装一个async式的AJAX函数
其实也没什么,就是用上ES7的异步函数,让ajax使用起来更方便.这个方便主要是体现在:无回调 & 无then链式 & 轻松收集异常. 大致分3步: 1.封装API类(这步不用异步函数 ...
- uniapp封装网络请求_八张图带你走进“通过一个完美请求封装一个网络模块”
本文提供视频课程讲解,需要的小伙伴可以点赞+私信''网络模块''前往领取 学习大纲 1.网络模块在应用中的地位 1.1当今占统治地位的网络组件 OKHttp OkHttp 是一个相对成熟的解决方案,据 ...
- js清空文本框的值_一个Vue.js实例控制字变大变小,含样式操作,flex布局。「603」...
这是一个用vue.js对css操作完成的实例. 当然用了flex简单布局. 一.先创建一个html文件,记得添加vue库文件. 二.创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值te ...
- vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?
1,新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端:查看 –> 集成终端 或者直接按 ctrl+\ ` 如果没有安装vue-cli,在终端输入: ...
- axios请求封装与开发环境proxyTable代理
axios请求封装与开发环境proxyTable代理详解 一.axios请求封装 1. axios安装与使用 1.1 安装 1.2 引入 1.3 环境切换 1.4 设置请求超时 1.5 请求头设置 1 ...
- RN 封装 Android原生组件
RN 封装 Android原生组件 背景 当在React Native暂时未提供部分原生功能或者模块,我们需要复用部分原生代码时,比如复用一个原生方法,此时就需要将原生方法进行封装,暴露出一个接口来让 ...
最新文章
- CardView的那点事儿
- 设计模式-由浅到深的单例模式
- Oracle导入导出数据
- Django模型层的多表操作(2)
- oracle未找到时区,Oracle ADF 未找到时区错误
- dom内容区域的滚动overflow,scroll
- 去哪儿-06-home-ajax
- NginX下Openssl的构建和部署数字证书,支持HTTPS
- c语言制表符号大全,C语言指令表与符号表;
- 正则表达式-验证带千分号的,带任意位小数的数字类型
- 6 云计算系列之Nova安装与配置
- 1. PSR-1 --- 基本代码规范
- 使用OpenCV进行图片模糊处理(中值滤波)
- AI 隐身术,能让物体在视频中消失的魔法
- IJCAI 2022奖项公布:3篇杰出论文,南加大、耶拿大学等机构在列
- bat批处理删除日志文件
- vs+qt 设置应用程序图标
- php js sdk 签名算法,签名算法 · PAYJS API 开发文档
- Win7远程连接问题:凭据不工作 没有授权此用户账户
- Eclipse运行jsp文件,发现页面无法访问!
热门文章
- 获取当前元素是第几个点击值
- 用js的document.write输出的广告无阻塞加载的方法(转)
- Windows Server 8 Tips (二) Hyper-V 3:用PowerShell导出和导入虚拟机
- Linux的远程登陆
- 《WinForm开发系列之控件篇》Item31 MenuStrip(暂无)
- 分布式红锁的waitTime的设计原理
- python 线程锁_Python多线程-线程锁
- mysql企业版功能列表_大型企业数据库服务首选,AliSQL这几大企业级功能你了解几个?...
- 小车自动往返工作原理_请把小车自动往返控制线路的工作原理描述一下。
- java apache.poi_Java利用apache的POI操作Excel