Jquery版Ajax利用JSONP 跨域POST/GET传输数据研究

示例1：Ajax跨域POST/GET传输数据是一个令人纠结的问题

上次合肥网遇到一个专题九涉及到了ajax跨域问题，本身来说，基于安全考虑防止进行跨域调用是没错的

但是技术的这东最不好说了，哎，，，还是想办法突破吧，

最简单的方法不外乎框架，方法也很多，下面使用jquery的JSONP来做：

jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。原型如下：

jQuery.getJSON( url, [data], [callback] )  跨域加载JSON数据。
url:     发送请求的地址

data : (可选) 待发送key/value参数

callback: (可选) 载入成功时的回调函数

主要用于客户端获取服务器JSON数据。

示例2：

后端:

<?php
$json_str = json_encode(array("ddd"=>"11111111"));
echo $_GET['ja'].'('.$json_str.')';
?>

前端:

$.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){
alert(json);
});

示例2：

服务器脚本，返回JSON数据：

$.getJSON.php

$arr=array("name"=>"zhangsan", "age"=>20);
$jarr=json_encode($arr);
echo $jarr;

注意两点：

第一：在返回客户端之前，先用PHP函数json_encode将要返回的数据进行编码。

第二：返回到客户端用的是echo，而不是return。

下面是核心的客户端代码：

$.getJSON.html

<script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
<script language="javascript" type="text/javascript">
function getjs()
{
$.getJSON("$.getJSON.php", {}, function(response){
alert(response.age);
});
}

<input type="button" name="btn" id="btn" value="test" onClick="javascript:getjs();"/>

注意一点：

由于在PHP中是用JSON编码返回值，所以此处必须用getJSON去调用PHP文件，从而获取数据。同时可以注意到，经由getJSON得到的数据已经变成了一个对象数组，可以用response.name，response.age很直观的获取返回值。

当然强大jquery还有另外一个getScript

看他的演示示例：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});

 

 

案例：

<script>
       $(document).ready(function(){
          $.ajax({
               url:'http://localhost/test/jsonp.php',
               dataType:"jsonp",
               jsonp:"jsonpcallback",
               timeout: 5000,
               success:function(data, status){
                   alert('success: ' + status);
                   var $ul = $("<ul></ul>");
                   $.each(data,function(i,v){
                       $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
                   });
                   $("#res").append($ul);
               },
               error:function(XHR, textStatus, errorThrown){
                   alert('error: ' + textStatus);
                   alert('error: ' + errorThrown);
               }
          });
       });
lt;/script>

 

---

$jsonp = $_GET['jsonpcallback'];
$arr = array(
    'id' => '1',
    'name' => 'test'
);
echo $jsonp, '([', json_encode($arr), '])';
?>