JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-6-17 06:08:16

文章介绍

这是一篇，引导文吧... 因为写这篇文章时，实在想不出该如何分序。因此以实现跨域访问为目的，从基础知识往上写。最后以百度搜索智能提示为例，来讲解跨域的具体应用！

内容

首先，我们得明确什么是跨域，这里先了解一下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);这一句可以一步步分解为如下代码：

eval(xhr.responseText);
eval(fun({"name":"Kevin", "age":"23"}));
fun({"name":"Kevin", "age":"23"});
console.log({"name":"Kevin", "age":"23"})

因此控制台打印如下：

浏览器控制台

以上我们实现了：根据后端返回的数据来决定具体执行某一个函数，并且利用请求回来的数据传参！

但是以上并没有解决我们跨域需求，因为我请求的后端接口，依然在当前域！

那么我刚才说了，利用src，我们就能实现跨域。假如我们使用img标签，使其src="test.php"。这样我们虽然拿到了数据，但是img标签并不会像eval函数一样帮我们执行数据，这样数据就得不到利用。

所以对于实现跨域，我们有这样的需求：

有src属性
可以像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，页面如下：

百度搜索提示

那么我利用接口url也会得到上面数据，如图：

接口获取的数据

这里方法名会根据我们的参数返回，因此你请求数据成功后要执行什么函数，那么就往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;
            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>

最后实现效果如下：

效果

代码仅以实现效果为目的，写得很简短，大家可以直接拷贝到自己电脑尝试~

话题到这里就结束了，web前端学习的可以来我的群，群里每天都有对应资料学习：250777811，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

Ajax不能跨域访问的解决方案

内容