ajax 跨域解决之JSONP (JSON with Padding)

最新推荐文章于 2024-04-14 00:29:37 发布

我的奋斗ing

最新推荐文章于 2024-04-14 00:29:37 发布

阅读量349

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_35187942/article/details/85798917

版权

ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

跨域的问题

域：域名

跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域

三种方法：

ajax跨域搜索实例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           dl{
               border-bottom: 1px solid royalblue;
           }
       </style>
       <script>
       function fn1(data){

           var oMsg = document.getElementById("msg");
           var oList = document.getElementById("lists");

           console.log(data);

           oMsg.innerHTML = data.title.$t + ':' + data['opensearch:totalResults'].$t;

           var oEntry = data.entry;
           var html = '';

           for(var i=0;i<oEntry.length;i++){
               html += '<dl><dt>'+oEntry[i].title.$t+'</dt><dd><img src="'+oEntry[i].link[2]['@href']+'"/></dd></dl>';

           }
           alert(html);
           oList.innerHTML = html;

       }

       window.onload = function(){
           var oQ = document.getElementById("q");
           var oBtn = document.getElementById("btn");
           var oMsg = document.getElementById("msg");
           var oList = document.getElementById("lists");

           oBtn.onclick = function(){

               if(oQ.value != ''){
                   //alert(1);
                   var oScript = document.createElement('script');
                   oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';

               document.body.appendChild(oScript);
               }
           }

       }
       </script>
   </head>
   <body>
       <input id="q" type="text"/>
       <input type="button" id="btn" value="搜索" />
       <p id="msg"></p>
       <hr />
       <div id="list">

       </div>

   </body>
</html>

这里还有点小问题

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

分页查找思路：

我的奋斗ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 跨域解决之JSONP (JSON with Padding)

跨域的问题域：域名跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域三种方法： ajax跨域搜索实例：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/t..
复制链接

扫一扫