原生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博客文章底部和右侧广告记得有空帮忙点击一下哦~~
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求相关推荐
- js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
- 封装一个自己的通用Ajax
一个简单的Ajax请求 首先在封装一个自己的ajax函数之前,我们需要先知道怎么实现一个简单的ajax请求. 这里我建了两个文件,ajax01.html和ajax01.php ajax01.html代 ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
- ajax_post什么意思,求一个纯js 发起ajax post请求的例子 还有post请求的参数 有什么要注意的？？？...
求一个纯js 发起ajax post请求的例子 还有post请求的参数 有什么要注意的??? var xmlhttp; function Button1_onclick() { var name = ...
- 类似ajax封装函数,JS 封装一个async式的AJAX函数
其实也没什么,就是用上ES7的异步函数,让ajax使用起来更方便.这个方便主要是体现在:无回调 & 无then链式 & 轻松收集异常. 大致分3步: 1.封装API类(这步不用异步函数 ...
- Ajax基本请求方式及其跨域请求
1.Ajax异步刷新 Ajax的工作流程 Jsp页面通过js向服务器(servlet)发送请求获取到数据,将数据获取到js中,js将数据显示到jsp页面中(document来操作element),最后 ...
- RN 封装 Android原生组件
RN 封装 Android原生组件 背景 当在React Native暂时未提供部分原生功能或者模块,我们需要复用部分原生代码时,比如复用一个原生方法,此时就需要将原生方法进行封装,暴露出一个接口来让 ...
- 「跨域」利用node.js实践前端各种跨域方式（上）
前言 常言道,"读万卷书,不如行万里路".技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着 ...
- 封装和解封装、跨层封装
封装和解封装 我们一般把数据从应用层开始到数据链路层的加工过程称为封装,反过程称为解封装 封装 - 将每一层最重要的数据添加到原始数据当中,来实现这一层的功能. 应用层 - 应用需要进行封装,但是,封 ...
最新文章
- Druid连接池一个设置引发的血案
- 用Kotlin开发android平台语音识别语义理解应用
- 为什么使用Spring的@autowired注解后就不用写setter了
- 一起学nRF51xx 18 - 蓝牙协议栈烧录
- Iperf源代码分析（八）
- C# 数据结构 之 堆栈和队列
- sympy科学计算器
- C++之泛型编程（模板）
- 用递归将嵌套的JSON对象遍历出来，转为二维数组
- Node.js 非阻塞的 Sleep 要怎么写 ?
- 【深入浅出通信原理-学习笔记】信道
- Eclipse SVN 项目后转换成Maven项目
- 【HDU 5145】 NPY and girls（组合+莫队）
- 中国电信5G定制网产品要点
- Ubuntu 14.04 安装配置 JDK8
- 《深入理解计算机系统》实验二Bomb Lab下载和官方文档机翻
- 混合App WebView自动化测试
- 微信图片分享支持url，缩略图支持url
- Java输出水仙花数
- 【前端页面缓存技术方案】