How To Read a File From Server Using Javascript

Share this Article
Reading Time: 4 minutes
5,489 Views

Inside this article we will see how to read a file from server using javascript. Article contains a classified information about reading a text file from server in a very easy way.

In javascript we use XMLHttpRequest for ajax requests. Assuming we have a text file at server, we will read all contents from it. Additionally if you don’t have any idea about reading files via XMLHttpRequest then also you will get some idea from it.

The keystone of AJAX is the XMLHttpRequest object.

  1. Create an XMLHttpRequest object
  2. Define a callback function
  3. Open the XMLHttpRequest object
  4. Send a Request to a server

Learn More –

Let’s get started.


Create an Application

Create a folder with name js-ajax in your localhost directory. Create a file index.html into it. Also we need to text file.

Let’s say we have data.txt in the same folder which contains a sample text into it.

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <script>
        function readTxtDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                // Create an XMLHttpRequest object
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5  
                // Create an ActiveXObject object
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // Define a callback function
            xmlhttp.onload = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // Here you can use the Data
                    document.getElementById("msgh2").innerHTML = xmlhttp.responseText;
                }
            }

            // Send a request
            xmlhttp.open("GET", "data.txt", true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
    <div>
        <h2 id="msgh2">When you click, content should be change.</h2>
    </div>
    <button type="button" onclick="readTxtDoc()">Change Content</button>
</body>

</html>

Application Testing

Open browser and type this –

URL – http://localhost/js-ajax/index.html

It loads a simple UI with a button. When you click, it access the data from text file and put into heading tag.

Here, is the screen image of firing ajax request when we click on button.

We hope this article helped you to learn How To Read a File From Server Using Javascript Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5