ajax的跨域处理

最新推荐文章于 2021-12-21 20:49:56 发布

webmxj

最新推荐文章于 2021-12-21 20:49:56 发布

阅读量492

点赞数

分类专栏： js 文章标签： ajax 跨域 js

本文链接：https://blog.csdn.net/div_ma/article/details/72555369

版权

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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>

webmxj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的跨域处理

1.我们为什么要去做跨域处理? 答:出于安全考虑,浏览器采用了同源策略规定了只能拿同源的资料.所有我们需要跨域来获取资料.2.什么是域名?什么是跨域? 一个域名是由http://(协议) www(子域名) . abc.com(主域名) : 8080(端口号) / script/jquery.js(请求资源地址)当协议/子域名/主域名/端口号中任意一个不相同时,都算作不同域; 不同域之间相互请求
复制链接

扫一扫