jsonp其实很简单【ajax跨域请求】
来源:互联网 发布:centos五笔拼音输入法 编辑:程序博客网 时间:2024/06/05 04:33
1. 同源策略
ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略。即,一个页面的ajax只能获取这个页面相同源或者相同域的数据。
如何叫“同源”或者“同域”呢?——协议、域名、端口号都必须相同。例如:
http://google.com 和 https://google.com 不同,因为协议不同;
http://localhost:8080 和 http://localhost:1000 不同,因为端口不同;
http://localhost:8080 和 https://google.com 不同,协议、域名、端口号都不同,根本不是一家的。
根据同源策略,我自己做的一个网页 http://localhost:8080/test.html 就无法通过ajax直接获取 http://google.com 的数据。
例如,我用ajax去访问一个不同域的页面,错误结果是这样的:
大家想想,这样其实也有道理。如果没有同源策略,你我都可以随便通过ajax直接获取其他网站的信息,这还不乱套了。。。我自己做一个搜索界面,搜索时直接用ajax从百度获取数据,那不成了小偷了。。。
但是跨域访问是少不了的,mail.163.com 的网页可能需要从 news.163.com 域下获取新闻信息,那怎么办?——开始咱们的跨域之旅。(当然用iframe也可以实现)
2. 从“盗链”说起
互联网的许多网站之间图片相互盗链,A网站网页的img.src直接链接到B网站的图片地址,这是常有的事儿。说到“盗链”,大家第一想到的可能是如何去防止盗链,今儿咱不管那个。
你再想想“盗链”和“同源策略”这两个词之间有什么关系?——对,矛盾!既然都“同源策略”了,怎么还能“盗链”呢?
世间万物都有矛盾,有矛盾了照样可以和谐共处,并不一定非要你死我活。
重点:的src(获取图片),的href(获取css),
3. JSONP
例如,域名 a.com 下有一个 a.com/test.html 网页,域名 b.com 下有一个 b.com/data.html 网页和 b.com/alert.js 文件。
引导第一步:简单引用js
编写 b.com/alert.js 如下:
alert(123);
对 a.com/test.html 编写如下代码:
引导第二步:引用js返回数据
将 b.com/alert.js 修改为:
myFn(100);
将 a.com/test.html 修改为:
<script type='text/javascript' src='http://b.com/alert.js'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
运行 a.com/test.html,结果是弹出【 100px 】,这个应该也没有什么疑问。
引导第三步:已经跨域成功!
第二步中,如果data——即100——是我要跨域在b.com下获取的一个数据,那么咱们这不就是已经实现跨域请求了吗!!!
把这个过程再清晰的捋一遍:
<script type='text/javascript' src='http://b.com/data.html'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
将 b.com/data.html 编写为:(注意,data.html中就写以下一行代码,多了不写)
myFn(100);
运行 a.com/test.html ,结果依然是【 100px 】
其中,“100”就是我们要跨域请求的数据。
引导第五步:动态数据
如果要请求的数据是动态的,那就要在动态页面中编写。
那么我们就让 a.com/test.html 去调用一个动态的aspx页面:
<script type='text/javascript' src='http://b.com/data.aspx?callback=myFn'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
大家注意,我们在 src 地址中增加了“?callback=myFn”,意思是把显示数据的函数也动态传过去了,而第二步、第四步都是静态的写在被调用的文件中的。
至于callback参数后台如何接收,如何使用,请接着看:
在 b.com 下增加一个 b.com/data.aspx 页面,后台代码如下:
复制代码
protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack == false) { string callback = ""; if (Request["callback"] != null) { callback = Request["callback"]; //服务器端要返回的数据 string data = "1024"; Response.Write(callback + "(" + data + ")"); } } }
复制代码
代码很简单,获取callback参数,然后组成一个函数的形式返回。如果“b.com/data.aspx?callback=myFn”调用的话,那么返回的就是” myFn(1024) “。
返回的数据变成动态的了(“1024”),前端页面用于显示数据的函数也编程了动态的了(“callback=myFn”),但是归根结底,形式还是一样的。
引导第六步:调用封装
a.com/test.html 中,仅仅有一个
function addScriptTag(src) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.src = src; document.body.appendChild(script);}
//需要调用时:
addScriptTag('b.com/data.aspx?callback=myFn');function myFn (data) { alert(data + 'px'); }
- jsonp其实很简单【ajax跨域请求】
- jsonp其实很简单【ajax跨域请求】
- jsonp其实很简单【ajax跨域请求】
- jsonp其实很简单【ajax跨域请求】
- jsonp其实很简单【ajax跨域请求】
- jsonp其实很简单【ajax跨域请求】
- js便签笔记(13)——jsonp其实很简单【ajax跨域请求】
- ajax跨域请求jsonp
- AJAX - 跨域请求 && JSONP
- ajax跨域请求jsonp
- ajax跨域请求jsonp
- JSONP跨域请求AJAX
- Ajax跨域请求--Jsonp
- ajax(jsonp)发送ajax跨域请求
- 利用jsonp进行ajax跨域请求
- AJAX,JSON,JSONP以及跨域请求
- Ajax跨域请求与jsonp
- ajax跨域请求--jsonp实例
- 霍夫变换-检测直线
- Android中简便使用数据库的方法:LitePal的使用方法
- 编写一个程序,接受用户的输入并保存为新的文件
- ajax的跨域处理
- linux中运行的小程序
- jsonp其实很简单【ajax跨域请求】
- 初识Maven
- Spring 几个配置注解的含义
- MySQL
- 【工作效率】Java API使用以及扩展
- c++实验6
- fragment使用getActivity(),出现getActivity()为空
- Matlab中image、imagesc和imshow函数用法解析
- k-近邻算法