您的位置：首页 > Web前端 > JavaScript

ajax的跨域处理之JSONP

2017-05-22 14:05 330 查看

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于
server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML
的<script>元素是一个例外。利用 <script>
元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON
资料，而这种使用模式就是所谓的 JSONP.

步骤：

         1,在document中动态创建<script>

2,给<script>
的属性src添加url(你的资源访问路径)


3,在url中添加calback|cb(回调函数)


4,写回调函数(处理数据你接收的数据).

百度搜索Demo:

Html:

         <body>
       <input
type="text"
/>
       <ul>
           <li><a
href="###">fsaef</a></li>
       </ul>
    </body>

Css:

    <style>

*{

margin:0;

padding:0;

}

body{

padding:100px;

}

ul{

width:150px;

background-color:#EEEEEE;

display:none;

}

ulli{

list-style:none;

}

ullia{

display:block;

width:150px;

height:30px;

line-height:30px;



}

ullia:hover{

background-color:#AAA;

color: skyblue;

}
       </style>

JS:

    <script
type="text/javascript">

var oInput=document.querySelector('input');
         var
oUl=document.querySelector('ul');
         var
aUlLis=document.querySelector('ul
li');
         var
oHead=document.getElementById('head');


oInput.onkeyup=function(){

var aOldScript=document.getElementsByClassName('num1');

if(aOldScript.length>=1){
                   oHead.removeChild(aOldScript[0]);//删除动态生成的旧的<script>

}



var oScript=document.createElement('script');//创建<script>节点



oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+oInput.value+'&cb=fn'//给oScript添加资源路径和回调函数

oScript.className="num1";
              oHead.appendChild(oScript);//在文档尾端添加节点

oUl.style.display='block';


         }


function fn(data){//编写回调函数（处理返回的数据）

var arr=data.s;

var str='';

for(var
i=0;i<arr.length;i++){
                   str+='<li><a href="###">'+arr[i]+'</a></li>';
                   oUl.innerHTML=str;

var aUlLias=document.querySelectorAll('ul
li a');

for(var
i=0;i<aUlLias.length;i++){


                       (function(i){
                            aUlLias[i].onclick=function(){
                                 oInput.value=this.innerText;
                                 oUl.style.display='none';

window.open('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=0&rsv_idx=1&tn=baidu&wd='+this.innerText);
                            }
                       })(i);


                   }
              }



}



     </script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax ajax跨域

相关文章推荐

新的分享

章节导航