防止跨域（jsonp详解）
详见：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详解）的更多相关文章
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- 「JavaScript」JS四种跨域方式详解
原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jsonp跨域访问详解
jsonp是"用来跨域的" 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 1.随便建两个网 ...
- CORS(跨域资源共享)详解及与JSONP的对比
上篇讲解的JSONP的跨域请求方式,但是在浏览器的支持及请求方式上有局限性,接下来将介绍一种新的跨域请求方式CORS. CORS是一个W3C标准,全称是"跨域资源共享"(Cross ...
- jQuery jsonp跨域请求详解
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记
课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现 SSO系统就是解决分布式环境下登录问题的,本 ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
随机推荐
- Android Spannable
ApiDemo 源码至 com.example.android.apis.text.Link 类. 首先,看一下其运行效果: 要给 TextView 加上效果,方式主要有几种: 第一种,自动应用效果, ...
- CSS+DIV布局初练—DIV元素必须成对出现？
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- Android之AlertDialog.Builder详解
import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; ...
- 使用PHP抓取网站ico图标
网站许久没用更新,以后会经常更新,本次分享一个使用PHP抓取网站ico的程序,提供一个网站列表后对网站的ico进行下载抓取,具体代码如下: <?php /** * 更新热站ico * gao 2 ...
- Jquery attr()方法 属性赋值和属性获取
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名 ...
- 微软嵌入式WEC2013产品研讨会(深圳站---2013.10.16)
主要内容如下: 1. Windows Embedded Compact 2013面向的市场 主要面向工业自动化.医疗设备和零售行业这些市场,和物联网关系非常紧密. 2. Windo ...
- wsse:InvalidSecurity Error When Testing FND_PROFILE Web Service in Oracle Applications R 12.1.2 from SOAP UI (Doc ID 1314946.1)
wsse:InvalidSecurity Error When Testing FND_PROFILE Web Service in Oracle Applications R 12.1.2 from ...
- 谈数据库索引和Sqlite中索引的使用
要使用索引对数据库的数据操作进行优化,那必须明确几个问题:1.什么是索引2.索引的原理3.索引的优缺点4.什么时候需要使用索引,如何使用围绕这几个问题,来探究索引在数据库操作中所起到的作用. 1.数据 ...
- 十个拥有丰富UI组件的JS开发框架
如今,网上有各种各样的 JavaScript 框架用来简化 Web 应用开发.这些框架都提供了一些核心的特性,例如 DOM 操作,动画,事件处理以及 Ajax 交互,但不是都带有 UI 组件.今天这篇 ...
- UVA 753 A Plug for UNIX 电器插座（最大基数匹配，网络流）
题意: 给n个插座,m个设备(肯定要插电了),k种转换头可无限次使用(注意是单向的),问有多少设备最终是不能够插上插座的? 分析: 看起来就是设备匹配插座,所以答案不超过m.这个题适合用网络流来解. ...