JavaScript: Загрузка контента без перезагрузки страницы

Используя только JavaScript обновляем контент без перезагрузки страницы.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Подгрузка контента без перезагрузки страницы </title>

  <script>
    function showContent(link) {
      var cont = document.getElementById('content');
      var loading = document.getElementById('loading');
      cont.innerHTML = loading.innerHTML;
      var http = createRequestObject();
      if (http) {
        http.open('get', link);
        http.onreadystatechange = function () {
          if (http.readyState == 4) {
            cont.innerHTML = http.responseText;
          }
        }
        http.send(null);
      } else {
        document.location = link;
      }
    }
    // ajax объект
    function createRequestObject() {
      try {
        return new XMLHttpRequest()
      } catch (e) {
        try {
          return new ActiveXObject('Msxml2.XMLHTTP')
        } catch (e) {
          try {
            return new ActiveXObject('Microsoft.XMLHTTP')
          } catch (e) {
            return null;
          }
        }
      }
    }
  </script>
</head>
<body>

  <ul style="text-align:center">
    <li style="color:blue"><a href="#" onClick="showContent('page1.html')">Страница 1</a></li>
    <li style="color:green"><a href="#" onClick="showContent('page2.html')">Страница 2</a></li>
    <li style="color:cyan"><a href="#" onClick="showContent('page3.html')">Страница 3</a></li>
    <li style="color:red"><a href="#" onClick="showContent('page4.html')">Страница 4</a></li>
  </ul>

  <div id="content"><!-- CONTENT --></div>
  <div id="loading" style="display: none">Идет загрузка...</div>

  <script>showContent('page1.html')</script>

</body>
</html>

Создайте в папке файлы page1.html, page2.html, page3.html, page4.html и посмотрите на результат.