文档章节

Ajax跨域原理JQuery之Jsonp使用剖析

hosser
 hosser
发布于 2015/02/09 21:20
字数 775
阅读 69
收藏 1

Ajax跨域原理JQuery之Jsonp使用剖析技术

maybe yes 发表于2014-12-27 18:21

原文链接 : http://blog.lmlphp.com/archives/49  来自 : LMLPHP后院

有 关Ajax技术,对于我们这些经常在互联网打滚的人来说,已经是再熟悉不过了。关于Ajax原理,之前我也研究过,这里顺带解说一番。 JavaScript是一种基于事件的单线程执行脚本语言,要实现Ajax通信,必须先实例化 XMLHttpRequest 对象,然后对该对象的 onreadystatechange 注册事件,然后再执行 open 和 send 方法。一般来说,实现简单的Ajax请求,我们只需要在 readyState 等于 4(请求完成) 之后再进行后续的状态码判断并处理。对于IE浏览器,实现起来稍有不同,IE系列是使用 ActiveXObject 控件来实现异步请求的,不同版本的IE浏览器在写法上稍有不同,因此完整的Ajax类需要对IE系列浏览器做个判断,不过IE11之后已经不再是IE内核 了,此是后话。

Ajax技术是遵循同源策略的,所有的浏览器都是如此。试想,如果可以随意请求别的网站的资源,互联网不就乱套了吗。通过安 装浏览器插件使用 background 技术也可以实现跨域并与外部进行通信,著名的360网页抢票插件就是这么实现的。在现实的需求中,经常会需要跨域,Ajax不可以,HTML的一些其他的 标签,比如 IMG, LINK, SCRIPT等都是可以的,万维网的设计者们在这一点上还是放松了,不过这样确实带来不少方便。著名的JSONP技术,就是通过SCRIPT标签来实现请 求外部资源,网上很多的文章和帖子都说成了“Ajax跨域”,其实这样已经不再是Ajax技术了。

Jsonp虽然能够很方便的请求外部资 源,实现跨域与服务端通信,但也有所限制的。这种限制要求服务端返回的内容必须是合法的 JavaScript 代码,一般都需要配合客户端的要求返回相应的回调函数。之前本人每次使用Jsonp实现跨域,都是动态的创建SCRIPT标签,然后发出请求,虽然知道 JQuery也有提供这样的功能,之前感觉使用起来很是麻烦。最近使用JQuery的Ajax方法,才发现它封装的比较好,JQuery每次发给服务端的 函数名都是唯一的,这点确实避免了复杂环境下容易出错的问题。

附上使用JQuery实现Jsonp代码示例,下面的代码每次请求都是以 jsonpcallback 作为参数名发送一个类似于“jQuery21102093567821251967_1419672602306”这样的唯一的函数名给服务端,服务端以 这个名称返回回调函数和数据:

<script>
$.ajax({
	url:'url',
	dataType:"jsonp",
	jsonp:"jsonpcallback",
	success:function(data){
		custom_callback(data);
	}
});
</script>

阅(33)评(0)查看评论


本文转载自:http://blog.lmlphp.com/archives/49

hosser

hosser

粉丝 192
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
用jQuery与JSONP轻松解决跨域访问的问题

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问...

烽穹寒渊
2015/07/26
0
0
jQuery 调用jsonp实现与原理

通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <script> 元素的这个开放策略,具体后面谈。 1.客户端代码 <!DOCTYPE html PUB...

chailink
2013/12/29
1K
0
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
14.6K
1
JQuery的Ajax跨域请求的解决方案

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于...

jz116
2012/04/10
6.9K
3
JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN
2015/06/04
872
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell学习记录(持续更新)

一、shell定时备份数据库任务通用脚本 目标:根据定时任务启动脚本,执行数据库备份任务,按照日期进行每日备份,如已经备份则脚本停止,备份任务完成后将结果发送邮件提醒 1.执行数据库备份...

网络小虾米
今天
3
0
PHP计算两个经纬度地点之间的距离

/** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 $ ,lng2 经度 * @param lat1 $ ,lat2 纬度 * @return float 距离,单位米 * @author www.Alixixi.com */function get...

子枫Eric
今天
14
0
Linux—day 4

ch2 需要掌握的命令 (1)cat -n 1.txt (2)more 1.txt (3)head -n 15 initial-setup-ks.cfg (4)tail -n 17 initial-setup-ks.cfg;tail -f initial-setup-ks.cfg (5)cat -n anaconda-ks.c......

呵呵暖茶
今天
31
0
【Kubernetes社区之路】我的PR被抢了

2019年11月的某天,我无意间发现一个PR作者在自己的PR中抱怨自己的PR没被合入,而另一个比自己提交晚且内容几乎一样的PR则被合入了。 字里行间透露些许伤感外加无奈,原文如下: 作为一名开源...

恋恋美食
今天
40
0
阻塞队列

对于许多线程问题, 可以通过使用一个或多个队列以优雅且安全的方式将其形式化。生产者线程向队列插人元素, 消费者线程则取出它们。 使用队列, 可以安全地从一个线程向另 一个线程传递数据...

ytuan996
今天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部