`
gongmingwind
  • 浏览: 578486 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

实战JavaScript按需加载Js

阅读更多
这个例子中我没有调用回调函数,是因为在我加载的js中已经有了方法调用
调用代码:
var jsLoader=new JsLoader();
jsLoader.load("/adsa/html/js/"+json.pop_type+".js");



// 根据adgroupid获取网站主和广告位宽度、高度、广告位的广告类型
// 后台处理时首先判断是否是合法的网站,然后再返回广告位的信息
// 取得广告位类型后,然后动态调用相关的js代码来产生弹出窗口
var adHeight = 0;
var adWidth = 0;
var webmaster = "";
function doAction() {
	var xmlHttp = GetXmlHttpObject()

	if (xmlHttp == null) {
		alert("您的浏览器不支持AJAX!");
		return;
	}

	var url = "/adsa/AdGroupServlet";
	url = url + "?adgroup_id=" + adgroup_id;
	url = url + "&sid=" + Math.random();
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			var responseText = xmlHttp.responseText;
			// alert(responseText);
			var json = eval('(' + responseText + ')');
			adHeight = json.ad_height;
			adWidth = json.ad_width;
			webmaster = json.webmaster;
//			document.write("ni 好。");
//			$.plugin('tabs', {
//						files : ['/adsa/html/js/0.js']
//					});
//			$.plugin('tabs').get();
			// alert(json.pop_type);
			// 按需加载js脚本
			var jsLoader=new JsLoader();
			 jsLoader.load("/adsa/html/js/"+json.pop_type+".js");
		}
	};
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}
doAction();
function GetXmlHttpObject() {
	var xmlHttp = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

function JsLoader() {
	this.load = function(url) {
		// 获取所有的<script>标记
		var ss = document.getElementsByTagName("script");
		// 判断指定的文件是否已经包含,如果已包含则触发onsuccess事件并返回
		for (i = 0; i < ss.length; i++) {
			if (ss[i].src && ss[i].src.indexOf(url) != -1) {
				this.onsuccess();
				return;
			}
		}
		// 创建script结点,并将其属性设为外联JavaScript文件
		s = document.createElement("script");
		s.type = "text/javascript";
		s.src = url;
		// 获取head结点,并将<script>插入到其中
		var head = document.getElementsByTagName("head")[0];
		head.appendChild(s);

		// 获取自身的引用
		var self = this;
		// 对于IE浏览器,使用readystatechange事件判断是否载入成功
		// 对于其他浏览器,使用onload事件判断载入是否成功
		// s.onload=s.onreadystatechange=function(){
		s.onload = s.onreadystatechange = function() {
			// 在此函数中this指针指的是s结点对象,而不是JsLoader实例,
			// 所以必须用self来调用onsuccess事件,下同。
			if (this.readyState && this.readyState == "loading")
				return;
			self.onsuccess();
		}
		s.onerror = function() {
			head.removeChild(s);
			self.onfailure();
		}
	};
	// 定义载入成功事件
	this.onsuccess = function() {
	};
	// 定义失败事件
	this.onfailure = function() {
	};
}

分享到:
评论

相关推荐

    JavaScript实战

    12.1.1 改变正在加载文本和图标 359 12.1.2 Ajax标签页教程 361 12.2 向站点添加Google地图 364 12.2.1 为地图设定位置 366 12.2.2 其他jMaps选项 367 12.2.3 添加标志和HTML提示提示框 369 12.2.4 获取驱车指示 370...

    ext JS API 实战

    ExtJS由一系列的类库组成,一旦页面成功加载了ExtJS库后,我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成: 底层API(core):底层API中提供了对DOM操作、查询...

    北大青鸟javascript第10章作业参考

    3.使用jQuery完成一个动态的斑马条纹表格:加载后奇数行底色为红色,当鼠标进入表格时奇数行去掉底色,换成偶数行底色为红色,鼠标离开时候回复到原始状态。 4.使用jQuery实现一个网页选项卡功能:点击上方不同的...

    Three.js实战常用技巧课程

    课程分享——Three.js实战常用技巧,完整版视频课程下载。 课程概述 一、适合有一定的three.js基础学员学习。 二、每节课都有对应的案例源码(有注释) 三、本课程主要针对three.js实际开发中常用的一些技巧进行讲解...

    【卷一/共两卷】AJAX实战pdf高清版90M

    11.4.3 添加外部JS库 11.5 添加Ajax自动保存功能 11.5.1 修改库的代码 11.5.2 自动保存信息到数据库 11.6 重构 11.6.1 定义构造函数 11.6.2 修改AjaxWindowsjs库 11.6.3 指定protal命令 11.6.4 执行Aiax处理 11.6.5 ...

    Python网络爬虫项目开发实战_动态内容_编程案例解析实例详解课程教程.pdf

    和单页面应用的简单表单事件不同,使用JavaScript时,不再是加载后立即下载所有页面内容。这样就会造成许多网页在浏览器中展示的内容不会出现在HTML源代码中,前面介绍的抓取技术也就无法正常运转了。对于这种依赖...

    实际项目中绝对实用的JavaScript公共类 - JavaScriptClass

    实战项目中后台cs文件弹出提示或者转向,或者模态窗口弹出,模态窗口弹出提示后刷新父页面或者跳转新页面等等,总结了10来个常用的方法,可以直接加载到您的项目中调用。简化您每次都要Respose.write(大一堆打印脚本...

    PHP管理系统项目实战案例

    使用HTML、CSS、JavaScript等前端技术实现页面的布局和交互效果,通过Ajax技术实现页面的异步加载和交互。系统还可能使用第三方库或框架,如Bootstrap、jQuery等,加快开发速度并提升用户体验。

    Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一...

    Java_Web开发实战1200例第1卷.part3

    10.3 动态加载数据 356 第2篇 文件管理篇 第11章 文件基本操作及文件上传下载 372 11.1 文件的基本操作 373 11.2 无组件的文件上传 412 11.3 通过组件实现文件上传 418 11.4 文件下载 428 第12章 文件的批量管理 436...

    基于Vue+JavaScript+elementUI的电商管理系统源码+项目说明.zip

    基于Vue+JavaScript+elementUI的电商管理系统源码+项目说明.zip 电商管理系统,使用vue+elementUI,实现的功能有 * 用户管理 * 权限管理 * 分类管理 * 参数管理 * 商品管理 * 数据统计 项目内容 | 文件夹 | 内容 | ...

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    4.2 图片的加载与显示 / 84 4.2.1 图片显示举例 / 84 4.2.2 lbitmapdata对象 / 86 4.2.3 lbitmap对象 / 87 4.3 层的概念 / 88 4.4 使用lgraphics对象绘图 / 90 4.4.1 绘制矩形 / 90 4.4.2 绘制圆 / 91 4.4.3...

    Echarts从入门到上手实战视频教程 70课(完整)

    ECharts,一个使用 JavaScript 实现的开源可视化库。上手简单、实用,是你在工作可视化的利器,值得学习

    简单的React SSR服务器渲染实现

    单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构,因此单页应用如果只在客户端渲染,不利于SEO,此外尽管我们可以通过按需加载的形式来减少首页加载的js,但是通过js来渲染DOM的...

    一款用javaScript开发的操作游戏.zip

    优化游戏代码和资源加载,减少游戏卡顿和延迟。 针对移动设备进行优化,确保游戏在不同设备和网络环境下都能流畅运行。 HTML5特性利用: 利用HTML5的音频和视频支持,实现游戏中的背景音乐和音效。 使用HTML5的触摸...

    Weibozzz.github.io:前端知识体系 https

    这里可以让你寻找到使用或者是学习作者建立的前端知识体系, 不定期更新,遇到的新知识、技巧,记录并...vue-配置按需加载 React 10分钟了解react新特性hooks hooks之memo和useCallback useRequest封装 权限管理 从零

    vue最新实战项目vue2vuexwebpackes6干货多多

    本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程。代码简单易懂,注释多多。实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待。

    如何确保JavaScript的执行顺序 之jQuery.html深度分析

    在上一篇文章《如何确保JavaScript的执行顺序 - 之实战篇》中,我们发现jQuery的html函数能够确保动态加载的JavaScript按照引入顺序执行。

    微信小程序-微信小程序开发实战,实现的了一个资讯类的demo

    微信小程序 工作之余撸的一个微信小程序,数据抓自干货集中营API...在开始编写微信小程序前,如果你不熟悉CSS ,JavaScript语法,可以看下以下的网址 http://www.runoob.com/ http://es6.ruanyifeng.com/ 微信小程序截图

Global site tag (gtag.js) - Google Analytics