javascriptで一瞬undefinedと表示されてしまいます
以下のソースをブラウザから開くと一瞬undefinedと表示されます。  
何か考えられる原因はありますでしょうか？  
また、以下のソースに改善すべきところがありましたら教えていただけると大変助かります。

```

      <!DOCTYPE html>
      <html>
        <head>
          <meta http-equiv="content-type" charset="utf-8">
          <script>
            function getJSON(){
              var request = new XMLHttpRequest();
              request.open('GET', 'http://localhost/', true);
              request.responseType = 'json';
              request.onload = function () {
                var data = this.response;
                document.write('<h1>JSON TEST</h1>');
                for (var i = 0; i < data.length; i++){
                    document.write('<ul>');
                    document.write('<li>');
                    document.write(data[i].name + '<br />');
                    document.write('</li>');
                    document.write('</ul>');
                }
              };
              request.send();
            }
          </script>
        </head>
        <body>
          <script>
            document.write(getJSON());
          </script>
        </body>
      </html>
    
```