php ajax juqery JSONP实现跨域接口获取数据

先谈谈Jsonp原理： 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 . 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。 客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数， 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数） 可以说jsonp的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患. 第一也是最重要的：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求 另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患 从JQuery 1.2以后，就开始支持JSONP的调用。 实例1 test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script src="ajax.js"></script> </head> <body> </body> </html> ajax.js $.ajax({ type : "post", url : "ajax.php", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 success : function(json){ alert('success'); }, error:function(){ alert('fail'); } }); ajax.php <?php $data = "......."; $callback = $_GET['callback']; echo $callback.'('.json_encode($data).')';//注意括号和把callback返回去 不然跨域失败 exit; ?> 当使用jsonp时，使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 -------------------------------------------------------------------------------- 实例2 test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="jquery-1.5.2.min.js"></script> <script src="ajax.js"></script> </head> <body> <form name="form"> <input type="text" name="sex"> <input type="text" name="age"> <input type="button" id="btn" value="button" /> </form> </body> </html> ajax.js $(document).ready(function(){ $("#btn").click(function(k) { //... var j = $("form").serializeArray();//序列化name/value $.ajax({ type: 'GET',  //这里用GET url: 'ajax.php', dataType: 'jsonp',  //类型 data: j, jsonp: 'callback', //jsonp回调参数，必需 async: false, success: function(result) {//返回的json数据 alert(result.message); //回调输出 result = result || {}; if (result.msg=='err'){ alert(result.info); }else if (result.msg=="ok"){ alert('提交成功'); }else{ alert('提交失败'); } }, timeout: 3000 }) //... }); }); ajax.php <?php $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需 $date = array("age"=>$_GET['age'], "message"=>$_GET['age']); $date["msg"]="err"; $date["info"]="因人品问题，发送失败"; $tmp= json_encode($date); //json 数据 echo $callback . '(' . $tmp .')';  //返回格式，必需 ?>