描述:
需要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封装ajax,实现跨域请求的更多相关文章
-
原生JS实现Ajax的跨域请求
原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...
-
原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
-
原生JS封装Ajax插件(同域&;&;jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
-
原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
-
Ajax之跨域请求
一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个inde ...
-
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
-
jQuery的Ajax的跨域请求
今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...
-
Ajax和跨域请求
Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
-
【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案
先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下: public static void Register(Http ...
随机推荐
-
glade2支持C++代码的输出(1)
开发了一个基类,用于支持GTK2的信号回调 见BaseObject.zip 为了便于快速通过glade设计界面,并生成相应的C++代码,我对glade-2 2.12.2的代码进行了修改 原始代码:gl ...
-
闲扯json取值,联想map取值。
将list转json(list中的Bean的属性名称为变量,若为常量没必要采用此方式,直接转实体类即可) JSONArray json = JSONArray.fromObject(list); fo ...
-
《Code Complete》ch.29 集成
WHAT? 集成是这样一种软件开发行为:将一些独立的软件组合为一个完整的系统. WHY? 更容易诊断缺陷 尽早获得一个可工作的产品 更好的顾客关系 增强士气 更可靠地估计进度表 更准确的现状报告 HO ...
-
解决将/etc/passwd文件中1000改为0后只能guest进入系统的问题
一, 进入正题之前我先在这里介绍一下vi编辑器的几条主要的编辑命令,以为一会会用的到的.(悔不改当初没好好学unix啊啊啊) 最重要的一点是要知道vi编辑器分为编辑模式和命令模式,按esc键就能从编辑 ...
-
xshell 快速复制打开之前用过的ssh
有时候需要对一个ip地址的服务器进行多个操作,不在一个会话中,需要新建多个同样的会话 然后左键单击+号 出现一个新的会话 然后再右键单击+号 选择之前保存过的ip地址即可快速创建!
-
如何给Windows2016新建IIS并建立网站
首先在菜单按钮旁右击-----点击Control Panel(控制面板) 点击Turn Windows features on or off 开始设置环境!!!!! 认真勾选参数!!! 然后点击安装! ...
-
解决response.setHeader(";Content-disposition"; 中文乱码问题
Content-Disposition中文乱码 Response.setHeader(”Content-Disposition”, “attachment; filename=” + fileName ...
-
DBA 招聘
数据库管理员(资深) 眼控科技 10-19万 72小时反馈 上海 6小时前 大专及以上 2年以上经验 普通话 25-35岁 绩效奖金 带薪年假 午餐补助 定期体检 年底双薪 五险一金 职位描述: 工作 ...
-
javascript重要类方法笔记
三.数据结构和map 1.大括号数据结构:{} 1.1 键值对形式,类似Map 1.2 var treeNode={}; treeNode ...
-
codeforce467DIV2——D. Sleepy Game
分析 这个题乍一看有点像之前在CF上做过的一道DP,也是两个人下棋,但是写着写着觉得不对···这个题是的最优策略只是player 1 如果有环则是draw,可以DFS的时候顺便判环(拓扑排序的方法), ...