使用JavaScript的JSONP实现跨域访问【原创】

JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式（与 XML 相比）。JOSON 依赖于 JavaScript 开发人员，因为它是 JavaScript 对象的字符串表示。JSONP广泛应用于跨站调用json数据的API当中。

一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

下面看一个JSONP的简单实例吧。

服务器端的脚本实现（PHP）：http://www.test.com/index.php

<?php
header("Content-Type: text/html; charset=UTF-8");
$student_info = array(
	'name' => 'fisher',
	'sex'=>1,
	'age'=>20
);
echo $_GET['callback'] . '(' . json_encode($student_info) . ');';

客户端脚本实现（javascript ）：file:///C:/Users/fisher/Desktop/index.html

<script type="text/javascript">
function studentInfo(data) {
	alert(data.name);
}
</script>
<script type="text/javascript" src="http://www.test.com/index.php?callback=studentInfo"></script>

下面是利用JQuery实现的JSONP

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$.ajax({
	    url: 'http://www.test.com/index.php',
	    type: 'GET',  //这里用GET
	    async: false,
	    dataType: 'jsonp',  //类型
	    jsonp: 'callback', //jsonp回调参数，必需
	    success: function(data) {
            alert(data.name); //回调输出
        }
	});
})
</script>

上面两种实现方法的不同之处在于：原生的js实现会被浏览器缓存因此不会及时更新，而JQuery的实现则是动态创建个回调函数，这样可以保证每次调用的数据都是服务器上最新的

（http://www.test.com/index.php?callback=jQuery172021422308636829257_1338200937447&_=1338200937459）

下面将file:///C:/Users/fisher/Desktop/index.html的js修改一下

<script type="text/javascript">
//根据当前时间动态创建函数名，然后调用这个动态的函数
var date = new Date();
var nowTime= date.getTime();
var url = 'http://www.test.com/index.php?callback=jsonp_' + nowTime;
document.write('<script type="text/javascript">function jsonp_'+nowTime+'(data){alert(data.age)}</script>' );
document.write('<script type="text/javascript" src="'+url+'"></script>');

</script>