ajax跨域请求学习笔记
原文:ajax跨域请求学习笔记
前言
ajax,用苍白的话赞扬:很好。
我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验;我们可以使用ajax实现小系统组合大系统;我们还可以使用ajax实现前端的优化。(好一个排比)
虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。(下面例子1可以直观看出)
同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。——摘自developerWorks
所谓同源是指,域名,协议,端口相同。
平地一声吼
本文讲解的是怎么利用ajax实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据!”“为毛浏览器控制台会对我如此漂亮的代码报错!”
例子1
先上一个错误示范
客户端代码:
<script>
// 客户端使用getJSON方法请求另一台机子上的脚本
$.getJSON("http://172.22.22.120/new/ajax.php",function(json){
alert(json.website);
});
</script>
服务端PHP脚本代码:
<?php
// ajax.php
header('Content-type: application/json'); echo json_encode(array('website'=>'hcoding'));
?>
firefox下的错误提示:
根据同源策略的概念,localhost和172.22.22.120是出于不同的域名下的,所以跨域请求理所当然地被浏览器拒绝了。
JSONP
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。——摘自维基百科
这话该怎么理解呢!我个人是这样认为的,用<script>跨域的请求数据,跨域的服务器返回一段【JavaScript代码】,是 的,你没看错,不是json格式数据,是JavaScript代码,这样,这段代码就由JavaScript 直译器执行。上例子更直观:
例子2
客户端代码:
<script>
// 这是回调方法
function cb(data){
alert(data.website);
}
</script>
<!--这是跨域请求的代码,切记,这段代码要在回调函数之后-->
<script src="http://172.22.22.120/new/ajax_jsonp.php?callback=cb"></script>
服务端PHP脚本代码:
<?php
$cb = htmlspecialchars($_GET['callback']); // 注意了,这里要做好过滤,防止xss攻击
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据为:cb({"name":"hcoding"}) 这是一段js代码
?>
浏览器会发生什么事呢,我就不说了,当然是cb方法被调用啦:
所以,再说jsonp的概念,利用<script>不受同源策略的限制,跨域的服务器把要返回的json数据作为参数和回调函数一起返回客户端。
JQuery对JSONP的支持
本文要讲ajax的跨域请求,前面说了那么多,下面当然要讲主题啦。
从 1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。
例子3
客户端代码:
<script>
// 客户端使用getJSON方法请求另一台机子上的脚本
// 浏览器会生成一个随机的callback参数
$.getJSON("http://172.22.22.120/new/ajax_jsonp.php?callback=?",function(json){
alert(json.website);
});
</script>
服务端PHP脚本代码:
<?php
$cb = htmlspecialchars($_GET['callback']); // 注意了,这里要做好过滤,防止xss攻击
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据,这是一段js代码
?>
$.getJSON简单易用,但就是不能指定回调函数。
例子4
客户端代码:
<script>
$.ajax({
type : "GET",
url : "http://172.22.22.120/new/ajax_jsonp.php",
dataType : "jsonp", // 数据格式指定为jsonp
jsonp: "callback", // 服务点通过这个键值获取回调方法
jsonpCallback:"cb", // 指定回调方法
success : function(json){ },
}); // 回调方法
function cb(data){
alert(data.website);
}
</script>
服务端PHP脚本代码和例子3的相同。
总结
正所谓无规矩不成方圆,以安全为出发点,遵循同源策略是一个好品德。但我们也有跨域请求的需求,jsonp就能满足我们的需求。当然跨域请求还有很多的方法,不单止jsonp。
本文链接:http://www.hcoding.com/?p=238
原创文章,转载请注明:JC&hcoding.com
ajax跨域请求学习笔记的更多相关文章
- jsonp跨域请求学习笔记
前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.( ...
- ajax跨域请求的解决方案
一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...
- jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
- 有关Ajax跨域请求的解决方案
前言 最近博主在赶项目进度.所以微信二次开发那边的博文一直没有更新.后续时间会慢慢记录这个学习历程的.来年公司要开发微信小程序.到时也会记录一下历程. 闲话少说,今天在工作中遇到了SpringMVC接 ...
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- HTML5:使用postMessage实现Ajax跨域请求
HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) do ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
随机推荐
- Android设备管理器漏洞2--禁止用户取消激活设备管理器
2013年6月,俄罗斯安全厂商卡巴斯基发现了史上最强手机木马-Obad.A.该木马利用了一个未知的Android设备管理器漏洞(ANDROID-9067882),已激活设备管理器权限的手机木马利用该漏 ...
- zabbix监控nginx连接状态(转)
zabbix监控nginx zabbix可以监控nginx的状态,关于一个服务的状态可以查看服务本身的状态(版本号.是否开启),还应该关注服务能力(例如以nginx的负载效果:连接数.请求数和句柄数) ...
- mongoDB 查询附近的人的语句
mongoDB 自带LBS查询附近的人 {"location":{ $nearSphere: { $geometry: { type : "Point", co ...
- Navicat工具破解
Navicat提供多达 7 种语言供客户选择,被公认为全球最受欢迎的数据库前端用户介面工具.它可以用来对本机或远程的 MySQL.SQL Server.SQLite.Oracle 及 Post ...
- Cocos2d-x 2地图步行实现:SPFA算法
本文乃Siliphen原创,转载请注明出处:http://blog.csdn.net/stevenkylelee 上一节<Cocos2d-x 地图行走的实现1:图论与Dijkstra算法> ...
- Ajax—初识
看DRP的过程.又一次学习了一遍Ajax.更深刻的体会到了Ajax所具有的魅力.Ajax是一种技术或者方法,更是一 种艺术.它让我们的程序以一种更完美的姿态呈如今用户面前.以下就让我们一起走进Ajax ...
- 批处理程序:自动上传FTP,再登陆linux服务器执行更新
----转载请注明出处:博客园-邦邦酱好 最近在学批处理程序,一直没找到能够结合工作来使用它的地方,前几天测试服务端的时候突然想到可以这样做: 写一个批处理程序,自动通过FTP上传软件包到指定的地方, ...
- Spring jdbc 对象Mapper的简单封装
一般查询实体的时候,都需要这么使用/** * 根据id查询 * * @return */ public Emp queryEmpById(Intege ...
- DRY
DRY(Don't Repeat Yourself )原则 凡是写过一些代码的程序猿都能够意识到应该避免重复的代码和逻辑.我们通过提取方法,提取抽象类等等措施来达到这一目的.我们总能时不时的听到类 ...
- 黑马day07 注册案例(二)
1依据index.jsp我们首先制定了注册的功能,当点击注册button什么时候.超链接到注册页面.下面是一个注册jsp页 <%@ page language="java" ...