Ajax

document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

With Ajax You can receive data asynchronously without page reload.

Method 1 – onload function

Method 2 – readystate function

Write text from TXT file in a specific div with AJAX