您的位置:首页 > Web前端 > JavaScript

原生js封装ajax,实现跨域请求

2016-06-12 18:16 706 查看

描述:

需要ajax跨域请求,用cors跨域方案。
服务端设置:

header('Access-Control-Allow-Origin: http://front.ls-la.me'); header('Access-Control-Allow-Headers: X-Requested-With');


设置了:

后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式

var ajaxHdFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
var resJson = JSON.parse(xhr.responseText)
cb(resJson);
}
};
xhr.open("post", uri, true);
xhr.setRequestHeader("DeviceCode", "56");
xhr.setRequestHeader("Source", "API");
xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
var dataStr = '';
for (var i in data) {
if (dataStr) {
dataStr += '&';
}
dataStr += i + '=' + data[i];
}
xhr.send(dataStr);
};


跨域相关内容

CORS跨域的常见问题以及前后端的设置:

《Ajax——CORS跨域调用REST API 的常见问题以及前后端的设置》

data = JSON.stringify(data);
xhr.setRequestHeader("Content-Type","application/json");


这样设置,可以直接传json字符串给后端。后端也要做相应处理。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: