--

一年前学的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. “全栈2019”Java异常第二十章：自定义异常详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  2. Haproxy搭建Web群集

    一.Haproxy与LVS LVS不支持正则处理,不能实现动静分离,对于大型网站,LVS的实施配置复杂,维护成本相对较高 Harpoxy是一款可提供高可用性,负载均衡.及基于TCP和HTTP应用的代理 ...

  3. 实现函数 ToLowerCase()

    /** * 实现函数 ToLowerCase(),该函数接收一个字符串参数 str, 并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. * 输入: "Hello" * ...

  4. LINUX云服务器 安装 nginx

    什么是nginx? 是一个高性能的 HTTP 和反向代理服务器,也是一个IMAP/POP3/SMTP 代理服, 是一个asynchronousservers异步服务器 为什么使用nginx? 因为它的 ...

  5. MySQL 创建schema

    create schema zzz default character set utf8 collate utf8_general_ci;--创建数据库 grant select,insert,upd ...

  6. OPENERP 中自定义模块 找不到的问题

    问题的前提是你写的模块本身没有问题,我自己碰到的情况是在本机运行可以,但是上传到服务器上以后却无论怎么重启服务都找不到模块. 问题的根源在上传的文件权限设置不对: 假设自定义模块为rainsoft_p ...

  7. Mac 10.12安装网站圆形设计工具Axure RP Pro 7

    下载: (链接: https://pan.baidu.com/s/1hsaTafi 密码: 855y)

  8. Python中utf-8与utf-8-sig两种编码格式的区别

    As UTF-8 is an 8-bit encoding no BOM is required and anyU+FEFF character in the decoded Unicode stri ...

  9. centos 7编译安装Python3.6.1

    1.准备必要的库文件 yum install -y gcc zlib-devel openssl-devel sqlite-devel 2.进入源代码包 ./configure prefix=/usr ...

  10. List的定制排序 包括使用lambda表达式来实现的方法

    1.先实现Comparator的接口 重写compare方法 根据比较大小来返回数值: 比如:(Integer o1  -   Integer o2); return 1 表示o1>o2; re ...