在HTML中动态加载Javascript文件<AJAX的方法>--好像还有点问题
2011-02-22 17:39
796 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<input type="text" id="txt1" value="xxxxx" />
<input type="text" id="txt2" value="yyyyy" />
<script language="javascript" type="text/javascript">
<!--
function GetHttpRequest() {
var xmlhttp_request = false;
try {
if (window.ActiveXObject) {
for (var i = 5; i; i--) {
try {
if (i == 2) {
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
}
break;
}
catch (e) {
xmlhttp_request = false;
}
}
}
else if (window.XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType("text/xml");
}
}
}
catch (e) {
xmlhttp_request = false;
}
return xmlhttp_request;
}
function AjaxPage(sld, url) {
var oXmlHttp = GetHttpRequest();
if (oXmlHttp) {
oXmlHttp.OnReadyStateChange = function() {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200 || oXmlHttpRequest == 304) {
IncludeJS(sld, url, oXmlHttp.responseText);
}
else {
alert("XML request error:" + oXmlHttp.statusText + "(" + oXmlHttp.status + ")");
}
}
};
oXmlHttp.open("GET", url, true);
oXmlHttp.setRequestHeader("Content-Type", "text/xml");
oXmlHttp.setRequestHeader("Content-Type", "gb2312");
oXmlHttp.send(null);
}
}
function IncludeJS(sld, fileUrl, source) {
if ((source != null) && (!document.getElementById(sld))) {
var oHead = document.getElementsByTagName("HEAD").item(0);
var oScript = document.createElement('script');
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.id = sld;
oScript.defer = true;
oScript.text = source;
oHead.appendChild(oScript);
}
}
AjaxPage("scrA", "JS/b.js");
alert("主页面动态加载JS脚本");
alert("主页面动态加载b.js并取其中的变量:" + str);
//-->
</script>
</body>
</html>
附:其它的三种方法
动态加载js文件的方法(缺陷:不能使用js中的全局变量,如果是在html>body之后的代码中动态加载的话,可能还有其它的缺陷):
1.直接document.write
<script language="javascript"> document.write("<script src='test.js'><\/script");
</script>
2.动态改变已经存在的script的src
<script src='' id='s1'></script>
<script language="javascript">
s1.src='test.js';
</script>
3.动态创建script元素
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'test.js';
oHead.appendChild(oScript);
</script>
此上三种方法都是异步执行的,无法保证加载后脚本具体执行的情况,因为IE无法被我们的脚本所阻塞,无法要求加载过程中断,等待我们取得必要的信息。在加载脚本时,主页面的脚本在继续运行,如果用以上的方法,那如下代码:
要动态加载的JS脚本:a.js,以下是该文件内容:
var str = "中国";
alert("这是a.js中的变量:"+str);
对话框将不能弹出,报错:'str'未定义
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<input type="text" id="txt1" value="xxxxx" />
<input type="text" id="txt2" value="yyyyy" />
<script language="javascript" type="text/javascript">
<!--
function GetHttpRequest() {
var xmlhttp_request = false;
try {
if (window.ActiveXObject) {
for (var i = 5; i; i--) {
try {
if (i == 2) {
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
}
break;
}
catch (e) {
xmlhttp_request = false;
}
}
}
else if (window.XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType("text/xml");
}
}
}
catch (e) {
xmlhttp_request = false;
}
return xmlhttp_request;
}
function AjaxPage(sld, url) {
var oXmlHttp = GetHttpRequest();
if (oXmlHttp) {
oXmlHttp.OnReadyStateChange = function() {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200 || oXmlHttpRequest == 304) {
IncludeJS(sld, url, oXmlHttp.responseText);
}
else {
alert("XML request error:" + oXmlHttp.statusText + "(" + oXmlHttp.status + ")");
}
}
};
oXmlHttp.open("GET", url, true);
oXmlHttp.setRequestHeader("Content-Type", "text/xml");
oXmlHttp.setRequestHeader("Content-Type", "gb2312");
oXmlHttp.send(null);
}
}
function IncludeJS(sld, fileUrl, source) {
if ((source != null) && (!document.getElementById(sld))) {
var oHead = document.getElementsByTagName("HEAD").item(0);
var oScript = document.createElement('script');
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.id = sld;
oScript.defer = true;
oScript.text = source;
oHead.appendChild(oScript);
}
}
AjaxPage("scrA", "JS/b.js");
alert("主页面动态加载JS脚本");
alert("主页面动态加载b.js并取其中的变量:" + str);
//-->
</script>
</body>
</html>
附:其它的三种方法
动态加载js文件的方法(缺陷:不能使用js中的全局变量,如果是在html>body之后的代码中动态加载的话,可能还有其它的缺陷):
1.直接document.write
<script language="javascript"> document.write("<script src='test.js'><\/script");
</script>
2.动态改变已经存在的script的src
<script src='' id='s1'></script>
<script language="javascript">
s1.src='test.js';
</script>
3.动态创建script元素
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'test.js';
oHead.appendChild(oScript);
</script>
此上三种方法都是异步执行的,无法保证加载后脚本具体执行的情况,因为IE无法被我们的脚本所阻塞,无法要求加载过程中断,等待我们取得必要的信息。在加载脚本时,主页面的脚本在继续运行,如果用以上的方法,那如下代码:
要动态加载的JS脚本:a.js,以下是该文件内容:
var str = "中国";
alert("这是a.js中的变量:"+str);
对话框将不能弹出,报错:'str'未定义
相关文章推荐
- Ajax动态加载<td><select>后下拉框默认选中问题
- 在JavaWEB中将Ajax动态查询结果转换成List<Map>型JavaScript数组
- js加载之使用DOM方法动态加载Javascript文件
- 关于html中charset与<title>位置不同页面空白的问题及解决方法
- ajax加载本地html文件出现 XMLHttpRequest cannot load的问题
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- javascript动态在<div>中加载内容
- [UE4]C++静态加载问题的解决方法 : TSubclassOf<> 蓝图赋值为nullptr
- 关于“socket:<10106> 无法加载或初始化请求的服务提供程序”问题的解决方法
- exc_bad_access的错误,找不到<libxml/tree.h> 头文件,retina模拟器怎么缩小的问题,xcode5.1.1怎么运行6.1的模拟器,还有模拟器模拟location
- 在HTML中动态加载Javascript文件(2)
- #import <libxml/HTMLparser.h>等相关头文件编译错误问题
- 动态加载JavaScript文件的两种方法
- 关于使用Html <audio>标签播放视频文件的问题
- ajax图片上传及时回显图片,自己总结 + ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
- ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
- javascript中采用jQuery ajax动态加载js文件的解决方法
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- 基于Liferay的平台下,portlet在各个模式下分别加载以<footer-portlet-javascript>定义的js文件的不可行性 推荐