最简单的方法之一是请求服务器返回预填充的文本区域(以下是使用PHP的示例):
<textarea name="text" rows="20" cols="70">
<?php
echo file_get_contents('yourFile.txt');
?>
</textarea>
注意:任何服务器端脚本语言都可以执行类似操作。
与此同时,如果您需要动态加载它,最好使用AJAX方法。选择最适合您编写和维护的方法。虽然jQuery是一种流行的方法,但您可以自由选择任何您感到舒适的方法,并可能首先想了解XmlHttpRequest。
使用纯JavaScript进行动态AJAX请求可能会很棘手,因此请确保您的解决方案跨浏览器。常见错误是直接使用XmlHtpRequest并未使其兼容旧版IE版本,这会导致随机错误,具体取决于您使用的浏览器/版本。例如,它可能看起来像这样(需要在所有目标浏览器上进行测试,以便在需要时添加备用方案):
纯JS:
if (typeof XMLHttpRequest === "undefined") {
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) {}
throw new Error("This browser does not support XMLHttpRequest.");
};
}
function readBOX() {
function reqListener () {
document.forms[0].text.value = this.responseText;
}
var txtinput = document.getElementById("txtinput").value;
var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", filePath, true);
oReq.send();
}
如果您不介意牺牲一些性能以确保最大支持,您应该使用jQuery的实现:
jQuery:
function readBOX() {
var txtinput = document.getElementById("txtinput").value;
var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";
$.ajax({
url: filePath
}).done(function(data){
document.forms[0].text.value = data;
});
}
注意:jQuery的库有点庞大,但请记住,如果您直接从谷歌服务器包含它,您的用户更有可能已经在缓存中拥有它。
希望这可以帮助您 :)