实战JavaScript按需加载Js

最新推荐文章于 2025-05-01 18:11:30 发布

原创最新推荐文章于 2025-05-01 18:11:30 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #json #浏览器 #IE #Ajax #ViewUI

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用AJAX获取广告信息并根据返回的数据动态加载不同JS文件的示例。通过创建自定义的JsLoader类实现了JS脚本的按需加载，同时介绍了如何使用XMLHttpRequest对象发起异步请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个例子中我没有调用回调函数，是因为在我加载的js中已经有了方法调用
调用代码：
[color=red] var jsLoader=new JsLoader();
jsLoader.load("/adsa/html/js/"+json.pop_type+".js");[/color]


// 根据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() {
	};
}