xmlhttprequest/activexobject异步加载
在同一个文件夹下面创建一个function5.html,代码如下:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
//加载package.js文件,设置script的id为yy
ajaxpage("yy","package.js");
//此方法为package.js里面的方法,此处执行方法成功
functionone();
}
function ajaxpage(sid,url)
{
var oxmlhttp = gethttprequest();
oxmlhttp.onreadystatechange = function()
{
//4代表数据发送完毕
if ( oxmlhttp.readystate == 4 )
{
//0为访问的本地,200代表访问服务器成功,304代表没做修改访问的是缓存
if(oxmlhttp.status == 200 || oxmlhttp.status == 0 || oxmlhttp.status == 304)
{
includejs(sid,oxmlhttp.responsetext);
}
else
{
}
}
}
oxmlhttp.open("get",url,true);
oxmlhttp.send(null);
}
function gethttprequest()
{
if(window.activexobject)//ie
{
return new activexobject("msxml2.xmlhttp");
}
else if(window.xmlhttprequest)//其他
{
return new xmlhttprequest();
}
}
function includejs(sid,source)
{
if((source != null)&&(!document.getelementbyid(sid)))
{
var myhead = document.getelementsbytagname("head").item(0);
var myscript = document.createelement( "script" );
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = sid;
try{
myscript.appendchild(document.createtextnode(source));
}
catch (ex){
myscript.text = source;
}
myhead.appendchild( myscript );
}
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>
activexobject只有ie里面才有,其他浏览器大部分支持xmlhttprequest,通过此办法我们可以实现动态加载脚本了,不过是异步加载,也没法运行functionone,第二次就可以运行了,但是可惜的是在ie、firefox、safari下可以运行,在opera、chrome下会出错,不过只要发布之后在chrome和opera下就不会出现错误了。
其实这里把open里面设置为false就是同步加载了,同步加载不需要设置onreadystatechange事件。
xmlhttprequest/activexobject同步加载
在这里我把一些情况考虑在内,写成了一个方法,封装为loadjs.js,方便以后直接调用,代码如下:
/**
* 同步加载js脚本
* @param id 需要设置的<script>标签的id
* @param url js文件的相对路径或绝对路径
* @return {boolean} 返回是否加载成功,true代表成功,false代表失败
*/
function loadjs(id,url){
var xmlhttp = null;
if(window.activexobject)//ie
{
try {
//ie6以及以后版本中可以使用
xmlhttp = new activexobject("msxml2.xmlhttp");
}
catch (e) {
//ie5.5以及以后版本可以使用
xmlhttp = new activexobject("microsoft.xmlhttp");
}
}
else if(window.xmlhttprequest)//firefox,opera 8.0+,safari,chrome
{
xmlhttp = new xmlhttprequest();
}
//采用同步加载
xmlhttp.open("get",url,false);
//发送同步请求,如果浏览器为chrome或opera,必须发布后才能运行,不然会报错
xmlhttp.send(null);
//4代表数据发送完毕
if ( xmlhttp.readystate == 4 )
{
//0为访问的本地,200到300代表访问服务器成功,304代表没做修改访问的是缓存
if((xmlhttp.status >= 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304)
{
var myhead = document.getelementsbytagname("head").item(0);
var myscript = document.createelement( "script" );
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = id;
try{
//ie8以及以下不支持这种方式,需要通过text属性来设置
myscript.appendchild(document.createtextnode(xmlhttp.responsetext));
}
catch (ex){
myscript.text = xmlhttp.responsetext;
}
myhead.appendchild( myscript );
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
此处考虑到了浏览器的兼容性以及当为chrome、opera时必须是发布,注释还是写的比较清楚的,以后需要加载某个js文件时,只需要一句话就行了,如loadjs(myjs,package.js)。方便实用。
以上就是xmlhttprequest/activexobject同步和异步加载用法实例详解的详细内容。