JSONP对另一个域进行Ajax请求

最新推荐文章于 2020-11-26 21:05:30 发布

xiantouxu

最新推荐文章于 2020-11-26 21:05:30 发布

阅读量239

点赞数

分类专栏： javascript 文章标签： javascript jsonp

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504709

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

问题描述：想要使用一个Web服务API来查询数据，而Ajax同源策略阻止了跨域请求。
解决方案：一种方法是使用JSONP（JavaScript Object Notation，with Padding）来解决安全问题。首先创建一个新的script元素，用URL作为API方法调用的端点。

<!DOCTYPE html>
<html>
<head>
  <title>JSONP 跨域请求</title>
</head>
<body>
  <div id="result"></div>
  <script type="text/javascript">
  function addScript(url){
    var script = document.createElement("script");
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
  addScript('https://api.flickr.com/services/rest/?method=flickr.photos.search&user_id=NSID&api_key=yourapikey&page=1&format=json&jsoncallback=processPhotos');
 /*addScript('https://baike.baidu.com/pic/flickr/714868/0/a8773912b31bb0513b6ec394347adab44bede0c0?fr=lemma&ct=single#aid=0&pic=a8773912b31bb0513b6ec394347adab44bede0c0/');*/
  //全局地分配照片，在加载前调用
  function processPhotos(obj){
    photos = obj.photos.photo;
    var str = '';
    photos.foreach(function(photo){
      str += photo.title +'<br/>';
    });
    document.getElementById('result').innerHTML = str;
  }
  </script>
</body>
</html>