`
gongmingwind
  • 浏览: 588623 次
  • 性别: 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项目实战 模板

    【标题】:“JavaScript项目实战模板”是针对JavaScript编程语言的一次深入实践,旨在提升开发者在实际项目中的应用能力。在JavaScript的世界里,项目实战是非常重要的一部分,它可以帮助学习者将理论知识转化为实际...

    《JavaScript和jQuery实战手册》PDF

    《JavaScript和jQuery实战手册》是一本深入探讨JavaScript和jQuery编程技术的专业书籍,旨在帮助读者掌握这两门重要技术,提升Web开发能力。JavaScript是互联网上最广泛使用的脚本语言,而jQuery则是JavaScript的一...

    vuedom动画版(路由拆分按需加载)

    结合这两个特性,"vuedom动画版(路由拆分按需加载)"项目旨在为初学者提供一个实战案例,让他们了解如何在实际项目中利用Vue 2实现路由的按需加载和优雅的页面过渡动画。通过学习这个项目,开发者可以深入理解这两...

    JavaScript实战.pdf

    《JavaScript实战》是一本旨在帮助读者掌握使用JavaScript开发现代网站所需技能的专业书籍。本书不仅适合已经具备一定编程基础的读者,也适用于希望通过学习JavaScript来提升自身技能的新手。通过本书的学习,读者...

    JavaScript实战.pdf 中文完整版

    本书“JavaScript实战.pdf 中文完整版”深入浅出地介绍了JavaScript在实际项目中的应用,旨在帮助读者提升实战能力,掌握从基础到高级的JavaScript知识。 一、JavaScript基础 1. 变量与数据类型:了解JavaScript中...

    JAVASCRIPT实战手册

    JavaScript实战手册是一部面向初学者的实用指南,旨在帮助新手快速掌握JavaScript这门强大的脚本语言。JavaScript,简称JS,是互联网上最广泛使用的编程语言之一,尤其在网页开发和前端交互方面发挥着至关重要的作用...

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码涵盖了利用JavaScript这一强大的前端脚本语言与ArcGIS Server进行交互,创建高效、交互性强的地理信息系统(GIS)应用的核心技术。本资源包含了一系列示例代码...

    零基础入javaScript到实战达人

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,尤其在现代前端开发中起着核心作用。"零基础入javaScript到实战达人"的视频教程旨在为初学者提供一个逐步学习JavaScript的路径,从基础知识到...

    JavaScript和jQuery实战手册源码--the missing manual

    《JavaScript和jQuery实战手册源码--the missing manual》是一本旨在帮助开发者深入理解并熟练运用这两种技术的书籍。这本书的示例代码合集,即`js3e-master`,提供了丰富的实践案例,涵盖了从基础到高级的各种概念...

    前端跨界开发指南:JavaScript工具库原理解析与实战.docx

    模块化是JavaScript工具库的一个重要特性,它允许开发者按需引入特定功能,减少代码冗余,提高代码可维护性。例如,React库中的组件化思想,让开发者可以将UI拆分成独立的、可复用的部分,每个部分都可以作为一个...

    JavaScript-DOM实战案例

    开发者可以通过JavaScript改变图片的源URL、透明度、尺寸,或者实现图片的预加载、懒加载等技术。同时,还可以学习如何利用DOM API动态插入、替换或移除图片,以达到动态更新界面的效果。 在这个实战案例中,你可能...

    JAVASCRIPT网页特效实战演戏

    "JAVASCRIPT网页特效实战演戏"这个主题,将深入探讨如何利用JavaScript来创建令人惊叹的网页特效,提升用户体验。 首先,JavaScript能够改变HTML元素的样式,这是创建网页特效的基础。通过操作DOM(Document Object...

    [高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.文字版

    公司的高级前端工程师,他在书中分享了大量实战经验与技巧,帮助读者优化JavaScript性能,提升网页的加载速度和运行效率。 首先,书中讲述了JavaScript代码的加载与执行,这是性能优化的第一步。作者强调了脚本的...

    JAVASCRIPT+HTML项目实例

    比如,页面的滚动效果、图片轮播、动态加载数据、时间日期显示等。这些特效的注解(说明)将详细解释每段代码的作用,帮助开发者理解背后的逻辑。通过这些注解,初学者可以学习到如何分析问题、设计解决方案,并最终...

    Vue.js前端开发实战-源代码.zip

    - 动态加载和懒加载:优化用户体验,按需加载组件或资源。 - 多页布局:使用Vue Router实现多页面跳转和导航。 - 状态管理:通过Vuex处理全局状态和组件间通信。 - 错误处理和日志记录:捕获运行时错误,提供调试...

    html+css+javascript 电商网站web+mobile实战项目

    JavaScript还能实现动态加载数据、AJAX异步通信,用于实时更新商品信息、购物车状态等。初学者应学习变量、条件语句、函数、DOM操作等基础概念,以及jQuery的选择器和方法。 这个项目特别强调移动端自适应,这意味...

    javascript实例300例(很全的)

    通过JavaScript,开发者可以实现在用户与服务器交互前后的前端逻辑,比如预加载数据、实时更新内容、提供反馈提示等。此外,jQuery、React、Angular等JavaScript库和框架也常常与ASP.NET结合使用,以提高开发效率和...

Global site tag (gtag.js) - Google Analytics