博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生js封装ajax,实现跨域请求
阅读量:7009 次
发布时间:2019-06-28

本文共 1533 字,大约阅读时间需要 5 分钟。

描述:

需要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.responseText19       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跨域的常见问题以及前后端的设置:

 

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

这样设置,可以直接传json字符串给后端。后端也要做相应处理。

转载地址:http://hmttl.baihongyu.com/

你可能感兴趣的文章
TP框架在做上传时候提示:没有上传的文件!
查看>>
leetcode 485. Max Consecutive Ones
查看>>
IDEA使用笔记(九)——设置文件注释
查看>>
漫谈Java IO之基础篇
查看>>
CentOS 6.8 防火墙配置
查看>>
Spring Boot 2.0 整合 FreeMarker 模板引擎
查看>>
Java 知识点
查看>>
Nginx+Tomcat高性能负载均衡集群搭建
查看>>
BZOJ3573: [Hnoi2014]米特运输(树上乱搞)
查看>>
Dubbo的一些编码约定和设计原则
查看>>
IDA 操作记录
查看>>
告警系统需求分析 告警系统主脚本 告警系统配置文件 告警系统监控项目
查看>>
JavaServer Faces (JSF) with Spring
查看>>
知物由学 | 这些企业大佬如何看待2018年的安全形势?
查看>>
[转]Mongodb的下载和安装
查看>>
usb_submit_urb
查看>>
【MVC】View的使用
查看>>
5个强大的Java分布式缓存框架推荐
查看>>
Redis存储AccessToken
查看>>
微信的NATIVE支付提示201商户订单号重复的解决方案
查看>>