这篇文章主要介绍了 js 实现跨域的方法, 实例分析了几种常用的 javascript 实现跨域的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现跨域的方法。分享给大家供大家参考。具体分析如下:
由于同源策略的限制,XMLHttpRequest 只允许请求当前源(包含域名、协议、端口)的资源。
json 与 jsonp 的区别:
JSON 是一种数据交换格式,而 JSONP 是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
- <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 内的值。
方法五:
创建一个 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 程序设计有所帮助。
来源: