跨域请求：JSONP

浏览数：45 / 时间：2015年06月09日

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