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信箱登陸入口在哪裡

7825

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

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非同步調取後台數據，實現不斷載入新的內容。這種載入方

css載入不出來怎麼解決 Oct 20, 2023 am 11:29 AM

css載入不出來的解決辦法有檢查檔案路徑、檢查檔案內容、清除瀏覽器快取、檢查伺服器設定、使用開發者工具和檢查網路連線等。詳細介紹：1、檢查檔案路徑，首先請確保CSS檔案的路徑正確，如果CSS檔案位於網站的不同部分或子目錄中，需要提供正確的路徑，如果CSS檔案位於根目錄下，路徑應該是直接的；2、檢查文件內容，如果路徑正確，那麼問題可能出在CSS文件本身，開啟CSS文件檢查等等。

插入超連結時Outlook凍結 Feb 19, 2024 pm 03:00 PM

如果您在插入超連結時出現在Outlook時遇到凍結問題，可能是因為網路連線不穩定、Outlook版本舊、防毒軟體幹擾或加載項衝突等原因。這些因素可能導致Outlook無法正常處理超連結操作。修正插入超連結時Outlook凍結的問題使用以下修復程式解決插入超連結時Outlook凍結的問題：檢查已安裝的加載項更新Outlook暫時停用您的防毒軟體，然後嘗試建立新的使用者設定檔修復辦公室應用程式卸載並重新安裝Office我們開始吧。 1]檢查已安裝的加載項可能是Outlook中安裝的某個加載項導致了問題。

安裝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版

熱門話題