ajax jsonp跨域 【转】
跨域的基本原理:
JSONP跨域GET请求是一个常用的解决方案,
JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。
需要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 }; 这样设置,可以直接传json字符串给后端。后端也要做相应处理。
跨域相关内容
CORS跨域的常见问题以及前后端的设置:
《Ajax——CORS跨域调用REST API 的常见问题以及前后端的设置》
data = JSON.stringify(data);
xhr.setRequestHeader("Content-Type","application/json");
ajax jsonp跨域 【转】的更多相关文章
- jQuery的ajax jsonp跨域请求
了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- ajax jsonp跨域
js跨域问题是指:js不同域进行数据传输或通信之间,让我们用ajax到不同的域请求数据.或js获得在不同领域的框架页(iframe)数据.只有到协议.域名.port无论是有不同的.它们被认为是不同的域 ...
- Ajax jsonp 跨域请求实例
跨域请求 JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求:它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题. $. ...
- JQuery+ajax+jsonp 跨域访问
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
- AJAX.JSONP 跨域
var Request = { timeout: 10 * 1000, // 10秒超时 status: 10, statusenum: { Wait: 10 ...
- ajax jsonp跨域处理问题
客户端 html $.ajax({ type : "get", async:false, dataType : "jsonp", jsonp: "js ...
- ajax jsonp 跨域请求
$.ajax({ type:"get", url: "http://localhost/test/a.php", dataType: "jsonp&q ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
随机推荐
- spring boot的application配置文件
上次我们已经对这个文件见过面了,并且对他进行了一些简单的配置.它有两种配置方式,一个是application.properties,一个是application.yml文件,需要记住,当两个文件都 ...
- 安装Mysql 8.0的艰难体验
背景: Mysql 8.0 以后版本,在性能等方面有了很大提升,而且在自动编号.Timestamp等字段的设置上有了很方便的进步,因此在一年前即开始将原有的基于5.5版本的服务器逐渐向8.0转移.但转 ...
- 构造分组背包(CF)
Ivan is a student at Berland State University (BSU). There are n days in Berland week, and each of t ...
- Nginx作为负载均衡服务器——server参数讲解
upstream举例 upstream backend { server backend1.ecample.com weight = 5; # wwight 代表权重 server backend2. ...
- Webpack实战(六):如何优雅地运用样式CSS预处理
上一篇文章中,我主要分享了<Webpack如何分离样式文件>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译 ...
- 【Vue】强化表单的9个Vue输入库
一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...
- Python中将变量按行写入txt文本中
案例一: 讲数组a 循环写入名称为2.txt的文档中 # -*-coding:utf8-*- import requests from lxml import etree a=[1,2,3,4,5,6 ...
- Python单元测试unittest测试框架
本文的主题是自动化测试框架的实现,在实现之前,先了解一下关于unittest模块的相关知识: Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回 ...
- 数据结构 二维数组-->稀疏数组-->二维数组
稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组 处理方法: 1>记录数组一共有几行几列,有多少不 ...
- JavaScript 注意
字符串常用方法: 除.length外 都要加括号 trimLeft trimRight L和R要大写. .charAt 类似索引,超出范围为空 ,注意 (At)大小写. 注意 1.st ...