什么是JSONP

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用 html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript

对于上面的解释，我们可以简单这样理解：JSONP就是可以通过JavaScript 文件进行跨域通讯的方式。
注意：JSONP 服务器端代码需要充分做好安全 措施。

最简单的JSONP 

var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
	//onreadystatechange，仅IE
	if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
		alert($("#demo").html());
		JSONP.onload = JSONP.onreadystatechange = null//请内存，防止IE memory leaks
	}
}
JSONP.type = "text/javascript";
JSONP.src = "http://a.pojaaimg.cn/2010/js/jquery.js";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);

JSONP实例

我们可以首先定义一个函数来执行JSONP返回的数据，然后通过JSONP的src传此函数给后台，进行处理，返回可执行的函数。例如下面代码：

function jsonpHandle(a){
    alert(a);
}
var JSONP = document.createElement("script") ;
JSONP.type = "text/javascript";
JSONP.src = "http://www.js8.in/jsonp.php?callback=jsonpHandle";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);

后台jsonp.php的代码：

echo $_GET["callback"]."('hello,world')";

        JQuery与PHP整合实例

        jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.


        1.client.html(客户端文件)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<mce:script language="javascript" src="jquery-1.4.js" mce_src="jquery-1.4.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function (){
    $('#latest').click(function (){
        var $limit=$('#limit').attr('value');
        var $category=$('#category').attr('value');
        $.getJSON("http://localhost/wordpress/rpc/server.php?limit="+$limit+"&category="+$category+"&callback=?",
                  function(data){ // 往后台传递的参数
                      $rpc = "日志链接:"+data.link1+"<br>   日志标题:"+data.title1;
                      $('#result').html($rpc);  //调用用来显示内容的div
                  })
    })
});
// --></mce:script>
</head>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
  <p><span>日志数:</span><input type="text" name="limit" id="limit" size="15" ></p>
<p><span>日志分类:</span><input type="text" name="category" id="category" size="15" ></p>
</form>
</body>
<button id="latest">最新日志</button>
</html>

      2.server.php(用来处理客户端发来的请求)

<?php
//header('Content-Type: application/json; charset=utf-8');
require_once("../wp-config.php");
$limit=$_REQUEST['limit'];  //接收客户端发来的数据
$category=$_REQUEST['category'];
$arr=Array();
function my_wp_get_archives($limit)
{
    $show_post = "type=postbypost&echo=0&limit=".$limit;
    return wp_get_archives($show_post);  //调用wordpress自身的函数
}
$posts=split('<li>',my_wp_get_archives($limit));
for($start=1;$start<sizeof($posts);$start++)
{
    $arr["title".$start]=strip_tags($posts[$start]);  //对从wordpress取到的数据进行处理，提取出字符串，方便自己加工成Json数据
    $arr["link".$start]=substr($posts[$start],strpos($posts[$start],'=/'')+2,strpos($posts[$start],'//'')-8);
}
// var_dump($arr);
$json = json_encode($arr);  //用Json_encode函数处理php的数组
echo $_GET['callback']."(".$json.")";
?>