Read File Using JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Read File Using JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">

//create the Cross-browser XMLHttpRequest object
function getFile(pURL,pFunc) {
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
        eval('xmlhttp.onreadystatechange='+pFunc+';');
        xmlhttp.open("GET", pURL, true); // leave true for Gecko
        xmlhttp.send(null);
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
        if (xmlhttp) {
            eval('xmlhttp.onreadystatechange='+pFunc+';');
            xmlhttp.open('GET', pURL, false);
            xmlhttp.send();
        }
    }

}



function makeList() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            var tmpArr=xmlhttp.responseText.split('\n');
            var out='<select name="states" size="1">';
            var tmp;
            var val;
            var txt;
            for (var idx=0;idx<tmpArr.length;idx++) {
                tmp=tmpArr[idx].split(',');
                val = tmp[0].replace('"','');
                val = val.replace('"','');
                txt = tmp[1].replace('"','');
                txt = txt.replace('"','');
                out += '<option value="'+val+'">'+txt+'</option>';
            }
            out += '</select>';
            document.getElementById('theExample').innerHTML=out;
        }
    }

}



function makeTable() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            var tmpArr=xmlhttp.responseText.split('\n');
            var out='<table id="exampleTable" border="1" bordercolor="#000000" cellpadding="2" style="border-collapse:collapse;">';
            var tmp;
            var val;
            var txt;
            for (var idx=0;idx<tmpArr.length;idx++) {
                tmp=tmpArr[idx].split(',');
                val = tmp[0].replace('"','');
                val = val.replace('"','');
                txt = tmp[1].replace('"','');
                txt = txt.replace('"','');
                out += '<tr><td>'+val+'</td><td>'+txt+'</tr>';
            }
            out += '</table>';
            document.getElementById('theExample').innerHTML=out;
        }
    }

}



function raw() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            document.getElementById('theExample').innerHTML=xmlhttp.responseText;
        }
    }

}



function highlightI() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            var tmpArr=xmlhttp.responseText.split('I');
            var out=tmpArr[0];
            for (var idx=1;idx<tmpArr.length;idx++) {
                out += '<span style="color:#FF9900; font-weight:bold">I</span>'+tmpArr[idx];
            }
            document.getElementById('theExample').innerHTML=out;
        }
    }

}
</script>
</head>


<body onload="getFile('http://www.rodsdot.com/ee/states-all.csv','makeList');">
  <div id="theExample">Loading...</div>
</body>


</html>
How can you load an external file into any HTML element without using an iFrame, a Frame or server side code?
