ajax跨域相关
ajax 技术使用xmlhttprequest组件附送请求时,发送请求的url和本网页的url地址必须在同一个域名下
如果需要跨域,可以使用iframe或者<javascript src="url"></script>的方式
http://www.cnblogs.com/Spring/archive/2008/10/21/1315882.html
http://exceptioneye.iteye.com/blog/1405495
新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:
只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可。
比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");
这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet。
1: var scriptBlock = document.createElement("script");
2:
3: function StartGet()
4: {
5: scriptBlock.src = "";
6: scriptBlock.src = "http://Domain2/GetData.aspx";
7: scriptBlock.type = "text/javascript";
8: scriptBlock.language = "javascript";
9: document.getElementsByTagName("head")[0].appendChild(scriptBlock);
10: scriptBlock.onreadystatechange = ReturnData;
11: }
12:
13: function ReturnData()
14: {
15: //alert(scriptBlock.readyState);
16:
17: //uninitialized Object is not initialized with data.
18: //loading Object is loading its data.
19: //loaded Object has finished loading its data.
20: //interactive User can interact with the object even though it is not fully loaded.
21: //complete Object is completely initialized.
22:
23: if("loaded" == scriptBlock.readyState)
24: {
25: var div = document.getElementById("htmldiv");
26: div.innerHTML = a.project[0].name; //a是返回的json里面的变量
27: }
28: }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "GET",
async: false,
//url: "http://test/jsonp.php",
url:"http://local.ok.com/1.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"bbb",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。回调函数名为: '+json.func);
},
error: function(){
alert("fail");
}
});
});
</script>
</body>
</html>
跨域问题存在实际上源于浏览器的同源策略(same origin policy),简单讲,同源就是要求域名,协议,端口三者都一致;
- //使用jsonp实现跨全域
- RequestAjax_JSONP = function() {
- var obj = $("#crossSitePage");
- $.getJSON("http://coolkiss.com/CrossSite.jsp?callback=?&t=" + Math.random(), function(data) {
- //alert(data);
- $("#ResponseData").html(data.content);
- });
- }
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
上面都是网络上收集的
简单点说,解决ajax跨域
1、response.setHeader("Access-Control-Allow-Origin", http://127.0.0.1/*);
2、设置domain
3、jsonp(jsonp就是js动态创建iframe后者script标签请求服务器,服务器返回的是一个js的可执行回调方法。)
4、通过带有src属性字样的标签处理,比如,<script><img><iframe>
ajax跨域相关的更多相关文章
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- 百度的一个Ajax跨域方法 JavaScript是没有域的限制
baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...
- 有关Ajax跨域请求的解决方案
前言 最近博主在赶项目进度.所以微信二次开发那边的博文一直没有更新.后续时间会慢慢记录这个学习历程的.来年公司要开发微信小程序.到时也会记录一下历程. 闲话少说,今天在工作中遇到了SpringMVC接 ...
- Ajax 跨域,这应该是最全的解决方案了
https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...
- AJAX跨域完全讲解
AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候 ...
- 细说Ajax跨域
一.什么是跨域 跨域问题来自于浏览器同源策略的限制,包括DOM同源限制和Ajax同源限制,本文探讨的是Ajax跨域.Ajax跨域指的是一个页面的Ajax只能请求和当前页面同源的数据,如果发现请求到的数 ...
- ajax跨域,这应该是最全的解决方案了
前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
随机推荐
- MEAN-全栈javascript开发框架
引言 使用JavaScript能够完整迅速做出Web应用程序,目前一套工具包括MongoDB.ExpressJS,AngularJS和Node.js越来越受到欢迎,其开发的灵活性和易用性加快开发效率, ...
- commonJS — 事件处理(for Event)
for Event github: https://github.com/laixiangran/commonJS/blob/master/src/forEvent.js 代码 (function(w ...
- Octave入门
Octave/Matlab Tutorial Octave/Matlab Tutorial Basic Operations 你现在已经掌握不少机器学习知识了 在这段视频中 我将教你一种编程语言 Oc ...
- 悟透javascript读书笔记
1.undefined,null,0,"" 这四个值转换为逻辑值时是false,其他无论简单类型值,对象或者函数转换过来都是true 2.如图 第一个是“声明了一个变量,给变量赋 ...
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- VMware Workstation 12 Pro虚拟机下载(含序列号)
VMware Workstation 12 Pro 官网下载地址:http://www.vmware.com/products/workstation/workstation-evaluation V ...
- 在excel单元格中提取信息
平时在excel中处理数据的时候,肯定会遇到在单元格提取信息的情况,比如在地址中提取省.市.地区等,如果数据源内容规整的话,可以直接使用left().right().mid()等函数直接提取,但是大多 ...
- ThreadLocal 那点事儿
原文出处: 黄勇 ThreadLocal,直译为“线程本地”或“本地线程”,如果你真的这么认为,那就错了!其实,它就是一个容器,用于存放线程的局部变量,我认为应该叫做 ThreadLocalVaria ...
- hdu----(1402)A * B Problem Plus(FFT模板)
A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Nginx+Php-fpm+MySQL+Redis源代码编译安装指南
说明:本教程主要包括以下三个部分: 1. 源代码编译安装Nginx 2. 源代码编译安装php以及mysql.redis扩展模块 3. 配置虚拟主机 文中所涉及安装包程序均提供下载链接,欢迎使用 运行 ...