2019独角兽企业重金招聘Python工程师标准>>> hot3.png

ajax跨域请求,目前已用几种方法实现:

1)用原生js的xhr对象实现。

var url="http://freegeoip.net/json/";
              
               //创建xhr对象
               function createCORSXhr(url,method){
                    var xhr=new XMLHttpRequest();
                    if("withCredentials" in xhr){
                              xhr.open(method,url,true);
                         }else if(typeof XDomainRequest !=="undefined"){
                              xhr=new XDomainRequest();
                              xhr.open(method,url);    
                         }else
                              xhr=null;
                         return xhr;                        
                    }
                   
               //创建ajax请求,支持跨域
               function sendAjaxRequest(){
                    var xhr=createCORSXhr(url,"get");
                    xhr.οnlοad=function(){
                         if(xhr.readyState==4){
                         if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
                              alert(xhr.responseText);
                              }else{
                                   alert(" ajax error...")
                                   }
                         }
                    };
                    xhr.οnerrοr=function(){
                         alert("error code:"+xhr.status)
                    }
                    xhr.send(null);
                    };

sendAjaxRequest()

这种方式需要获取相应对象的支持,对于IE,则是XDomainRequest,此种方式cookie不会参与传递。该方式应用了CORS(跨域资源共享)技术,说到底,就是在请求头和响应头中做手脚。在请求头中,加上Origin:协议+域名+端口,当然也可以Origin:null。在响应头中,服务端返回Access-control-Allow-Origin:*.

 

2),通过jsonp数据来实现,说白了,jsonp就是js可执行文件由于<script>和<link>,<img>加载的文件不受同源限制,所以可以通过设置src和href来加载相应的跨域json或者xml数据,但是这种方式需要服务端相配合(服务端需要取出请求字符串中的回调函数名,并且返回给客户端)。jsonp的格式为:回调函数名(jsonData)。

     jQuery中的$.getJSON()默认实现了这种方式,只需要在url?callback=?即可,当然也可以手动指定回调函数名。

 

该种方式一定需要服务端的配合。

 

测试网站:http://freegeoip.net/json/

3),第三个就是websocket了,当然需要这样的服务器支持。标准的http服务器是不支持webSocket的。Tomcat7.XX支持websocket。

4),

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

比如:有一个页面a.html,它里面有这样的代码:

QQ截图20130613230631

再看看b.html页面的代码:

QQ截图20130613230631

a.html页面载入后3秒,跳转到了b.html页面,结果为:

QQ截图20130613230631

我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话,那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然,如果有需要,其中的任何一个页面都可以对window.name的值进行修改。注意,window.name的值只能是字符串的形式,这个字符串的大小最大能允许2M左右甚至更大的一个容量,具体取决于不同的浏览器,但一般是够用了。

上面的例子中,我们用到的页面a.html和b.html是处于同一个域的,但是即使a.html与b.html处于不同的域中,上述结论同样是适用的,这也正是利用window.name进行跨域的原理。

下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。

比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。

data.html页面里的代码很简单,就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码:

QQ截图20130613230631

那么在a.html页面中,我们怎么把data.html页面载入进来呢?显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面,因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟a.html页面同一个域才行,不然根据前面讲的同源策略,a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

看下a.html页面的代码:

QQ截图20130613230631

上面的代码只是最简单的原理演示代码,你可以对使用js封装上面的过程,比如动态的创建iframe,动态的注册各种事件等等,当然为了安全,获取完数据后,还可以销毁作为代理的iframe。网上也有很多类似的现成代码,有兴趣的可以去找一下。

转载于:https://my.oschina.net/u/3687565/blog/1549570

解决ajax跨域请求 (总结)相关推荐

  1. 用iframe设置代理解决ajax跨域请求问题

    用iframe设置代理解决ajax跨域请求问题 参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...

  2. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    本地主机作服务器解决AJAX跨域请求访问数据的方法 参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...

  3. ajax error parsererror,完美解决ajax跨域请求下parsererror的错误

    AJAX 的 完美解决ajax跨域请求下parsererror的错误 ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLH ...

  4. js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...

    先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...

  5. Spring Boot学习总结(6)——SpringBoot解决ajax跨域请求问题的配置

    ajax是一种创建交互式网页应用的网页开发技术,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换.而ajax的跨域问题则是请求了其他项目的接口地址,当协议.子域名.主域名.端口号中 ...

  6. Django解决ajax跨域请求问题

    提示:以下是本篇文章正文内容,下面案例可供参考 一.什么是跨域请求? 当我们使用前端通过浏览器对后台接口发起请求的时候,浏览器判断我们的请求的目标接口所在主机和本机的协议.域名(ip).端口号是否相同 ...

  7. jQuery利用JSONP解决AJAX跨域请求

    出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. JSON(Ja ...

  8. PHP后端API接口解决Ajax跨域请求的方式

    如果我们是前后端分离,且不再同一域的情况下,前端使用Ajax请求后端的数据的时候,就会出现跨域的问题. 在前端我们可以使用获取jsonp格式来应对跨域问题,但是这种方式比较难用,如果前端后端都是可以进 ...

  9. ajax跨域请求时 会出现什么问题,在用AJAX跨域请求时遇到的问题

    刚刚接触ajax就遇到一个词--跨域. 在我百度了各种资料以后总结了一句话:"只要不是在一个协议.域.名端口下,都属于跨域(127.0.0.1本地也属于跨域)". 在做ajax请求 ...

  10. ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...

最新文章

  1. 机器学习之SVM原理与案例
  2. 【Zabbix】配置 腾讯企业邮箱 发送报警邮件
  3. apt-get install php 指定版本号,如何使用apt-get升级单个软件包?
  4. Java中“==”和equals()的区别
  5. android中止线程_Android如何结束并重启线程? | 学步园
  6. 我的第一个python web开发框架(11)——工具函数包说明(二)
  7. 中通滤波matlab,如何用MATLAB将低通改成中通滤波器
  8. 容器编排技术 -- Kubernetes kubectl create service clusterip 命令详解
  9. 2015 年最流行的 10 个 Linux 发行版
  10. 对java并发性的理解,【图片】你了解过Java并发编程:性能、扩展性和响应的高端操作吗?【java吧】_百度贴吧...
  11. 每周分享第 17 期
  12. 获取小程序页面跳转链接
  13. Spring Cloud Alibaba Sentinel(七)受权规则 黑白名单
  14. windows批量部署
  15. 前端笔记1 HTML基础
  16. 第一讲:高性能计算基础知识讲解
  17. 郭德纲继10月1日发微博感叹“暗箭起同行”,疑似暗讽姜昆“江郎才尽”后
  18. Gundam Seed 主题曲 歌词
  19. PS打开PSD文档服务器未响应,优化你的 PSD 文件防止 Photoshop 崩溃卡死 - 文章教程...
  20. transition过渡

热门文章

  1. php怎么异步执行,php怎么实现异步
  2. C# 读取csv、xls、xlsx表格(读取到datatable、sql查询语句读取)
  3. Go 关键字 Select
  4. php随机获取数组的值
  5. CSS样式大全(转)
  6. JDK打印的疑问:CUPSPrinter有何用处?
  7. 评微软裁员测试:自动化测试并不能代替人工
  8. 全网首发:LINUX编译JNA:编译libffi
  9. deb方式安装openjdk8
  10. 窗台上晒了一本书,三个人问了三个问题