详解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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
react build 后打包发布总结
Aug 24 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php单一接口的实现方法
2015/06/20 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
Position属性之relative用法
2015/12/14 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python性能优化的20条建议
2014/10/25 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
物业保安员岗位职责
2014/03/14 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
北京颐和园导游词
2015/01/30 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技