在 Vanilla JS 中读取文本文件 - Javascript

在Vanilla JS中，读取文本文件是一项相对简单而且非常有用的任务。本文将向您展示如何通过使用Javascript代码来读取文本文件。

获取文本文件

首先，我们需要获取要读取的文本文件。我们可以使用XMLHttpRequest对象从服务器请求文件，也可以使用<input>标签和FileReader对象来读取本地文件。

使用XMLHttpRequest对象

XMLHttpRequest对象允许我们从服务器异步请求数据。我们可以通过以下步骤来获取文本文件：

1. 创建XMLHttpRequest对象

let xhr = new XMLHttpRequest();

2. 指定要请求的文件

xhr.open('GET', 'example.txt', true);

此处将要请求一个名为example.txt的文件。第三个参数为异步标识，设置为true表示异步请求，设置为false表示同步请求。

3. 指定响应类型

xhr.responseType = 'text';

指定响应类型为text，这样我们将获得一个字符串对象，而不是二进制数据。

4. 指定响应完成回调

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    let text = xhr.responseText;
    // Do something with text
  }
}

在这个回调中，我们可以检查响应的状态是否已经完成（readyState === 4），同时也检查响应的状态码是否为200，表示请求成功。

5. 发送请求

xhr.send();

现在我们可以发送请求了。如果一切顺利，我们将得到一个text字符串，其中包含了我们想要的文本文件内容。

使用FileReader对象

除了从服务器请求数据外，我们还可以使用<input>标签和FileReader对象来读取本地文件。这需要用户手动选择文件，因此可以在Web应用中提供更好的用户体验。

1. 创建<input>元素

<input type='file' id='fileInput'>

我们创建一个文件输入框，用户可以通过单击此框选择文件。

2. 指定回调函数

let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(){
  let file = fileInput.files[0];
  let reader = new FileReader();
  reader.onload = function(){
    let text = reader.result;
    // Do something with text
  }
  reader.readAsText(file);
});

每当用户作出更改时，我们将检测更改并调用回调函数，该函数将读取文件并将其内容存储在reader.result属性中。

现在我们已经知道了如何获取文本文件，接下来我们可以将读取到的内容使用在我们的应用程序中，例如将其显示在页面上或将其传递给服务器。

结论

通过使用Vanilla JS，我们可以轻松地读取文本文件，并使用这些数据进行更进一步的处理。无论是从服务器获取还是从本地目录中读取，这项任务都可以轻松实现。