AjaxAjax不克跨域访问的缓解方案

Ajax 1

 

文章介绍

随即是相同首,引导文吧…
因为写这篇稿子时,实在怀念不发出该如何分序。因此为促成跨域访问也目的,从基础知识往上描绘。最后因百度搜索智能提醒啊条例,来教学跨域的有血有肉使用!

内容

首先,我们得显然什么是跨域,这里先了解一下url中列片
为百度为例:

https://www.baidu.com:80

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

端口号:80

上述4只来一个不比就是为跨域访问,比如你时页面在https://www.baidu.com:80,你去用Ajax请求https://tieba.baidu.com:80的数额,就相当给跨域访问!

当Ajax中,是勿支持跨域访问的,所以www.baidu.com拿不到tieba.baidu.com直达之数据。

那么这里就要用跨域访问的技巧,虽然Ajax不支持,但我们好采用src这个特性上目的。

对src这个特性,相信广大人数犹见面想到img标签!我们都理解img标签的src如果设置为一个网络地址时,那么就是见面失掉下该网络地址的图纸资源。

比如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″})

为此控制台打印如下:

Ajax 2

浏览器控制台

上述我们实现了:根据后端返回的数来决定具体实施某一个函数,并且用请求回来的数码传参!

只是上述并无缓解我们跨域需求,因为自身伸手的后端接口,依然在当前域!

那么自己刚说了,利用src,我们尽管可知促成跨域。假如我们采取img标签,使其src=”test.php”。这样咱们虽以到了多少,但是img标签并无见面像eval函数一样拉咱尽多少,这样数据就是得不至使用。

故而于落实跨域,我们发出这样的求:

  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,页面如下:

Ajax 3

百度搜索提示

这就是说自己使用接口url也会见取得地方数据,如图:

Ajax 4

接口获取的数目

此间方法名会根据我们的参数返回,因此若请数据成功后而实践什么函数,那么即使向cb传该函数的主意名!

脚我用尽量少之代码实现转 百度搜索提示

<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>

末实现力量如下:

Ajax 5

效果

代码仅盖实现力量呢目的,写得异常简短,大家可直接拷贝到温馨电脑尝试~

 

话题到此虽终止了,web前端上的可以来自己之许多,群里每天都产生指向承诺资料学习:250777811,欢迎初学和进阶中之同伙。

倘想看更为系统的文章和学习方法更得以关注之微信号:‘web前端EDU’或者‘webxh5’关注后卷土重来‘2017’可以提一拟完整的就学视频

相关文章