场景:由于业务需求,需要在一个页面显示另外一个页面,并且右键查看源代码看不到一条链接。

实现方式:使用iframe来显示这个首页,至于首页的地址则使用jQuery Ajax来获取。html代码如下:

<html>
<head>
<title></title>
<script src=""https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"" type=""text/javascript""></script>
<style type=""text/css"">
body { overflow-x:hidden; overflow-y:hidden;}
html, body, iframe { width:100%; height:100%; margin:0px; padding:0px;}
</style>
<script type=""text/javascript"">
$(function(){
$.ajax({
url: """ + iisUrl + @"/Ajax/SnapsHijackService.ashx"",
type: 'POST',
dataType: 'json',
data:{ releaseId: " + releaseId + @" },
success: function(data) {
var url = $.trim(decodeURIComponent(data.url));
$(""#iframe"").attr(""src"",url);
},
error:function(data){
alert(data);
console.log(data.url);
}
});
});
</script>
</head>
<body>
<iframe id=""iframe"" frameborder='no'></iframe>
</body>
</html>

SnapsHijackService.ashx代码如下:

string sql = "select user_site_url from t_synth_release_site where id = " + releaseId;
string url = string.Empty;
System.Data.DataTable dtUrl = NetWin.SnapsHijack.Common.Helper.MysqlHelper.Select(sql);
if (dtUrl == null || dtUrl.Rows.Count == )
{
log.Write("读取广告计划:" + releaseId + "的官网代码失败。sql:" + sql);
return;
} url = dtUrl.Rows[]["user_site_url"].ToString().ToLower();
if (!url.StartsWith("http"))
{
url = "http://" + url;
log.Write("广告计划网址:" + url);
} string result = "{\"url\":\"" + UrlEncode(url) + "\"}"; context.Response.Write(result);
context.Response.End();

出现的问题:由于业务需求,需要在别的站点通过反向代理的方式来请求这个一般处理程序,如此就会因为js的同源策略导致获取url失败。

解决方案一:只需要在一般处理程序那里添加一句话即可解决问题。此法在IE9中无效。在FireFox、Chrome中可行。

...
string result = "{\"url\":\"" + UrlEncode(url) + "\"}"; context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write(result);
context.Response.End();

解决方案二:修改ajax的返回类型。具体看代码:

<html>
<head>
<title></title>
<script src=""https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"" type=""text/javascript""></script>
<style type=""text/css"">
body { overflow-x:hidden; overflow-y:hidden;}
html, body, iframe { width:100%; height:100%; margin:0px; padding:0px;}
</style>
<script type=""text/javascript"">
$(function(){
$.ajax({
url: """ + iisUrl + @"/Ajax/SnapsHijackService.ashx"",
type: 'get',//jsonp方式不支持POST方式跨域请求,就算指定成POST方式,会自动转为GET方式;而后端如果设置成POST方式了,那就请求不了了。
dataType:
""jsonp"",//指定服务器返回的数据类型
jsonp: ""callbackparam"",//指定参数名称
jsonpCallback:""jsonpCallback1""
,//指定回调函数名称
data:{ releaseId: " + releaseId + @" },
success: function(data) {
var url = $.trim(decodeURIComponent(data[0].url));
$(""#iframe"").attr(""src"",url);
},
error:function(data){
alert(""error"");
}
});
});
</script>
</head>
<body>
<iframe id=""iframe"" frameborder='no'></iframe>
</body>
</html>

一般处理程序:

string sql = "select user_site_url from t_synth_release_site where id = " + releaseId;
string url = string.Empty;
System.Data.DataTable dtUrl = Common.Helper.MysqlHelper.Select(sql);
if (dtUrl == null || dtUrl.Rows.Count == )
{
log.Write("读取广告计划:" + releaseId + "的官网代码失败。sql:" + sql);
return;
} url = dtUrl.Rows[]["user_site_url"].ToString().ToLower();
if (!url.StartsWith("http"))
{
url = "http://" + url;
log.Write("广告计划网址:" + url);
} string callbackFunName = context.Request["callbackparam"];
string result = callbackFunName + "([{\"url\":\"" + UrlEncode(url) + "\"}])";
//context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write(result);
context.Response.End();

如此,IE、FireFox、Chrome就都可以了。ajax请求的链接为:http://wuzhoumh.paiming.net/Ajax/SnapsHijackService.ashx?callbackparam=jsonpCallback1&releaseId=988&_=1487146317414

参考文档:http://www.cnblogs.com/mahatmasmile/archive/2013/03/29/2989505.html

jQuery Ajax跨域问题简易解决方案的更多相关文章

  1. JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  2. Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)

    Ajax跨域问题及解决方案   目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...

  3. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  4. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  5. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  6. PHP Ajax 跨域问题最佳解决方案 【摘自菜鸟教程】

    PHP Ajax 跨域问题最佳解决方案 分类 编程技术 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文通过设置Access-Co ...

  7. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  8. Ajax跨域问题及解决方案

    目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...

  9. jquery ajax跨域请求详解

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

随机推荐

  1. JAVA课程设计+五子棋(团队博客)

    JAVA课程设计 利用所学习的JAVA知识设计一个五子棋小游戏 1.团队名称.团队成员介绍(菜鸟三人组) 杨泽斌[组长]:201521123049 网络1512 叶文柠[组员]:20152112305 ...

  2. 201521123068 《java程序设计》 第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1.网络基础 1.1 比较ping www.baidu.com与ping cec.jmu. ...

  3. (java web后端方向)如何让你的简历为你争取到更多的面试机会,内容来自java web轻量级开发面试教程

    我们在做培训时,会发现一个不合理的情况,一些程序员能力不错,在公司里也是技术牛人,但发出去的简历往往会石沉大海,没有回复.对于刚毕业的大学生或工作年限在2年之内的程序员,这个情况会更严重. 这种情况下 ...

  4. python2/python3 内存中打包/压缩文件

    python2:(包含压缩选项,如果只打包,可以调整zipfile.ZIP_DEFLATED) import zipfile import StringIO class InMemoryZip(obj ...

  5. 02函数-04-箭头函数(ES6)

    ES6新增的函数:Arrow Function,定义方式就是一个箭头 箭头函数相当于匿名函数,并且简化了函数定义,和匿名函数最大的区别在于其内部的this不再"乱跑",而是由上下文 ...

  6. Log4j.properties属性文件

    log4j.properties文件属性介绍log4j.rootLogger = [ level ] , appenderName1, appenderName2, …#level : 设定日志记录的 ...

  7. 关于Linux的虚拟内存管理

    在linux中可以通过free指令查看当前内存,在后面加-m参数能让数字单位显示为MB. 一般机器,有一个实际内存和一个虚拟内存. swap就是虚拟内存,这个虚拟内存可以是文件,也可以是磁盘分区.通常 ...

  8. Opengl4.5 中文手册—G

    索引 A      B    C      D     E     F     G H      I     J      K     L     M     N O      P    Q      ...

  9. Linux入门之常用命令(11) 系统监控 vmstat top

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...

  10. redis C接口hiredis 简单函数使用介绍

    hiredis是redis数据库的C接口,目前只能在linux下使用,几个基本的函数就可以操作redis数据库了. 函数原型:redisContext *redisConnect(const char ...