jsonp 跨域请求

一般的我们在js里用ajax动态的请求服务器数据，ajax底层其实是使用的是XmlHttpRequest对象，但是它只允许请求当前域名的资源，这一过程是同域的，即ajax请求的服务器与当前的页面的url处于同一台服务器中，但是有时候我们需要请求另一台服务器获取json数据，或者调用第三方接口获取json数据，例如我发送一个城市地址，获取第三方服务的天气数据。

为了实现跨域请求，可以通过script标签实现跨域请求，而要跨域请求或者json数据，并执行回调函数的话，这里我们就要用到jsonp了。

实际上是利用script标签请求它的src属性地址可以是跨域的漏洞来实现跨域请求的，但是script标签src请求只能是get请求，所以jsonp也是只能是get请求的，不支持post请求。jsonp最关键的是请求的url应该包含一个回调函数的名称，请求服务器时，这个回调函数的名称也会发送到服务器，然后返回响应数据时，会构建一个function函数，函数名为我们的回调函数，函数里面的数据为我们从服务端返回的数据。执行这个回调函数，则执行我们已经写好了的回调函数。

*****回调函数必须写在<script>标签上面

一个简单的jsonp的实例

<span id="jsonp"></span>
<script type="text/javascript">
    function callbackFunction(result){
        document.getElementById("jsonp").innerHTML=result;
    }
</script>
<script type="text/javascript" src="http://ip.chinaz.com/getip.aspx?jsoncallback=callbackFunction"></script>
  这是第三方根据ip地址请求获取大致位置的跨域请求，ip地址不用传，它直接从你的请求中拿到。接下来，它会返回一个json数据

我们可以看到返回的json数据
{ip:’101.95.186.150’,address:’上海市 电信’}

jquery写法例子

<span id="jsonp"></span>
<script>
$.getJSON("http://ip.chinaz.com/getip.aspx?jsoncallback=？", function(data) {
    document.getElementById("jsonp").innerHTML=result;
});
</script>
其中？是个占位符，执行url时，会把后面function放在这个占位符。