详解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实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
学习jQuey中的return false
Dec 18 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
微信小程序实现简单表格
Feb 14 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
在vue中阻止浏览器后退的实例
Nov 06 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,不用COM,生成excel文件
2006/10/09 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
深入理解js中的加载事件
2017/02/08 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Python Grid使用和布局详解
2018/06/30 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Django继承自带user表并重写的例子
2019/11/18 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
如何通过python实现全排列
2020/02/11 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python实现自动清理重复文件
2020/08/24 Python
Python实现简单的2048小游戏
2021/03/01 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Java程序员常见面试题
2015/07/16 面试题
环境保护建议书
2014/08/26 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
新兵入伍决心书
2015/09/22 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技