js实现跨域的方法实例详解


Posted in Javascript onJune 24, 2015

本文实例讲述了js实现跨域的方法。分享给大家供大家参考。具体分析如下:

由于同源策略的限制,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程序设计有所帮助。

Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
深入理解angularjs过滤器
May 25 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JavaScript中的Promise使用详解
Jun 24 #Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 #Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 #Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 #Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 #Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 #Javascript
浅析Node.js中的内存泄漏问题
Jun 23 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
基于python的列表list和集合set操作
2019/11/24 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python实现三壶谜题的示例详解
2020/11/02 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
公司人力资源的自我评价
2014/01/02 职场文书
教师校本培训方案
2014/02/26 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
老公给老婆的保证书
2014/04/28 职场文书
中等生评语大全
2014/05/04 职场文书
客房领班岗位职责
2015/02/11 职场文书
小学远程教育工作总结
2015/08/13 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技