XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解-js教程-PHP中文网

首页

web前端

js教程

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

伊谢尔伦

Jul 21, 2017 pm 03:25 PM

加载

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同步和异步加载用法实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7644

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

152

显示更多

Related knowledge

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

Stremio字幕不工作；加载字幕时出错 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

PHP实现无限滚动加载 Jun 22, 2023 am 08:30 AM

随着互联网的发展，越来越多的网页需要支持滚动加载，而无限滚动加载是其中的一种。它可以让页面不断加载新的内容，使用户可以更流畅地浏览网页。在这篇文章中，我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载？无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时，通过AJAX异步调取后台数据，实现不断加载新的内容。这种加载方

插入超链接时Outlook冻结 Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题，可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题：检查已安装的加载项更新Outlook暂时禁用您的防病毒软件，然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

css加载不出来怎么解决 Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍：1、检查文件路径，首先请确保CSS文件的路径正确，如果CSS文件位于网站的不同部分或子目录中，需要提供正确的路径，如果CSS文件位于根目录下，路径应该是直接的；2、检查文件内容，如果路径正确，那么问题可能出在CSS文件本身，打开CSS文件检查等等。

安装win7加载usb驱动失败怎么办 Jul 11, 2023 am 08:13 AM

在安装win7系统中，有网友遇到了加载usb驱动失败的情况，usb设备无法在新的win7系统中被识别，常见的u盘，鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办？下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一：1、首先我们打开电脑进入电脑系统，在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后，将USB设备连接到电脑系统。电脑系统显示，设备无法连接到系统。3、在连接信息页面，点击帮助按钮查看帮助信息。4、如果电脑系

JavaScript 如何实现滚动到页面底部自动加载的无限滚动效果？ Oct 27, 2023 pm 06:30 PM

JavaScript如何实现滚动到页面底部自动加载的无限滚动效果？无限滚动效果是现代网页开发中常见的功能之一，它可以在滚动到页面底部时自动加载更多内容，使得用户可以无需手动点击按钮或链接就能够获取更多的数据或资源。在本文中，我们将探讨如何使用JavaScript来实现这一功能，并提供具体的代码示例。实现滚动到页面底部自动加载的无限滚动效果，主要分为以下

JavaScript 如何实现网页滚动到底部自动加载更多内容的功能？ Oct 18, 2023 am 11:40 AM

JavaScript如何实现网页滚动到底部自动加载更多内容的功能？概述：在现代互联网应用中，无限滚动是一种常见的功能。当用户滚动到网页的底部时，自动加载更多内容，提供更好的用户体验。JavaScript可以帮助我们实现这一功能。本文将介绍如何使用JavaScript监听用户滚动事件，并根据滚动位置加载更多内容的具体代码示例。具体实现：首先，在HTM

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题