跨域的基本原理:
    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跨域 【转】的更多相关文章

  1. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...

  2. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  3. ajax jsonp跨域

    js跨域问题是指:js不同域进行数据传输或通信之间,让我们用ajax到不同的域请求数据.或js获得在不同领域的框架页(iframe)数据.只有到协议.域名.port无论是有不同的.它们被认为是不同的域 ...

  4. Ajax jsonp 跨域请求实例

    跨域请求 JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求:它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题. $. ...

  5. JQuery+ajax+jsonp 跨域访问

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...

  6. AJAX.JSONP 跨域

    var Request = {        timeout: 10 * 1000, // 10秒超时        status: 10,        statusenum: { Wait: 10 ...

  7. ajax jsonp跨域处理问题

    客户端 html $.ajax({ type : "get", async:false, dataType : "jsonp", jsonp: "js ...

  8. ajax jsonp 跨域请求

    $.ajax({ type:"get", url: "http://localhost/test/a.php", dataType: "jsonp&q ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. spring boot的application配置文件

      上次我们已经对这个文件见过面了,并且对他进行了一些简单的配置.它有两种配置方式,一个是application.properties,一个是application.yml文件,需要记住,当两个文件都 ...

  2. 安装Mysql 8.0的艰难体验

    背景: Mysql 8.0 以后版本,在性能等方面有了很大提升,而且在自动编号.Timestamp等字段的设置上有了很方便的进步,因此在一年前即开始将原有的基于5.5版本的服务器逐渐向8.0转移.但转 ...

  3. 构造分组背包(CF)

    Ivan is a student at Berland State University (BSU). There are n days in Berland week, and each of t ...

  4. Nginx作为负载均衡服务器——server参数讲解

    upstream举例 upstream backend { server backend1.ecample.com weight = 5; # wwight 代表权重 server backend2. ...

  5. Webpack实战(六):如何优雅地运用样式CSS预处理

    上一篇文章中,我主要分享了<Webpack如何分离样式文件>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译 ...

  6. 【Vue】强化表单的9个Vue输入库

    一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...

  7. Python中将变量按行写入txt文本中

    案例一: 讲数组a 循环写入名称为2.txt的文档中 # -*-coding:utf8-*- import requests from lxml import etree a=[1,2,3,4,5,6 ...

  8. Python单元测试unittest测试框架

    本文的主题是自动化测试框架的实现,在实现之前,先了解一下关于unittest模块的相关知识: Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回 ...

  9. 数据结构 二维数组-->稀疏数组-->二维数组

    稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组 处理方法: 1>记录数组一共有几行几列,有多少不 ...

  10. JavaScript 注意

    字符串常用方法: 除.length外 都要加括号  trimLeft   trimRight      L和R要大写. .charAt 类似索引,超出范围为空 ,注意 (At)大小写. 注意 1.st ...