Ajax不能跨域访问的解决方案
这是一篇,引导文吧... 因为写这篇文章时,实在想不出该如何分序。因此以实现跨域访问为目的,从基础知识往上写。最后以百度搜索智能提示为例,来讲解跨域的具体应用!
内容
首先,我们得明确什么是跨域,这里先了解一下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[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>
最后实现效果如下:
代码仅以实现效果为目的,写得很简短,大家可以直接拷贝到自己电脑尝试~
话题到这里就结束了,web前端学习的可以来我的群,群里每天都有对应资料学习:250777811,欢迎初学和进阶中的小伙伴。
如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频
Ajax不能跨域访问的解决方案的更多相关文章
- ajax 跨域访问的解决方案
ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
- ajax实现跨域访问
ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...
- Ajax实现跨域访问最新方式
在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置. ...
- ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...
- Ajax之跨域访问与JSONP
前言 同源策略的限制,使得ajax无法发出跨域请求.在许多情况下,我们需要让ajax支持跨域.以下是其中一种解决方案(JSONP).JSONP解决了跨域数据访问的问题. 在html中,具有src属性的 ...
- ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 (转载)
什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...
- Ajax.Nodejs.跨域访问
使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...
- ajax实现跨域访问的两种方式
一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...
- Ajax实现跨域访问的两种方法
调程序时遇到"已拦截跨源请求:同源策略禁止读取位于--的远程资源",这是因为通过ajax调用其他域的接口会有跨域问题. 解决方法如下: 方法一:服务器端(PHP)设置header头 ...
随机推荐
- python开发记录第一篇
1. 安装pyCharm,下载地址https://www.jetbrains.com/pycharm/ 2. 注册license,修改windwos系统hosts,文件路径为:C:\Windows\S ...
- luogu4196 [CQOI2006]凸多边形 半平面交
据说pkusc出了好几年半平面交了,我也来水一发 ref #include <algorithm> #include <iostream> #include <cstdi ...
- thinkphp3.1.3验证码优化
现状 thinkphp3.1.3版本中的验证码字符分布不均匀,在自定义宽高时很明显. 调用代码: Image::buildImageVerify(6, 5, 'png', 150, 50); 生成的验 ...
- 记录下MoKee编译过程
纯属记录帖 关注和了解这个rom有段时间了. 最近有需要了解odex,折腾了几天还是在坑里. 索性,先编译下MoKee看看. 之前make过 4.2 和 5.1 ,刷到模拟器和N5里. 编译教程可以参 ...
- cookie不能删除
cookie不仅仅包含一个键值对,还包含域 domain 路径path, 一般domain是请求的地址 www.baidu.com/news.html 那domain就是www.baidu.com ...
- JMeter学习笔记(九) 参数化2--CSV Data Set Config
2.CSV Data Set Config 1)添加 CSV Data Set Confi 2)配置CSV Data Set Config 3)添加HTTP请求,引用参数,格式 ${} 4)执行HTT ...
- 孤荷凌寒自学python第四十天python 的线程锁RLock
孤荷凌寒自学python第四十天python的线程锁RLock (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 因为研究同时在多线程中读写同一个文本文件引发冲突,所以使用Lock锁尝试同步, ...
- 最干净的pyinstaller打包成exe应用程序方法
在anaconda环境下进行pyinstaller打包后,程序非常大,70行代码打包后有280MB,这是因为会将conda环境携带的库都打包进去导致的.为了获得更纯净的包环境,我们需要安装纯pytho ...
- 重现ssd遇到的问题
首先是create_list.sh和create_data.sh中的data_dir的路径得修改. 然后是在create_data.sh文件调用$caffe_root下的scripts目录中的crea ...
- 如何将查询到的数据显示在DataGridView中
背景介绍: 数据库中的T_Line_Info表中存放着学生上机的记录,也就是我们需要查询上机记录的表,其中具体内容为: 界面设计如下: 右击DataGridView控件,选择编辑列,设计它的列名. 代 ...