AJAX 跨域
1.说到ajax就会遇到的两个问题
1.1AJAX以何种格式来交换数据
1.自定义字符串
2.XML描述
3.JSON描述(建议使用)
1.2如何解决跨域
1.使用jQuery的ajax解决跨域问题——JSONP解决(建议使用)
2.表单POST方式
3.服务器代理
4.HTML5中的postMessage
5.Flash request
2.同源策略与跨源策略
1.同源策略
同源策略:阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的URL的域必须与当前Web页面的域相同、相同端口。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。
2.跨源策略
跨源策略(CORS):是一个Web浏览器技术规范,它定义了一个方法让Web服务器允许其他域名页面访问它的资源。跨源策略定义了一个方法让浏览器和服务器可以交互决定是否允许跨源请求。
大家注意到同源请求中我们使用的是JSON格式,但在跨源请求中却是使用JSONP,这时大家可能有点困惑,首先我们必须理解JSON和JSONP的区别:JSON是一种数据格式,而JSONP像是通过一个方法名来封装JSON格式;由于浏览器允许跨源请 求<script>资源,如我们的HTML页面代码中使用了Google的jQuery库,当我们Web程序发送跨源请求后,服务器给我们提 供响应数据,但服务器无法预知接受JSON数据的方法名,所以我们要提供一个方法名。
3.ajax跨域问题解决
1.使用jQuery的ajax解决跨域问题——JSONP解决(建议使用)
$.ajax({
type: "get",
async: false,
url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"flightHandler",
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
2.表单POST方式
3.服务器代理
4.HTML5中的postMessage
5.Flash request
AJAX 跨域的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- 深入浅出Java 重定向和请求转发的区别
深入浅出Java 重定向和请求转发的区别 <span style="font-family:FangSong_GB2312;font-size:18px;">impor ...
- cocos2d(粒子效果编辑器)
ParticleDesigner for Mac下载地址:http://www.cocoachina.com/bbs/read.php?tid=108339 最近在做一款粒子编辑器 其实就是在co ...
- office2003万能密钥
保证有效 OFFICE 2003 : GWH28-DGCMP-P6RC4-6J4MT-3HFDY
- 调整altium designer15的十字光标大小
在左上角的DXP下preferences中调整.首先打开该窗口. 1.原理图:schematic-----graphical editing,此窗口中cursor栏有个cursor type,其下拉菜 ...
- QML控件类关系图
花了点时间整理了下QML控件之间的关系图和QML控件和C++类的对应关系,基于Qt5.6版本 其他版本可能会有差异 图片像素比较大,另存为后放大图片就可以看清楚了 工程下载地址 QMLClassDia ...
- word 生成目录
生成目录: (1)Ctrl+End,到达文档的最后一页: (2)"插入"菜单--引用--索引和目录(此时出现索引和目录对话框): (3)单击"目录"选项卡 a. ...
- Android 5.0 之SwipeRefreshLayout
金田 下拉刷新是一种比较常用的效果,Android 5.0之前官方并未提供类似的控件,App中主要是用的第三方库,例如PullToRefresh,ActionBar-PullToRefresh等.刚好 ...
- Manor
Description Bob有n个正整数,他将这n个整数根据大小划分成两部分.对于小于等于k的整数放在集合A中,其余的放在集合B中.每次他从集合B中取出一个最大的值,将其变成0放入A集合中.然后将A ...
- android中操作SQLite注意事项
调用rawQuery()后,需要调用Cursor的movToFirst(); public Cursor query(String sql, String[] args){ SQLiteDatabas ...
- hdu 4585 Shaolin(STL map)
Problem Description Shaolin temple is very famous for its Kongfu monks.A lot of young men go to Shao ...