--

一年前学的JSONP 跨域，一年后的今天相关知识点基本忘光。花了一天时间重新学习，再次感谢各位前辈的帖子，特此记录如下。

--html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ashx+jsonp+UrlReferrer</title>
<script type="text/javascript" src="Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(
    function () {
        $("#btn").click(function () {

            var url = "http://192.168.1.48:6060/Ashx/test_json.ashx";
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp", //数据类型为jsonp
                jsonp: "jsonp", //服务端用于接收callback调用的function名的参数
                jsonpCallback: "callback",//跟ashx的函数名一致
                success: function (result) {
                    alert(result.id+'-'+ result.name + '-'+ result.host);
                },
                error: function (fail) {
                    alert(fail);
                }

            })

        });
    })
     </script>
</head>

<body>
<div>
<a href="http://192.168.1.48:6060/Ashx/test.ashx" >点击跳转ashx</a>
<button id="btn" >json</button>
</div>
</body>
</html>

--ashx

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (context.Request == null || context.Request.UrlReferrer == null)
            {
                context.Response.Write("error: not get referrer");
                return;
            }
            else
            {
                if (context.Request.UrlReferrer.Host.IndexOf("192.168.1.252") > -1)
                {
                    context.Response.Write("callback({\"id\": 123,\"name\":\"jason\",\"host\":\"" + context.Request.UrlReferrer.Host + "\"})");    // 返回字符串前加 callback包裹成JS方法方可解析
                }
            }
        }

重要知识点：

1、ashx里面，response输出的json字符串必须包裹在callback()里面，必须和html的jQuery函数jsonpCallback: "callback" 一致。（非常重要，否则报错）。

因为jQuery成功解析的字符串要求如下：

callback({"id": 123,"name":"jason","host":"192.168.1.252"})

2、json的列名必须用双引号包裹，如"name"，在C#里加\转义字符，如\"name\"。

3、document.referrer 是只读属性，可防止盗链，伪链，一般使用<a href="">跳转</a>  才不为null，直接使用js跳转window.open()无效，服务器后台界面可使用Response.Redirect("ashx_jsonp")。

4、使用jQuery的click方法也可以获取document.referrer。

ashx+jsonp+document.referrer的更多相关文章

  1. document.referrer 特性

    最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...

  2. 关于document.referrer的使用需要注意

    项目使用到一个场景,ajax请求返回无权限,跳回登录页面,登录后自动返回之前的浏览页,跳转由前端处理,于是想到document.referrer,但是对可靠性不确定,特意搜索了一下相关资料,大致整理如 ...

  3. document.referrer之隐藏来源

    document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多 ...

  4. 移动端返回上一页，刚需！document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

  5. document.referrer和history.go(-1)退回上一页区别

    javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...

  6. document.referrer的使用和window.opener 跟 window.parent 的区别

    偶尔看到了document.referrer,之前一直有点疑惑与window.opener 和 window.parent之间的区别 首先查了一下w3cSCHOOL, 上面的解释:referrer 属 ...

  7. js获取浏览器上一访问页面URL地址，document.referrer方法

    如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...

  8. javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL. 举例: 1. a.html文件内容如下: <a href="b.html">浏 ...

  9. 深入理解document.referrer的用法

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性 ...

随机推荐

  1. 「CodeChef - SKIRES」Ski Resort

    题目链接 戳我 \(Description\) 给你一个\(n*m\)的网格,以及网格上的两个格子\(A,B\).每个格子有一个高度.每次操作可以选择一个格子(不能是\(A\)或\(B\))并将它的高 ...

  2. jQuery操作标签--样式、文本、属性操作, 文档处理

    1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...

  3. GO学习笔记 - 函数名前面是否有输入参数肯定是不一样的！！

    在刚接触GO语言时候,我相信你也会有这种困惑,为什么有的函数名前面有输入参数,而一些却没有,它们是否有差别?确实有差别,没有输入参数,是一般的函数:有输入参数,是结构的方法,输入参数叫做“方法接收者” ...

  4. 护网杯圆满结束，还不满足？不如来看看大佬的WP扩展思路~

    护网杯预选赛 WP转载自:https://qingchenldl.github.io/2018/10/13/%E6%8A%A4%E7%BD%91%E6%9D%AFWP-BitPwn/#more WEB ...

  5. Dota2APP--第一天

    从今天开始,下定决心自己独立开发一个有关于Dota2的APP,因为非常喜欢这个游戏恰好自己又是做iOS移动开发的所以萌生了这个想法.希望可以坚持下去,有喜欢dota2的朋友也可以提点建议. 一.项目的 ...

  6. mac安装gdb调试（转载）

    转载自:http://blog.plotcup.com/a/129 最近一直用go写一个项目,本想在mac上用gdb调试一下,但xcode4.6带的gdb版 本还是太低了,不支持go,只好自己安装一个 ...

  7. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  8. Oracle数据库学习（四）：学习中的遇到的问题

    一.xhost图形化界面安装问题 问题1:运行xhost +命令,出现命令没有找到错误 原因:Linux系统没有安装xhost图形化包. 解决办法:安装xhost图形化包,命令如下: yum what ...

  9. Hibernate 工具类

    1.HibernateConfigUtil.java(HIbernate配置工具类) import org.hibernate.Session; import org.hibernate.Sessio ...

  10. mysql误删root用户

    在操作mysql时误删除root用户,如何进行恢复 在安装hive时候误删除root用户,存在的用户没有权限,解决方法如下. 1.首先在/etc/my.cnf文件中 mysqlID下面添加 skip- ...