前提：有时候需要在网页上，加载另一个网站上的数据。或者加载另一个网站上的一个页面。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. Kafka 0.8源码分析—ZookeeperConsumerConnector

    1.HighLevelApi High Level Api是多线程的应用程序,以Topic的Partition数量为中心.消费的规则如下: 一个partition只能被同一个ConsumersGrou ...

  2. display的none与block（判断登录界面的账号密码是否为空）

    判断登录界面的账号密码是否为空的时候又不想用alert显示就需要用display来隐藏alert啦(在设置时切忌要将隐藏的内容写在账号和密码的div中,否则会根据屏幕的分辨率不同而有所变化,这是本人教 ...

  3. jQuery UI 实例 - 自动完成（Autocomplete）

    http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...

  4. nodejs爬虫——汽车之家所有车型数据

    应用介绍 项目Github地址:https://github.com/iNuanfeng/node-spider/ nodejs爬虫,爬取汽车之家(http://www.autohome.com.cn ...

  5. .NET Core中妙用unsafe减少gc提升字符串处理性能

    一.前言 昨天在群里讨论怎么样效率的把一个字符串进行反转,一般的情况我们都知道,只要对String对象进行操作,那么就会生成新的String对象,比如"1"+"2&quo ...

  6. JAVA包名、类名、变量名命名规则

    类名:首字母大写,其他单词中首字母大写,其他小写; 方法名:首字母小写,其他单词中首字母大写,其他小写: 变量:首字母小写,其他单词中首字母大写,其他小写: 包名:全部小写

  7. jeesite简单入口分析

    这两天要开新项目 , 准备使用比较受欢迎的 jeesite框架 . jeesite是一个写好的网站 , 用到的框架比较多 具体请看 -- > github链接 下载下来之后 , 手动把maven ...

  8. 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...

  9. JS完成页面跳转并传参的方法|附加：循环遍历对象

    此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...

  10. 2017-3-2 C#基础 集合

    要使用集合必须先引用命名空间,using System.Collections; 集合与数组的不同: 数组:同一类型,固定长度集合:不同类型,不固定长度 集合主要分为六大类:普通集合,泛型集合,哈希表 ...