在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);