jquery ajax怎么使用jsonp跨域访问
在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法。
值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的。
<pre>
<script type="text/javascript">
// 简写形式
$.getJSON("http://www.shuchengxian.com/index.php?callback=?",
function(data){
$("#show").text(data)
});
// 完整形式
$.ajax({
async:false,
url: 'http://www.shuchengxian.com/index.php?callback=?', // 跨域URL callback参数必填
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
data: mydata, //请求数据
timeout: 5000,
beforeSend: function(){ //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},
success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.length!=0){
alert(json.actionErrors);
}
},
error: function(xhr){
// jsonp 方式此方法不被触发
// 请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
</script>
</pre>
这种方式其实是上例$.ajax({..}) 的一种高级封装。
在服务端通过获得callback参数(如:jsonpcallback)得到jQuery端随后要回调的,
然后返回类似:"jsonpcallback("+要返回的json数组+")";
jquery就会通过回调方法动态加载调用这个:jsonpcallback(json数组);
如果为jQuery默认,则为随机jsonp1356493334400之类的数据。这样就达到了跨域数据交换的目的。
JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。
注意:jquey是不支持post方式跨域的。
所以一般不建议用jsonp跨域访问 而是PHP后台控制下 添加下要访问的域名 即可不用跨域
<pre>
//处理跨域
header("Access-Control-Allow-Origin:*"); //*号表示所有域名都可以访问
header("Access-Control-Allow-Method:POST,GET");
</pre>
获取可以用用PHP curl也可以进行跨域访问
jquery ajax怎么使用jsonp跨域访问的更多相关文章
- 在ASP.NET MVC3 中利用Jsonp跨域访问
在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- AJax与Jsonp跨域访问
一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...
- ajax同源策略,jsonP跨域访问
浏览器处于安全性的考虑,要求ajax请求,必须满足同源策略 规定:访问的协议://域名:端口号都相同时满足同源策略,浏览器可以正确解析数据,否则如果有一项不满足要求,则属于跨域访问,浏览器可以正常获取 ...
- 【AngularJs】---JSONP跨域访问数据传输
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
- ajax 设置Access-Control-Allow-Origin实现跨域访问
ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,t ...
- 从前端和后端两个角度分析jsonp跨域访问(完整实例)
一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...
- angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程
官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...
- 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
随机推荐
- redis集群之Cluster
RedisCluster 是 Redis 的亲儿子,它是 Redis 作者自己提供的 Redis 集群化方案. 相对于 Codis 的不同,它是去中心化的,如图所示,该集群有三个 Redis 节点组成 ...
- 简单探讨一下.NET Core 3.0使用AspectCore的新姿势
前言 这几天在对EasyCaching做支持.net core 3.0的调整.期间遇到下面这个错误. System.NotSupportedException:"ConfigureServi ...
- laravel中select2多选,初始化默认选中项
项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人.使用 select2 插件来完成. select2 的 html 代码如下: <div class="form-group ...
- 【洛谷5008】逛庭院(Tarjan,贪心)
[洛谷5008]逛庭院(Tarjan,贪心) 题面 洛谷 题解 如果图是一个\(DAG\),我们可以任意选择若干个不是入度为\(0\)的点,然后把它们按照拓扑序倒序删掉,不难证明这样一定是合法的. 现 ...
- ElasticStack的入门学习
Beats,Logstash负责数据收集与处理.相当于ETL(Extract Transform Load).Elasticsearch负责数据存储.查询.分析.Kibana负责数据探索与可视化分析. ...
- Python GUI开发,效率提升10倍的方法!
1 框架简介 这个框架的名字叫 PySimpleGUI,它完全基于Python语言,能非常方便地开发GUI界面,代码量相比现有框架减少50%到90%.并且,它提供了极为友好的Python风格的接口,大 ...
- C#WinForm解决跨线程访问控件属性报错
方式一(在程序初始化构造函数中加一行代码): public Form1() { InitializeComponent(); Control.CheckForIllegalCrossThreadCal ...
- CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
- media适配css
/*引入适配的less*/ html { font-size: 16px; } @media only screen and (min-width: 320px) { html { font-size ...
- u盘 安装 centOS 7
实际上, 对于服务器的安装, 最好是能够远程批量安装(可能有些难度, 不是专业运维) 镜像下载地址: http://59.80.44.49/isoredirect.centos.org/centos/ ...