ajax的跨域处理

1.我们为什么要去做跨域处理?
答:出于安全考虑,浏览器采用了同源策略规定了只能拿同源的资料.所有我们需要跨域来获取资料.

2.什么是域名?什么是跨域?
一个域名是由http://(协议) www(子域名) . abc.com(主域名) : 8080(端口号) / script/jquery.js(请求资源地址)

当协议/子域名/主域名/端口号中任意一个不相同时,都算作不同域;
不同域之间相互请求资源,就算做跨域;

怎么处理跨域?

方法一 : 代理 (这个一般是后台做好一个接口然后直接调用);

方法二 : jsonp(这个比较常用);

<script>标签:
src的作用 : 加载(包含指定的外部文件)
可以跨域包含
被包含的资源可以是任何类型的文件(可以是txt,php等)
他只关注被包含的文件的内容是否是合法的JS
原理
定义函数
包含外部文件,在被包含的文件中执行调用定义好的函数
参数的(数据)的实现
问题:包含就调用,通过动态创建<script>实现按需调用
问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称


JSONP : JSON with Padding
    1.script标签
    2.script标签加载资源是没有跨域问题的

    在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
    然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去

用JSONP写百度搜索效果如下;
这里写图片描述

<!DOCTYPE html>
<html>
    <head id='head'>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }   
            body{
                padding:20px;
                margin:20px;
            }
            ul{
                width: 200px;
            }           
            #tex{
                width: 200px;
                height: 30px;
                line-height:30;
            }
            li{
                width: 200px;
                height: 30px;
                list-style:none;
            }
            li a{
                display:block;
                color:#000;
                line-height:30px;
                text-decoration:none;
            }
            ul{
                border:1px solid #d6d6d6;
            }
            li a:hover{
                background:#d6d6d6;
            }
        </style>
    </head>
    <body>
        <input type="text" id="tex" />
        <ul>
            <!--<li><a href="###">旅游</a></li>
            <li><a href="###">旅游</a></li>
            <li><a href="###">旅游</a></li>
            <li><a href="###">旅游</a></li>-->
        </ul>
    </body>
    <script>
        var oHead=document.getElementById('head');
        var otext=document.getElementById('tex');

        otext.onkeyup=function(){
            var keyword=otext.value;
            //获取文本框输入的文本
            var scr=document.createElement('script');
            //动态创建'script标签';
            //赋予标签src属性为百度搜索的接口
            scr.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+keyword+'&cb=fn';
            oHead.appendChild(scr);
        }

        function fn(data){

            var oUl=document.querySelector('ul');
            //因为上面已经建立了端口的链接实现了跨域所以跨域获取到data的数据
            var arr=data.s;
            //接下来就是DOM的处理操作 在Ul中添加div的值为data中的属性值 这里获取到的值是json 也有可能是其他所有大家用之前最好先console一下看看是什么在进行解析调用
            var html="";
            for(var i=0;i<arr.length;i++){
                html+='<li><a href="https://www.baidu.com/s?wd='+arr[i]+'" target="_blank">'+arr[i]+'</a></li>';
            }
                oUl.innerHTML=html;

            }

    </script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值