如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。下面演示关于jQuery处理跨域请求ajax的方式：
服务器端(PHP为例)：
<?php
$data = array('name'=>' 张三','age'=>22,'city'=>'newYork');
sleep(3); //人为设置一个等待(用于观察什么是ajax的同步与异步)
responseAJAX($data); //响应请求返回数据 /**
* 返回处理后的ajax请求数据
* @author martinzhang
* @param $data 待返回的数据
* @return none
*/
function responseAJAX($data){
$data = json_encode($data);
$getCallBackName = $_REQUEST['callback']; //获取callback调用的function函数名
if($getCallBackName != ''){
//使用了jsonp跨域请求
$data = $getCallBackName.'('.$data.')'; //返回格式形如:callbackFunName({"name":" \u5f20\u4e09","age":22,"city":"newYork"})
die($data);
}else{
//未跨域
die($data);
}
}
客户端：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jsonp跨域</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="../jquery-1.8.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" onclick="BtnClick()" value="jsonp" style="width:55px; height:20px;" />
<input type="button" id="btn1" onclick="BtnClick2()" value="getJSON" style="width:55px; height:20px;" />
</div>
<p></p>
<div id="dd">
sd......
</div>
<div>
<script type="text/javascript" language="javascript">
//方式一：
function BtnClick() {
$.ajax({
url: 'http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php',
//async: false, //ture表示异步(默认)；false表示同步；
type: 'get',
dataType : 'jsonp', //返回数据类型：需要显式指定
jsonp: 'callback', //服务端用于接收callback调用的function名的参数名(变量名)
//jsonpCallback: 'callbackFunName', //可以显式地指定callback的函数名【如果不设置此项jquery会使用一个随机的含时间串的名称做为callback的函数名】
success: function(data){
//alert(data);
$('#dd').html(data.name);
}
}); alert('什么是异步？就是js不会等ajax何时请求回数据，程序顺序向下执行它下面的其它程序，ajax何时候请求回数据就何时处理');
} //方式二：
function BtnClick2() {
$.ajaxSettings.async = false; //显式声明此次请求为同步
$.getJSON("http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php?callback=?",null,function(data){
$('#dd').html(data.name);
}); alert('何谓同步？就是必须等ajax请求回来数据之后，js才会顺序向下执行它下面的程序');
} </script>
</div>
</form>
</body>
</html>