ajax跨域问题

jsonp的实现核心就是利用script标签的跨域能力！动态生成一个script标签，把json的url赋值给script的src属性，然后再把这个script标签插入dom里...

<script type="text/javascript">
    function jsonpcallback(json) {
      console.log(json);
    }

    var s = document.createElement('script');
    s.src = 'http://localhost:8080/a.json';
    document.body.appendChild(s);
  </script>

jsonpcallback({
  "name": "hanzichi",
  "age": 10
});
与php交互

 <script type="text/javascript">
    function jsonpcallback(json) {
      console.log(json);
    }

    var s = document.createElement('script');
    s.src="http://localhost:8080/test.php?callback=jsonpcallback";
    document.body.appendChild(s);
  </script>

<?php
  $jsondata = '{
    "name": "hanzichi",
    "age": 10
  }';
  echo $_GET['callback'].'('.$jsondata.')';
?>

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
  $.ajax({
    url: 'http://localhost:8080/test.php',
    dataType: 'jsonp',
    success: function (data) {
      console.log(data);
    }
  });
</script>

<?php
  $jsondata = '{
    "name": "hanzichi",
    "age": 10
  }';
  echo $_GET['callback'].'('.$jsondata.')';
?>

   当然类似的封装好的方法还有几种：

// 1
$.getJSON("http://localhost:8080/test.php?callback=?", function(data) {  
  console.log(data);
});

// 2
$.get('http://localhost:8080/test.php', function(data) {  
  console.log(data);
}, 'jsonp');  

　　需要注意的是getJSON方法的请求地址url需要带上callback=?，因为jq对该方法进行封装的时候并没有默认回调函数变量名为callback，于是php中$_GET['callback']就找不到变量值了。

　　而一般的jq方法url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的

     jsonp原理：

1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2. 服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
3. 客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）