详见:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

$("#getJsonpByJquery").click(function () {
$.ajax({
url: 'http://localhost:2701/home/somejsonp',
dataType: "jsonp", //jsonp格式
jsonp: "callback", //jsonp的回调函数
  jsonpCallback:"jsonCallBack", //指定回调函数 需要在后台中做下处理
success: function (data) {
console.log(data)
}
})
}) 完整Demo两种方法:js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonpAjaxCall.html</title>
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
  function jsonCallBack(d){ alert("123"); }
  function HuiDiaoMethod(d){console.log(d); }
  $(function(){
    //第一种方法:更原生些,但毕竟麻烦,需要向Dom树中添加script节点 需要回调函数
    $("#send").on('click', function(event) {
      //<\/script> 注意这里有一个转义字符 \/
      $("<script><\/script>").attr("src","http://10.1.56.153:6631/ajaxcall.ashx?callback=HuiDiaoMethod").appendTo('body');
    });


    //推荐第二种方法:简单(无需添加script节点 无需要回调函数)
    $("#ajax").on("click",function(){
      $.ajax({

        "url":"http://10.1.56.153:6631/ajaxcall.ashx",

        "dataType":"jsonp",
        jsonp: "callback", //回调函数在QueryString中的键值,默认是callback。后台Request["callback"] 获取回调函数名称
        jsonpCallback:"jsonCallBack", //指定回调函数 需要在后台中做下处理
        success: function (data) { //data是json对象 后台最终输出的是 jsonCallBack(data)
                        console.log(data)
                     }
         });
     });
  });
</script>
</head>
<body>
<button id="send">getJsonp</button>
<button id="ajax">AjaxgetJsonp</button>
</body>
</html>

 

备注:

后台返回的数据格式必须是:

MethodName(参数);

参数可以是json格式 也可以不是json格式。 但一定要是上面的格式 否则js会报错。

补充:

Access-Control-Allow-Origin

只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。

protected override void Application_BeginRequest(object sender, EventArgs e)
{
//HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
HttpRequest request = HttpContext.Current.Request;
string orig = request.Headers.Get("Origin");
if (!string.IsNullOrEmpty(orig)&& request.UrlReferrer!=null&&!string.IsNullOrEmpty(request.UrlReferrer.Host))
{
var host = request.UrlReferrer.Host;
orig = request.UrlReferrer.Scheme+"://"+ host;
if (request.UrlReferrer.Port != && request.UrlReferrer.Port != )
{
orig += ":" + request.UrlReferrer.Port;
}
//不是 CookieDomain指定的域名下的请求全部拒绝。
if (!host.EndsWith(ConfigurationManager.AppSettings["CookieDomain"]??"localhost",StringComparison.OrdinalIgnoreCase))
{
// TODO:refuse
                  orig =string.empty;
            } 
          } else if (!ConfigurationManager.AppSettings["Static"].Equals(orig, StringComparison.CurrentCultureIgnoreCase)) { orig = ConfigurationManager.AppSettings["Dynamic"]; } HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", orig); }

防止跨域(jsonp详解)的更多相关文章

  1. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  2. 「JavaScript」JS四种跨域方式详解

    原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...

  3. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  4. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  5. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  6. jsonp跨域访问详解

    jsonp是"用来跨域的" 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 1.随便建两个网 ...

  7. CORS(跨域资源共享)详解及与JSONP的对比

    上篇讲解的JSONP的跨域请求方式,但是在浏览器的支持及请求方式上有局限性,接下来将介绍一种新的跨域请求方式CORS. CORS是一个W3C标准,全称是"跨域资源共享"(Cross ...

  8. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  9. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  10. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. (从终端看linux-2)浅析terminal创建时ptmx和pts关系

    我们打开一个terminal,那么将会在devpts文件系统/dev/pts下创建一个对应的pts字符文件,该pts字符文件节点直接由/dev/ptmx节点的驱动函数ptmx_open()调用devp ...

  2. xml--通过jdom解析及生产XML

    JDOM是一种使用 XML 的独特 Java 工具包,用于快速开发 XML 应用程序.它的设计包含 Java 语言的语法乃至语义. JAXP (用于 XML 语法分析的 Java API)包含了三个软 ...

  3. 武汉北大青鸟解读2016年10大IT热门岗位

    武汉北大青鸟解读2016年10大IT热门岗位 2016年1月5日 13:37 北大青鸟 这是IT从业者的辉煌时代,IT行业的失业率正处在历史的低点,而且有的岗位——例如网络和安全工程师以及软件开发人员 ...

  4. [原]Unity3D深入浅出 - 新版动画系统(Mecanim)

    Mecanim概述: Mecanim是Unity提供第一个丰富而复杂的动画系统,提供了: 针对人形角色的简易的工作流和动画创建能力 Retargeting(运动重定向)功能,即把动画从一个角色模型应用 ...

  5. [原]Unity3D深入浅出 - 认识开发环境中的Project面板

      前面几个是用来创建脚步的,从Prefab说起: Prefab:预设物体,若一个Object在Scene中多处用到,即可选择为改对象创建一个Prefab.创建一个Prefab后,将源Object拖拽 ...

  6. KindEditor设置为过滤模式,但在代码模式下提交表单时不过虑HTML标签的解决方法

    KindEditor设置filterMode为true,但在代码模式下提交表单的话,发现并没有过虑掉自己不想保留的HTML标签. 这时只需同步内容前加上红色部分内容即可: onClick=" ...

  7. php discuz框架接口不能正常访问的问题

    本人php小白,无php编程基础,直接上php服务器部署,后果很严重.....所以务必看完请给”顶“给评论,以表示对小白的鼓励和赞赏! 关于discuz框架,独自加班,废寝忘食,然已无力吐槽..... ...

  8. POJ 3204 Ikki's Story I-Road Reconstruction (网络流关键边)

    [题意]给定一个N个节点M条边的网络流,求有多少条边,使得当增其中加任何一个边的容量后,整个网络的流将增加. 挺好的一道题,考察对网络流和增广路的理解. [思路] 首先关键边一定是满流边.那么对于一个 ...

  9. 【转】读取android根目录下的文件或文件夹

    原文网址:http://my.oschina.net/Ccx371161810/blog/287823 读取android根目录下的文件或文件夹 SDK的操作 读取android根目录下的文件或文件夹 ...

  10. 【转】 Homebrew – OSX下简单的包管理系统

    很多linux用户很喜欢 (Debian/Ubuntu)系列的apt包管理系统和(Redhat/Fedora)系列的yum包管理系统. 包括Windows用户都有多种方便的软件管理工具,如:360软件 ...