关于ajax跨域的一些说说
跨域:跨当然是跨过去,域当然是别的服务器 (说白点就是去别服务器上取东西) 只要协议、域名、端口有任何一个不同,都被当作是不同的域
ajax 是一种请求响应无刷新技术(xmlhttqrequest对象请求服务器 服务器响应数据到客户端)
当然ajax跨域就是请求别的服务器的东西,好了说了这么多,下面看一个类似跨域原理的东西
下面是我创建的两个应用程序 test1 和test 2
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/test1.js"></script>
</head>
<body> </body>
</html>
test1.js 代码
alert('我是test1网站');
弹出 alert('我是test1网站')
//下面是testWeb2应用程序
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://localhost:10603/testWeb1/Scripts/test1.js"></script>
</head>
<body> </body>
</html>
testWeb2应用程序 也会弹出 alert('我是test1网站')
哦,我能引求到到test1Web应用程序的js 没错的确能请求到 因这功要归于 src
<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。
所以我们ajax跨域可以利用 src来实现(因为真实的ajax跨域本是一个 伪命题)
下面是引用百度百科关于josnp的一段话
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
//上个请求google的地址
q是搜索关键字,callback 是回调函数名
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/test1.js"></script> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript"> $(function () {
$("#btnAdd").click(function () {
$.ajax({
type: "get",
url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result",
success: function (data) {
alert(data);
} });
});
});
</script>
</head>
<body>
<input type="button" id="btnAdd" value="测试" />
</body>
</html>
//IE 和google chrome弹出效果如下:
//这时候我们直接用XMLHttpRequest请求不同域上的数据时,是不可以了
但是在页面用src 引用不同的脚本是可以的json正是用了这个特性
<script type="text/javascript">
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.src = src;
document.body.appendChild(script);
}
//调用加载ScrptTag函数
window.onload = function(){
//搜索apple,将自定义的回调函数名result传入callback参数中
addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result"); }
//自定义的回调函数result
function result(data) {
//我们就简单的获取apple搜索结果的第一条记录中url数据
alert(data.responseData.results[0].unescapedUrl);
alert(data.responseData.results[0].cacheUrl);
} </script>
关于ajax跨域的一些说说的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- windows系统IIS环境下安装memcache的方法
1.首先下载memcached-1.2.1-win32.zip 下载地址http://download.csdn.net/detail/u011986449/8110579 这下是windows下的版 ...
- 微信小程序 - 贝塞尔曲线(购物车效果)
转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载
- QQ互联简单例子,七彩花都提供
QQ互联简单例子 源码由七彩花都论坛提供 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- 《学习opencv》笔记——矩阵和图像操作——cvCrossProduct and cvCvtColor
矩阵和图像的操作 (1)cvCrossProduct函数 其结构 void cvCrossProdust(//计算两个三维向量的叉积 const CvArr* src1, const CvArr* s ...
- chrome 此网页正试图从未经验证的来源加载脚本
chrome 此网页正试图从未经验证的来源加载脚本 CreateTime--2018年5月25日08点02分 Author:Marydon 1.情景还原 以我的网站为例,https://www.c ...
- 增强基本选择器[selector_3.html]
增强基本选择器[selector_3.html] $("ul li:first") $("ul li:last") $("table tr:even& ...
- 多语言 SEO
https://productforums.google.com/forum/?hl=zh-CN#!topic/webmaster-zh-cn/I0MMsm737pc
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- C++ vector 和 map的删除
1.连续内存序列容器(vector,string,deque) 序列容器的erase方法返回值是指向紧接在被删除元素之后的元素的有效迭代器,可以根据这个返回值来安全删除元素. vector<in ...
- Mysql对结果集的各种处理操作
c++操作- 查询mysql结果集 用mysql进行数据查询的时候,mysql会返回一个结果集给我们.接着我们需要调用mysql的api,从这个结果集中取得我们要的数据. 取完数据之后,需要释放这个结 ...