Different Ways to Read Text Files from URLs using JavaScript and jQuery

In today’s web-driven world, the ability to read text and manipulate data from external sources is a fundamental requirement for web developers. Whether it’s for fetching user data, accessing configuration files, or loading dynamic content, reading text files from URLs is a common task. JavaScript and jQuery, popular scripting libraries, offer various methods to accomplish this task efficiently. In this article, we will explore the different ways to read text files from URLs using both JavaScript and jQuery.

Read file from URL Using JavaScript

JavaScript provides native APIs that allow developers to interact with network resources and retrieve data from URLs. Below are two prominent methods to read text files from URLs using JavaScript:

1. Fetch API

The Fetch API is a modern and more streamlined way of making network requests. It uses Promises to handle asynchronous operations. Here’s how you can use the Fetch API to read a text file:

fetch('your-url-here.txt')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.text();
    })
    .then(textContent => {
        // get the text.
        const result = textContent;
        console.log(textContent);
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

2. XMLHttpRequest

XMLHttpRequest is a browser feature that enables asynchronous communication between a web browser and a server. It can be used to retrieve data from URLs, including text files. Here’s a basic example of how you can use XMLHttpRequest to read a text file:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-url-here.txt', true);

xhr.onload = function () {
    if (xhr.status === 200) {
        // get the text from response.
        const textContent = xhr.responseText;
        console.log(textContent);
    }
};

xhr.send();

Read file from URL Using jQuery

jQuery is a widely used JavaScript library that simplifies DOM manipulation and provides utilities for making AJAX requests. Here’s how you can use jQuery to read text files from URLs:

1. $.ajax()

jQuery’s $.ajax() method is a versatile way to perform AJAX requests, including fetching text files from URLs. Here’s an example:

$.ajax({
    url: 'your-url-here.txt',
    method: 'GET',
    dataType: 'text',
    success: function(textContent) {
        // get the text.
        const result = textContent;
        console.log(textContent);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('AJAX error:', errorThrown);
    }
});

2. $.get()

If you’re only interested in fetching text content, you can use the $.get() shorthand method:

$.get('your-url-here.txt', function(textContent) {
    // get the text.
    const result = textContent;
    console.log(textContent);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', errorThrown);
});