跨域请求:JSONP

在JavaScript中,有一个很重要的安全性限制,被称为"同源策略"。即JavaScript只能访问与包含它的文档在同一域下的内容。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。JSONP跨域请求是一个常用的解决方案。

 

JSONP:<script>元素可以作为一种Ajax传输机制,只须设置<script>元素的src属性(假如它还没有插入到document中,需要插入进去),然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL(凡是拥有”src”属性的标签都具有跨域请求的能力)。使用<script>元素进行Ajax传输的一个主要原因是,它不受同源策略的影响,因此可以使用它们从其他的服务器请求数据,第二个原因是包含JSON编码数据的响应函数会自动执行。这种使用<script>元素作为传输的方法称为JSONP(一种非正式的传输协议)。JSONP协议的一个要点就是允许用户传递一个callback参数给服务器端,然后服务器端返回数据时将这个callback参数作为函数名来包囊住JSON数据。假设你已经写了一个服务,它处理GET请求并返回JSON编码的数据,同源的文档可以在代码中使用XMLHttpRequest和JSON.parse()。

JSONP的客户端具体实现:

//跨域JS文件要调用的函数,data就是跨域JS文件返回的数据
var flightHander = function (data){ console.log(data); };
//提供JSONP服务的url地址
//username是告诉服务器我要查询这个人的信息
//callback是告诉服务器我的本地回调函数名
//后台程序员要根据url的信息动态生成一个js文件
/**
*后台JS文件要生成的格式
*flightHander({
*    ‘username‘: ‘csh‘,
*    ‘age‘: 25
*});
**/
var  url = "http://flightOne.com/test.php?username=csh&callback=flightHander";
//创建script标签,设置其属性
var script = document.createElement(‘script‘);
script.setAttribute(‘src‘, url);
//把script标签加入head,此时调用开始
document.getElementsByTagName(‘head‘)[0].appendChild(script);

 

 

跨域请求:JSONP,布布扣,bubuko.com

跨域请求:JSONP

上一篇:百度索引量、百度收录、网站排名和关键词流量


下一篇:配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法