原生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字符串给后端。后端也要做相应处理。
相关文章推荐
- js console对象
- java web后台数据传入前台javascript处理
- 用JS获取地址栏参数的方法
- JAVASCRIPT this关键字详解
- MyEclipse 2016 CI 3带来全新升级的JavaScript代码工具——JSjet
- Extjs3+sea.js 实现模块化
- [置顶] javascript理解之变量作用域与闭包
- 《JavaScript详解》学习笔记
- JavaScript解八皇后问题的方法总结
- JavaScript 严格模式(use strict)
- Imooc·Java高并发秒杀API(JavaScript模块化)
- js方法控制html表格的增加和删除
- Ext Js MVC系列一 环境搭建和MVC框架整体认识
- Loadrunner模拟JSON接口请求进行测试
- js运行上下文
- js到底是个啥?
- JavaScript中实现键值对应的字典与哈希表结构的示例
- jsp开发模式
- JS中常用的输出方式(五种)
- Sublime Text3 js语法错误提示