JQuery和原生JS跨域加载JSON数据或HTML。
前提：有时候需要在网页上，加载另一个网站上的数据。或者加载另一个网站上的一个页面。Js的Ajax请求不具备跨域功能，可以使用JQuery来实现。
网页端JS代码:
$(function () {
$.ajax({
type: "get",
async: false,
url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL，该URL返回一段JS数据。如需返回HTML，只需把HTML组织成JSON即可，比如{"html":"<html></html>"}
dataType: "jsonp",//表示该请求为跨域的JSOP请求
jsonp: "htmlcall",//作用未知。随便填，但也能正常执行
jsonpCallback: "htmlcallback",//该值会把URL中的callback参数值替换，比如会把callback=?替换成callback=htmlcallback
success: function (json) {
$(json.selector).append(json.html);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('fail');
alert(textStatus);
alert(errorThrown);
}
});
});
服务端代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string html = string.Empty;
using (FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory + "/temppage.html", FileMode.OpenOrCreate))
{
using (StreamReader sr = new StreamReader(fs))
{
html = sr.ReadToEnd();
}
} JavaScriptSerializer jss = new JavaScriptSerializer();
Jsonp jsp = new Jsonp();
jsp.html = html;
string json = jss.Serialize(jsp);
//这里需要注意的是，JSONP要返回的并不是标准的JSON格式，而是下面这样的一个格式
//callbackname(json) 其中callbackname是从JS端传来的参数。json是JSON数据，括号也不能少。
string callback = context.Request["callback"];
context.Response.Write(callback + "(" + json + ")"); }
public class Jsonp
{
public string html { get; set; }
public string selector = "body";
} //原生JS跨域方法
var script = document.createElement("script");
script.src = "http://192.168.1.145:8089/AdSource/D?adid=" + advid + "&callback=lian_adv_writer";
script.type = "text/javascript";
document.head.appendChild(script);
function lian_adv_writer(data) {
alert(data);
}
JQuery和原生JS跨域加载JSON数据或HTML。的更多相关文章
- pdf.js跨域加载文件
pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选 本地预览 在pdf.j ...
- jsonp原生js跨域拿新浪数据插件封装【可扩展】
//修改了一个bug,增加了手动释放垃圾 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- jquery中ajax跨域加载
今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...
- jquery mobile 和phonegap开发总结之三跨域加载页面
跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...
- RequireJS跨域加载html模版后被转成JS问题分析及解决
问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...
- hive加载json数据解决方案
hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EX ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- 扩展JQUERY 表单加载JSON数据
$.fn.extend({ //表单加载json对象数据 setForm : function (jsonValue) { var obj = this; $.each(jsonValue, func ...
随机推荐
- 关于echarts地图下钻。
在去年十二月份,前端老大交代个任务,关于地图下钻.这里做了个简单的青岛地图下钻,初学echarts,做的不精,凑合看看吧. 第一步呢,先引入echarts等文件,这是最基本的. 第二步,到官网下载 ...
- TFS2010升级至TFS2013完全指南
一.背景: 公司已使用tfs2010很长时间,目前随着公司的发展,项目越来越少,而产品越来越多,采用的开发模式,也逐渐从瀑布式.迭代式转向敏捷开发.为了更好的支持产品研发,决定将tfs ...
- maven 配置安装
1.下载maven http://maven.apache.org/ 2.windows安装maven 解压包后配置环境变量 PATH:%M2_HOME%\bin M2_HOME:D:\soft\ ...
- list、set、map以及array的区别
对于刚刚学习集合框架来说,如何选择list.set.map以及array是比较模糊的 在此我将对这四种情况做总结: array:数组,可以存储对象和基本数据类型,长度固定. Collection:集合 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysql优化---订单查询优化:异步分页处理
订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...
- QT编程环境搭建
使用QT需要QT的库以及QT creator,在QT5以后的版本中,两者已经集成,不需要单独下载了,只需要下载一个文件即可.配置步骤如下: 1.下载qt-opensource-windows-x86- ...
- Spark源码分析之Spark-submit和Spark-class
有了前面spark-shell的经验,看这两个脚本就容易多啦.前面总结的Spark-shell的分析可以参考: Spark源码分析之Spark Shell(上) Spark源码分析之Spark She ...
- 解析jQuery中extend方法--用法《一》
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...
- linux下载时提示请尝试移除磁盘中不需要的文件并重试，或者保存到其他位置
因为我是用虚拟机装的linux,所以当时就分配了20G硬盘,下载了几个应用后再下载就提示我这个了.一开始我还以为是因为下载链接的问题,后来才知道原来是因为/tmp的满了. 然后我输入以下连个命令就能正 ...