function init() { // package.js 파일을 로드하고 스크립트 ID를 yy로 설정합니다 ajaxP"/> function init() { // package.js 파일을 로드하고 스크립트 ID를 yy로 설정합니다 ajaxP">

 >  기사  >  웹 프론트엔드  >  XMLHttpRequest/ActiveXObject 동기화 및 비동기 로딩 사용 예에 ​​대한 자세한 설명

XMLHttpRequest/ActiveXObject 동기화 및 비동기 로딩 사용 예에 ​​대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-21 15:25:542982검색

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으로 문의하세요.