调用远程接口的不完美解决方案

想给博客加上个背景图片，又不想花自己的流量（喂！！），找到了Bing每日壁纸的接口，理论上来说直接拿出来数据就可以用了。

直接上ajax

jQuery.ajax({
    url:"http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1",
    success:function(data){
        console.log(data);
    }
})

报错：不能跨域。

那好，改成jsonp

理论上就可以跨域了吧？上一个项目中拿网易天气的接口就是这么干的：

jQuery.ajax({
    url:"http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1",
    type: "get",
    dataType: "jsonp",
    success:function(data){
        console.log(data);
    }
})

失败：因为此接口并不支持jsonp，报语法错误。

也就是说，json返回的东西是有要求的：返回的东西外面还包裹了一层东西。但是这个接口并不支持这样返回。（喂，你可是Bing啊！这么自私！）

使用PHP

PHP端请求文件，写回HTML中。这样就不用ajax了。

<?php $json = @file_get_contents('http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1'); ?>
<script type='text/javascript'>
    var dataJson=<?php echo $json;?>;
    console.log(dataJson);
</script>

成功，但是好像加载速度比以前慢了一点？因为要从远程include进来一个文件 嘛。

PHP+ajax

那好，还使用异步请求吧。

先写一个php，专门用来请求json数据：

<?php echo file_get_contents('http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1'); ?>

然后发json请求到这个php上：

$.ajax({
        url:"json_bing_wallpaper.php",
        dataType:'json',
        success:function(data){
            console.log(data);
        }
});

这下似乎是好了。

下面是踩的几个坑：

1. WordPress带的jQuery不支持$，只能用jQuery。为了防止冲突。（知识不习惯而已啦～说白了还是懒）

2. 这个接口，直接访问和直接发ajax，得到的图片URL都是完整路径，但是使用PHP进行获取，得到的是相对路径……雾草，这么神奇？

3. jsonp需要接口支持，需要接口支持，需要接口支持……返回的数据应该是callback+Json数据。所以，Appcan框架里面的ajax请求获取回来的数据，都被当成了jsonp？然后最外面用了一个()进行包裹，函数名为空？ –暂时这样理解吧。反正以后我是不太可能在接触到Appcan这样的东西了。

4. 也就是说网易的天气接口是支持jsonp的。 网易天气接口、网易邮箱Greeting接口

5. WordPress的getBlogInfo('template_directory')是获取父主题的路径的，获取子主题路径可以用getBlogInfo('stylesheet_directory')。

6. 我记得以前写过一个接口的服务器本地缓存方案，接口数据拿来之后服务器本地缓存一天。嗯，我找找去。那个是想拿到中国天气网的数据接口的，用在河大首页上的。然后因为有些Bug（比如，拿到的数据里面没有天气实况，只有温度湿度，然后就自己瞎猜了个天气出来^A^），被老师否掉了…… 中国天气网Flash内提取的接口

感谢

jQuery 初试jsonp 和 PHP 使用curl获取网页内容by 小天