Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der XMLHttpRequest/ActiveXObject-Synchronisierung und Anwendungsbeispiele für asynchrones Laden

Ausführliche Erläuterung der XMLHttpRequest/ActiveXObject-Synchronisierung und Anwendungsbeispiele für asynchrones Laden

伊谢尔伦Original: 2017-07-21 15:25:542965Durchsuche

Asynchrones Laden von XMLHttpRequest/ActiveXObject

Erstellen Sie eine function5.html im selben Ordner. Der Code lautet wie folgt:

<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 ist nur im IE verfügbar und wird von den meisten anderen Browsern unterstützt XMLHttpRequest, über diese Methode können wir Skripte dynamisch laden, aber es handelt sich um ein asynchrones Laden, und functionOne kann nicht ein zweites Mal ausgeführt werden, aber leider kann es unter IE, Firefox und Safari ausgeführt werden, und es kann unter Opera ausgeführt werden. Unter Chrome wird es Fehler geben, aber solange es veröffentlicht ist, wird es unter Chrome und Opera keine Fehler geben.

Tatsächlich bedeutet die Einstellung von „open“ hier, dass für das synchrone Laden kein onreadystatechange-Ereignis festgelegt werden muss.

XMLHttpRequest/ActiveXObject synchrones Laden

Hier habe ich einige Situationen berücksichtigt und eine Methode geschrieben, die als „loadJS.js“ gekapselt ist, um den direkten Aufruf in Zukunft zu erleichtern. Der Code lautet wie folgt:

/**
 * 同步加载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;
  }
}

Die Kompatibilität des Browsers und die Tatsache, dass er veröffentlicht werden muss, wenn es Chrome oder Opera ist, werden hier relativ klar geschrieben In Zukunft benötigen Sie nur noch einen Satz, z. B. loadJS("myJS","package.js"). Bequem und praktisch.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der XMLHttpRequest/ActiveXObject-Synchronisierung und Anwendungsbeispiele für asynchrones Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in JavascriptNächster Artikel：Detaillierte Erläuterung der synchronen und asynchronen dynamischen Erstellung von Skriptelementinstanzen in Javascript

In Verbindung stehende Artikel

Mehr sehen