首页 > 代码库 > 【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段

【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段

 

1. 创建文件名为“someResource”的文件(文件无后缀),文件类型:文件,在文件夹中如下图:

"someResource"文件代码:

<b>This is the content of resource <tt>someResource</tt></b>

 

2. HTML代码:

 

<!DOCTYPE html>
<html>
  <head>
    <title>使用原生XHR来获取并包括HTML片段</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      window.onload = function() {

//创建XHR
        var xhr;
//测试ActiveX是否存在
        if (window.ActiveXObject) {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

//测试XHR是否已经被定义
        else if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        }

//如果不支持Ajax则抛出错误
        else {
          throw new Error("Ajax is not supported by this browser");
        }

        xhr.onreadystatechange = function() {

//就绪处理器,忽略除DONE状态之外的所有状态
          if (this.readyState == 4) {

//根据响应状态进行代码分支
            if (this.status >= 200 && this.status < 300) {

//成功时执行
              document.getElementById(‘someContainer‘)
                .innerHTML = this.responseText;
            }
          }
        };

        xhr.open(‘GET‘,‘someResource‘);
        xhr.send(‘‘);
      };
    </script>
  </head>

  <body>
    <div id="someContainer"></div>
  </body>
</html>

 

【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段