Reading a Text File With AJAX

This example program demonstrates how to read a file via AJAX as a binary string, as a data URL, and as text in JavaScript.

ReadXoaXFileWithAjax.html

<!DOCTYPE html>
<html>
  <head>
    <script language="javascript" type="text/javascript" src="ReadXoaXFileWithAjax.js"></script>
  </head>
  <body onload="LoadXoaxFileWithAjax()">
    <table cellspacing="0" cellpadding="5" border="2" id="idRead">
      <tr>
        <th>function</th>
        <th>text</th>
        <th>length</th>
        <th>char codes</th>
      </tr>
      <tr>
        <td>readAsBinary()</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>readAsDataURL()</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>readAsText()</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

ReadXoaXFileWithAjax.js

function LoadXoaxFileWithAjax() {
  var qHttpRequest = new XMLHttpRequest();
  // Open a german text file
  qHttpRequest.open( "GET", "XoaX.txt", true );
  qHttpRequest.responseType = "arraybuffer";

  qHttpRequest.onload = function( e ) {
    var uiaBytes = new Uint8Array( this.response );
    var qBlob = new Blob([uiaBytes], {type:"text/plain"});
    GetFileInfo(qBlob);
  };
  qHttpRequest.send();
}

function GetFileInfo(qBlob, i = 1) {
  if (i > 3) {
    return;
  } else {
    var qFileReader = new FileReader();
    // The callback function
    qFileReader.onload = function() {
      var sReadData = qFileReader.result;
      CreateInfo(sReadData, i);
      GetFileInfo(qBlob, i + 1)
    }
    const kqFile = qBlob;
    if (i == 1) {
      qFileReader.readAsBinaryString(kqFile);
    } else if (i == 2) {
      qFileReader.readAsDataURL(kqFile);
    } else {
      qFileReader.readAsText(kqFile);
    }
  }
}

function CreateInfo (sData, rowIdx) {
  var qReadTable = document.getElementById("idRead");
  var qRow = qReadTable.rows[rowIdx];

  qRow.cells[1].innerHTML = sData;
  qRow.cells[2].innerHTML = sData.length;

  var sCharCodes = "";
  for (var i=0; i < sData.length; i++) {
    sCharCodes += sData.charCodeAt(i) + ((i < sData.length - 1) ? ", ": "");
  }
  qRow.cells[3].innerHTML = sCharCodes;
}

Core JavaScript

Reading a Text File With AJAX

ReadXoaXFileWithAjax.html

ReadXoaXFileWithAjax.js

Output