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 ...
随机推荐
- 浅谈Django的Q查询以及AngularJS的Datatables分页插件
使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否 ...
- WinForm——记住密码
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Runti ...
- 理解volatile
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Sass与Compass——回顾
compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装 ...
- C语言 二维数组复制、清零及打印显示
#include <stdlib.h> #include <stdio.h> #include <string.h> //二维整型数组打印显示 ],int row, ...
- link js重构心得
过年前后一段时间,对link库的代码进行的大量的重构,代码精简了许多,性能也得到了很大的改善,写此文记录期间所做的改进和重构,希望对看到此文的js程序员有所帮助. 1. 代码构建 最初代码使用gulp ...
- [HBase] - Hbase调优1
版本:HBase-0.98.6-cdh5.3.6 HBase参数调优 1. zookeeper.session.timeout: 默认90000(毫秒), 控制连接zk的timeout时间.由于hba ...
- JavaScript中国象棋程序(5) - Alpha-Beta搜索
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第5节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- 【Scala】Scala之Classes and Properties
一.前言 前面学习了控制结构,下面学习Scala的Class和Properties. 二.Class&Properties 尽管Scala和Java很类似,但是对类的定义.类构造函数.字段可见 ...
- BZOJ 1085: [SCOI2005]骑士精神(A*算法)
第一次写A*算法(这就是A*?如果这就是A*的话,那不就只是搜索的一个优化了= =,不过h函数如果弄难一点真的有些难设计) 其实就是判断t+h(x)(t为当前步数,h(x)为达到当前状态的最小步数) ...