javascript实现跨域的方法汇总


Posted in Javascript onJune 25, 2015

由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名、协议、端口)的资源。

json与jsonp的区别:

    JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

script标签经常被用来加载不同域下的资源,可以绕过同源策略。(有src属性的都可以获取异域文件)。
如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval)。

方法一:

利用script标签请求(<script src="http://....jsp?callback=回调函数名"></script>)
在使用script标签请求前,先进行回调函数的申明调用,

<script>
    function 回调函数名(data数据){  。。。。 }
  </script>
  <script src="http://....jsp?callback=回调函数名"></script>

使用JSON来传递javascript对象是一种最简单的方式了,这样的跨域通讯方式称为JSONP。
   
    远程服务器拼凑字符串:
        回调函数名( {"name1":"data1","name2","data2"} )
    这种以后台拼凑json数据,利用回调函数传参的形式返回给客户端
    (可以直接调用相当于已经将获取的字符串进行eval了处理)
    例如:function databack(data){ alert(data.name1) }  // 会输出显示"data1"

方法二:

jquery实现异域加载方法更为简单(与ajax异步请求方式相同)

$.ajax({
    type : "get",
    dataType:"json",
    success : function(data){ alert(data.name1) };
  })

    或者简写形式
    var url = "http://.....jsp?callback=?"; // 在jquery中此处的callback值可以为任意,因为

jquery进行处理后都是利用success回调函数进行数据的接受;
    $.getJSON( url, function(data){ alert(data.name1) });

方法三:

ajax跨域之服务端代理
    在同源的后台设置一个代理程序(proxy.jsp...);在服务器端与异域的服务器交互。
   
    jquery前台传输数据:
        例如:

$.get(
   
 'http://。。。.jsp',  // 代理程序地址
   
 {
    
   name1 : "data1",
    
   name2 : "data2"
    
 },
   
  function(data){
  
  if(data == 1) alert('发送成功!');
    
 }
 
 );

    后台数据的处理 :

String data1 = request.getParameter("name1");
    ........
    // 此处的url为另一域下的地址并带有参数
    String url = "http://.....com/.../sss.jsp?" + "name1=" + data1+ "name2=" + 

data2;
    // 跳转到另一个域进行数据的处理并返回json格式的数据
    request.getRequestDispatcher(url).forward(request,response);

方法四:

    利用iframe标签的src属性,进行跨域的访问,将获取到的值存储到当前的iframe中,然后再

同一页面进行获取该iframe的body内的值。

<body>
    <div id="show"></div>
    <iframe id="frame" style="display: none;"></iframe>
  </body>
  <script>
$("#frame").attr("src", "路径?time=" + new Date().getTime()).load(function(){
  // 获取iframe标签的值并进行获取,显示到页面
  $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text() 

+ " ]");
});
  </script>

方法五:

    HTML5中websocket可以进行跨域的访问;

创建一个websocket对象:

var ws = new WebSocket(url);

主要处理的事件类型有(onopen,onclose,onmessage,onerror);

例如:

ws.onopen = function(){




console.log("open");




// 向后台发送数据




ws.send("open");



}

后台可以是java,php,nodejs等,对数据处理用时间onmessage事件对返回的值进行前端处理。

ws.onmessage = function(eve){




console.log(eve.data);



}
Javascript 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
jquery实现的缩略图预览滑块实例
Jun 25 #Javascript
使用javascript提交form表单方法汇总
Jun 25 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php 保留字列表
2012/10/04 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python 文件处理注意事项总结
2017/04/10 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
党支部组织生活会整改方案
2014/09/30 职场文书
司机岗位职责
2015/02/04 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电