文章介绍

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

内容

首先，我们得明确什么是跨域，这里先了解一下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利用请求回来的响应数据执行回调的一种方法：

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

为了拿到请求数据，下面我们利用php简单制作一个后端接口test.php

  1. <?php
  2. //创建一个php对象 name:kevin,age:23
  3. $obj = array("name"=>"Kevin","age"=>"23");
  4. //将php对象编码为json格式的字符串
  5. $json = json_encode($obj);
  6. //后端给客户端返回一个字符串  点为字符串拼接(相当于js中加号)
  7. 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"})

因此控制台打印如下：

浏览器控制台

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

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

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

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

  1. 有src属性
  2. 可以像eval函数一样将数据执行！

满足以上条件的确实有，那就是script标签。

平时我们在script标签内写代码，其实写的就是字符串，并且script标签会帮我们执行。

并且我们平时经常会用到script标签的src属性，比如引入框架时，下面以jQuery为例：
<script src="./jquery.js"></script>

其实它就相当于执行了如下：

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

因此我们可以利用script标签就行跨域访问，这里以百度为例：

这是百度搜索时，搜索提示的数据接口

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

比如我搜索a，页面如下：

百度搜索提示

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

接口获取的数据

这里方法名会根据我们的参数返回，因此你请求数据成功后要执行什么函数，那么就往cb传该函数的方法名！

下面我用尽量少的代码实现一下 百度搜索提示

  1. <body>
  2. //搜索框
  3. <input type="text" id="input">
  4. //数据请求回来后，往里面添加li
  5. <ul id="ul"></ul>
  7. <script>
  9. //回调方法,数据返回后触发
  10.     function callBack(obj) {
  11.         //从上面图知道关键字数组位于数据的s属性中
  12.         var array = obj.s;
  13.         //每次触发先清空以前数据,再添加
  14.         ul.innerHTML = "";
  15.         for (var i = 0; i < array.length; i++) {
  16.             var li = document.createElement('li');
  17.             li.innerText = array[i];
  18.             ul.appendChild(li);
  19.         }
  20.     }
  22.     //url1 和 url2 为了以后方便拼接
  23.     var url1 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
  24.     var url2 = '&cb=';
  25.     var ul = document.getElementById('ul');
  26.     var input = document.getElementById('input');
  27.     //监听输出框的键盘输入
  28.     input.onkeyup = function () {
  29.     //创建script标签
  30.         var script = document.createElement('script');
  31.         //把输入框的值和方法名作为url参数
  32.         script.src = url1 + this.value+ url2 + callBack.name;
  33.         //把script标签添加到body,那么就会执行代码
  34.         document.body.appendChild(script);
  35.         };
  36. </script>
  37. </body>

最后实现效果如下：

效果

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

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

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

Ajax不能跨域访问的解决方案的更多相关文章

  1. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  2. ajax实现跨域访问

    ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...

  3. Ajax实现跨域访问最新方式

    在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置. ...

  4. ajax跨域访问的解决方案

    今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...

  5. Ajax之跨域访问与JSONP

    前言 同源策略的限制,使得ajax无法发出跨域请求.在许多情况下,我们需要让ajax支持跨域.以下是其中一种解决方案(JSONP).JSONP解决了跨域数据访问的问题. 在html中,具有src属性的 ...

  6. ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 （转载）

    什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...

  7. Ajax.Nodejs.跨域访问

    使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...

  8. ajax实现跨域访问的两种方式

    一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...

  9. Ajax实现跨域访问的两种方法

    调程序时遇到"已拦截跨源请求:同源策略禁止读取位于--的远程资源",这是因为通过ajax调用其他域的接口会有跨域问题. 解决方法如下: 方法一:服务器端(PHP)设置header头 ...

随机推荐

  1. virtualenv简介以及一个比较折腾的scrapy安装方法

    本文来自网易云社区 作者:沈高峰 virtualenv + pip 安装python软件包是一种非常好的选择,在大部分情况下安装python软件包是不需要求助于sa的. 使用自己的一个工作副本也是写p ...

  2. 新浪微博API Oauth2.0 认证

    原文链接: http://rsj217.diandian.com/post/2013-04-17/40050093587 本意是在注销账号前保留之前的一些数据.决定用python 爬取收藏.可是未登录 ...

  3. ironic baremetal node rescue/unrescue mode

    环境ironic-api ironic-conductor,ironicclient均升级为Queens版本 官网说明API版本为1.38才支持rescue/unrescue,所以修改下openrc文 ...

  4. leetcode 214. 最短回文串 解题报告

    给定一个字符串 s,你可以通过在字符串前面添加字符将其转换为回文串.找到并返回可以用这种方式转换的最短回文串. 示例 1: 输入: "aacecaaa" 输出: "aaa ...

  5. 存储 磁盘大于2TB 大数据存储一个盘 解决方法

    1.vmware虚拟机环境下可以做裸映射 但是一个存储 只能对应一个虚拟主机裸映射 我已经在一个10TB的存储上做好多个主机,就不适用了 2.在虚拟机上添加5个2TB磁盘,磁盘管理中新建 带区卷 可以 ...

  6. [bzoj] 2453 维护数列 || 单点修改分块

    原题 询问区间有种个颜色,单点修改某个位置. 修改次数<=1000 维护pre[i]为前一个与当前位置颜色一样的位置. 询问时以pre为关键字sort,lower_bound找pre<x的 ...

  7. codeforces school mark（贪心）

    ///太渣,看了题解才知道怎么做,自己想感觉想不清楚 ///题解:首先在给出的序列里判断小于median的个数,若大于(n-1)/2,则不满足,否则看另一个条件 ///这样我们可以把中位数左边还要添加 ...

  8. BZOJ2716 [Violet 3]天使玩偶 【CDQ分治】

    题目 输入格式 输出格式 输入样例 //样例太长就不贴了.... 输出样例 //见原题 提示 题解 我们将曼哈顿距离式子中的绝对值去掉,每次只考虑x,y比当前点小的更新答案. 为了使所有点都对答案进行 ...

  9. vs修改快捷键

    https://jingyan.baidu.com/album/9158e0006e10d8a254122826.html?picindex=1 https://sanwen8.cn/p/114IrR ...

  10. 无法定位程序输入点GetTickCount64 在动态链接库kernel32.dll上

    winxp系统,在使用boost中的thread中的sleep的时候出现“无法定位程序输入点GetTickCount64 在动态链接库kernel32.dll上”的错误, 1.在引用boost库之前( ...