XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解

来源：动视网责编：小采时间：2020-11-27 20:15:32

XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解

XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解:XMLHttpRequest/ActiveXObject异步加载在同一个文件夹下面创建一个function5.html，代码如下：<html> <head> <title></title> <script type="text/javascript"> f

推荐度：

点击下载本文 文档为doc格式

导读XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解:XMLHttpRequest/ActiveXObject异步加载在同一个文件夹下面创建一个function5.html，代码如下：<html> <head> <title></title> <script type="text/javascript"> f

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同步和异步加载用法实例详解

推荐度：

点击下载本文 文档为doc格式

标签：加载 xmlhttp XMLHttpRequest

热门焦点

XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解

XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解

XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解

最新推荐

猜你喜欢

热门推荐