Ajax无法跨域访问的消除方案

图片 1

 

文章介绍

那是一篇,指导文吧…
因为写那篇小说时,实在想不出该怎么样分序。因而以促成跨域访问为目标,从基础知识往上写。最终以百度查寻智能提示为例,来教学跨域的具体接纳!

内容

先是,大家得理解怎么着是跨域,这里先驾驭一下url中各组成都部队分
以百度为例:

https://www.baidu.com:80

协议:https://
二级域名:www
超级域名:baidu.com

端口号:80

以上陆个有2个不如即为跨域访问,比如您眼下页面在https://www.baidu.com:80,你去用Ajax请求https://tieba.baidu.com:80的多寡,就也正是跨域访问!

在Ajax中,是不协助跨域访问的,所以www.baidu.com拿不到tieba.baidu.com上的数额。

那便是说那里就要采纳跨域访问的技术,尽管Ajax不援救,但大家得以应用src这些天性达到指标。

对此src那本性情,相信广大人都会想到img标签!大家都清楚img标签的src假如设置为3个网络地址时,那么就会去行使该网络地址的图形资源。

比如src=https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png

那正是说img标签就会呈请该url的多寡再次回到来,其实这就曾经是跨域访问了。因为您如今的页面并不在https://ss0.bdstatic.com上,但你却成功访问到了它的财富。

据此大家得以选拔src那么些利器,达到大家跨域访问的目标。

只是使用src此前,得先掌握一下Ajax利用请求回来的一呼百应数据实践回调的一种形式:

//先定义一个函数,等会利用该函数执行回调
function fun (obj) {
    console.log(obj);
}
//以下均为ajax请求,粗略看即可
var url = 'test.php';//访问当前目录的php文件
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status >=200 && xhr.status <300 || xhr.status == 304) {
            //请求成功后,拿到返回字符串并使用eval执行
            eval(xhr.responseText);
        } else {
            console.log('请求失败');
        }
    }
}

为了获得请求数据,上面大家使用php容易制作五个后端接口test.php

<?php
//创建一个php对象 name:kevin,age:23
$obj = array("name"=>"Kevin","age"=>"23");
//将php对象编码为json格式的字符串
$json = json_encode($obj);
//后端给客户端返回一个字符串  点为字符串拼接(相当于js中加号)
echo("fun(" . $json . ")");

请求成功后eval(xhr.responseText);这一句能够一步步解释为如下代码:

  1. eval(xhr.responseText);
  2. eval(fun({“name”:”Kevin”, “age”:”23″}));
  3. fun({“name”:”Kevin”, “age”:”23″});
  4. console.log({“name”:”Kevin”, “age”:”23″})

因而控制台打字与印刷如下:

图片 2

浏览器控制台

上述大家兑现了:依照后端重返的数量来支配具体实施某八个函数,并且应用请求回来的数目传参!

可是上述并不曾化解大家跨域须要,因为我伸手的后端接口,依然在当前域!

那么自个儿刚才说了,利用src,大家就能促成跨域。假诺大家应用img标签,使其src=”test.php”。那样我们固然得到了数额,不过img标签并不会像eval函数1样帮大家实施多少,那样数据就得不到利用。

故而对于落到实处跨域,大家有如此的须求:

  1. 有src属性
  2. 能够像eval函数壹样将数据实施!

满足上述口径的着实有,那便是script标签。

日常大家在script标签内写代码,其实写的正是字符串,并且script标签会帮我们执行。

并且大家一贯时时会用到script标签的src属性,比如引进框架时,下边以jQuery为例:
<script src="./jquery.js"></script>

骨子里它就一定于实践了之类:

<script>
    //一大堆jQ代码字符串...
</script>

由此我们能够利用script标签就行跨域访问,那里以百度为例:

那是百度搜索时,搜索提示的数目接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键字&cb=方法名

诸如小编搜索a,页面如下:

图片 3

百度查寻提醒

那便是说小编利用接口url也会赢得地点数据,如图:

图片 4

接口获取的数额

那边方法名会依据大家的参数重返,因而你请求数据成功后要履行怎么样函数,那么就往cb传该函数的不2诀窍名!

上面笔者用尽量少的代码完结一下 百度查寻提醒

<body>
//搜索框
<input type="text" id="input">
//数据请求回来后,往里面添加li
<ul id="ul"></ul>

<script>

//回调方法,数据返回后触发
    function callBack(obj) {
        //从上面图知道关键字数组位于数据的s属性中
        var array = obj.s;
        //每次触发先清空以前数据,再添加
        ul.innerHTML = "";
        for (var i = 0; i < array.length; i++) {
            var li = document.createElement('li');
            li.innerText = array[i];
            ul.appendChild(li);
        }
    }

    //url1 和 url2 为了以后方便拼接
    var url1 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
    var url2 = '&cb=';
    var ul = document.getElementById('ul');
    var input = document.getElementById('input');
    //监听输出框的键盘输入
    input.onkeyup = function () {
    //创建script标签
        var script = document.createElement('script');
        //把输入框的值和方法名作为url参数
        script.src = url1 + this.value+ url2 + callBack.name;
        //把script标签添加到body,那么就会执行代码
        document.body.appendChild(script);
        };
</script>
</body>

末尾达成效益如下:

图片 5

效果

代码仅以完成效益为目标,写得很简短,我们能够直接拷贝到本人电脑尝试~

 

话题到那边就得了了,web前端学习的能够来笔者的群,群里天天都有对应资料学习:25077781一,欢迎初学和进阶中的小伙伴。

假若想见到越来越系统的篇章和读书格局经验得以关切的微功率信号:‘web前端EDU’或然‘webxh5’关注后回复‘20一柒’能够领取一套完整的就学录制

相关文章