详解js跨域原理以及2种解决方案


Posted in Javascript onDecember 09, 2015

1.什么是跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:

详解js跨域原理以及2种解决方案

2.实现原理

在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.

例如:

这种访问方式是不行的.但是如下方式,却是可以的.

这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{“Name”:”zhangsan”}

如果返回的是这个json字符串,我们是没有办法引用这个字符串的.所以,要求返回的值,务必是var json={“Name”:”zhangsan”},或json({“Name”:”zhangsan”})

为了使程序不报错,我们务必还要建立个json函数.

3.解决方案

方案一
服务器端:

protected void Page_Load(object sender, EventArgs e)
  {
    string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

客户端:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">

    var result = null;
    window.onload = function () {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

      var head = document.getElementsByTagName("head")[0];
      head.insertBefore(script, head.firstChild);

    };

    function callback(data) {
      result = data;
    }

    function b_click() {
      alert(result.name);
    }
  </script>
</head>
<body>
  <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

方案二:通过jquery来完成

通过jquery的jsonp的方式.使用此方式,对服务器端有要求.

服务器端如下:

protected void Page_Load(object sender, EventArgs e)
  {
    string callback = Request.QueryString["jsoncallback"];

    string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

客户端:

$.ajax({ 
        async: false, 
        url: "http://192.168.0.5/Web/web1.aspx", 
        type: "GET", 
        dataType: 'jsonp', 
        //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
        jsonp: 'jsoncallback', 
        //要传递的参数,没有传参时,也一定要写上 
         data: null, 
        timeout: 5000, 
        //返回Json类型 
         contentType: "application/json;utf-8", 
        //服务器段返回的对象包含name,data属性. 
        success: function (result) { 
          alert(result.date); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
        } 
      });

实际上,在我们执行这段js时,js向服务器发出了这样一个请求:

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

而服务器也相应的返回了如下对象:

jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})

此时就实现了跨域范文数据的要求.

以上就是关于js跨域原理以及2种解决方案介绍,希望对大家学习跨域知识点有所帮助,大家也可以结合其他相关文章进行学习研究。

Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
You might like
PHP 实用代码收集
2010/01/22 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
Python函数返回值实例分析
2015/06/08 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
学习之星事迹材料
2014/05/17 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
走群众路线剖析材料
2014/10/09 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL