jquery中的jsonp和js中的jsonp还有配合php实现的jsonp。

最近在做一个自己的网站，才知道一个前端需要学习的东西到底有多少。

来吧~步入正题，我的网站空间很小。所以在资源上，就有点吼不住了。跨域拿数据肯定是不可避免的了。

一、原生js；

我们知道他的原理，就是使用sec属性可以跨域拿数据。

一般如果数据是字符串形式包括json数据，那么都是用一个script标签去拿到然后处理，但如果是图片的，比如图片的api借口。我们可以这样写。

二、如果要配合后台php拿数据呢？那就更加简单了。php就是一个中转站，他不存在跨域。

前台：

  var box=document.getElementById('box');

  var yes=  document.getElementById('btn').onclick=function () {
        var xhr=new  XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4){
                if (xhr.status==200){
                    var data=JSON.parse(xhr.responseText);
                    var img='';
                   for (var i=0;i<data.list.length;i++){
                       img+="<img src="+'http://tnfs.tngou.net/image'+data.list[i].src+">";
                   }
                   box.innerHTML=img;
                }else {
                    box.innerHTML=404
                }
            }
        };
        xhr.open('POST','data.php',true);
        xhr.send();
    }
    yes ();

　　后台：（php）

$host = 'http://www.tngou.net/tnfs/api/show?;
$randomNumber=file_get_contents($host);
echo $randomNumber;

　　小结：如果想动态拿不同页面，在$host = 'http://www.tngou.net/tnfs/api/show?;里？后面的id=10可以写成id=$bianliang;即这个你定义的变量是来监听前台输入过来的页数。很简单，不在赘述。