前提:有时候需要在网页上,加载另一个网站上的数据。或者加载另一个网站上的一个页面。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。的更多相关文章

  1. pdf.js跨域加载文件

    pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选 本地预览 在pdf.j ...

  2. jsonp原生js跨域拿新浪数据插件封装【可扩展】

    //修改了一个bug,增加了手动释放垃圾 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  4. jquery中ajax跨域加载

    今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...

  5. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  6. RequireJS跨域加载html模版后被转成JS问题分析及解决

    问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...

  7. hive加载json数据解决方案

    hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EX ...

  8. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  9. 扩展JQUERY 表单加载JSON数据

    $.fn.extend({ //表单加载json对象数据 setForm : function (jsonValue) { var obj = this; $.each(jsonValue, func ...

随机推荐

  1. 循环语句——for语句

    一.for语句结构:for (初始化表达式; 循环条件表达式 ;循环后的操作表达式 ) { 执行语句: } 循环条件表达式,必须是true或false 示例: class ForDemo { publ ...

  2. 不要在Android的Application对象中缓存数据!

    前言   在你的App中的很多地方都需要使用到数据信息,它可能是一个session token,一次费时计算的结果等等,通常为了避免Activity之间传递数据的开销,会将这些数据通过持久化来存储. ...

  3. 关于自定义的 XIB cell上的 button如何在控制器里实现点击方法

    直接调用cell.button addTarget 的方法点击事件是失效的 这时需要你在xib中设置button的tag值 然后在返回cell的时候添加点击事件 UIButton *button = ...

  4. 论SNAPSHOT包的危害性

    先介绍一下背景:我们应用是一个标准的spring+webx工程,博主在一次项目发布前为了再次测试一下自己的代码,将分支部署到日常环境中,但是项目启动的时候报错: 第一眼看到这个堆栈后有点懵逼 第一是上 ...

  5. javascript学习-目录

    Javascript学习 第1章 Javascript简介 1.1 Javascript简史 1.2 Javascript实现 1.3 Javascript版本 第2章 Javascript入门 2. ...

  6. Monkey实例测试

    三.Monkey实例测试 Windows下(注:2-4步是为了查看我们可以测试哪些应用程序包,可省略): 1. 通过eclipse启动一个Android的emulator或者2 2. 在命令行中输入: ...

  7. strpos、 strstr、 substr三个函数的对比讲解

    mixed strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) 返回 needle 在 haystack 中首次出现的数字 ...

  8. [Usaco2014 Open]Gold Fair Photography(hash)

    最近做了usaco2014 open的金组,果然美帝的题还是没有太简单啊QAQ,被每年的月赛骗了QAQ 不过话说官方题解真心棒(虽然英文的啃得好艰难,我英语渣你们别鄙视我= =),标程超级优美QAQ ...

  9. PHP基础学习(函数一)

    PHP(Hypertext Preprocessor):超文本预处理器,一种嵌入在HTML中并且运行在服务器端的脚本语言. var_dump--打印变量相关信息 说明:  <?php var_d ...

  10. groovy regex groups(groovy正则表达式组)

    先看一个java正则表达式的例子. import java.util.regex.Matcher; import java.util.regex.Pattern; public class TestM ...