码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-12 20:08:21      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:

描述:

需要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 的字符串格式

 1 var ajaxHdFn = function(uri, data, cb) {
 2   var getXmlHttpRequest = function() {
 3     if (window.XMLHttpRequest) {
 4       //主流浏览器提供了XMLHttpRequest对象
 5       return new XMLHttpRequest();
 6     } else if (window.ActiveXObject) {
 7       //低版本的IE浏览器没有提供XMLHttpRequest对象
 8       //所以必须使用IE浏览器的特定实现ActiveXObject
 9       return new ActiveXObject("Microsoft.XMLHttpRequest");
10     }
11 
12   };
13   var xhr = getXmlHttpRequest();
14   xhr.onreadystatechange = function() {
15     console.log(xhr.readyState);
16     if (xhr.readyState === 4 && xhr.status === 200) {
17       //获取成功后执行操作
18       //数据在xhr.responseText
19       var resJson = JSON.parse(xhr.responseText)
20       cb(resJson);
21     }
22   };
23   xhr.open("post", uri, true);
24   xhr.setRequestHeader("DeviceCode", "56");
25   xhr.setRequestHeader("Source", "API");
26   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
27   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
28   var dataStr = ‘‘;
29   for (var i in data) {
30     if (dataStr) {
31       dataStr += ‘&‘;
32     }
33     dataStr += i + ‘=‘ + data[i];
34   }
35   xhr.send(dataStr);
36 };

 

跨域相关内容

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

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

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

标签:

原文地址:http://www.cnblogs.com/woodk/p/5577938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!