I am unable to access the information from a .txt file using Ajax

I'm attempting to create a basic AJAX example, but I'm encountering issues getting it to function correctly.
Below is the code I have:

<script>
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLhttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            //Code for IE6 and IE5
            xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
        }

        xmlhttp.onreadystatechange = function() {
            if ((xmlhttp.readystate == 4) && (xmlhttp.status == 200)) {
                document.getElementbyId("mydiv").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET", ajax_info.txt, "true");
        xmlhttp.send();
    }
</script>

The objective is to fetch data from a .txt file, but when I press the button, it fails to function as intended.

Here is the code within the body:

<div id="mydiv"><h2>Allow Ajax to alter this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Modify content</button>

Answer №1

It appears that your code contains a number of "spelling" mistakes. Please correct the following:

window.XMLhttpRequest  -->  window.XMLHttpRequest
xmlhttp.readystate     -->  xmlhttp.readyState
getElementbyId(...)    -->  getElementById(...)
ajax_info.txt          -->  "ajax_info.txt"

Additionally, you can view this working demo;


Utilizing your browser's developer console/toolbar can be very beneficial in debugging these types of errors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The table disappears when there is no data available in the database

One of my challenges involves a table that displays data retrieved from a database. The code for this is as follows: <table class="table table-hover table-bordered" style="width:300px" id="contact"> <tbody data-bind="foreach:items"> ...

Upgrading database tables in Rails 4 using AJAX UJS and linking through a collection

I have a list of news articles that I want to display and sort by year. There is a pagination list above with the years 2010 through 2014. When a year is clicked, the news list should be sorted accordingly without refreshing the page using AJAX. I know ...

Tips for working with elements in WebDriver that are created dynamically by JavaScript

As a novice in automation using Java and WebDriver, I find myself facing a particular issue: Browse for a specific customer Select a new customer type from a dropdown menu Click on the Save button Outcome: Upon trying to change the customer, a message p ...

Ensure that the date range picker consistently shows dates in a sequential order

Currently utilizing the vuetify date range picker component https://i.stack.imgur.com/s5s19.png At this moment, it is showcasing https://i.stack.imgur.com/GgTgP.png I am looking to enforce a specific display format, always showing the lesser date first ...

Is there a way to display tiff files in Google Chrome?

I've been struggling with this problem for over 48 hours now, tirelessly searching for a solution. The issue lies within an application built using the ext.net framework on the front end. Specifically, I'm encountering difficulties when it comes ...

Using AngularJS to extract data from a JSON feed that contains a namespace

Just diving into Angular and I'm loving it. Struggling with parsing a JSON feed that has namespaces, need some help: Here's an example from the JSON feed: "title": { "label": "Fuse" }, "im:name": { "label": "John Doe" }, "im:image": [ { ...

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?

Having issues with my basic website and struggling to find a solution. As a complete beginner in this field, I am stuck and need some guidance. Accessing http://localhost:3000/class/create works perfectly fine when running the server. However, trying to a ...

Is it possible to directly update the label text in AngularJS from the view itself?

I found the following code snippet in my HTML <span ng-class="newProvider ? 'newProvider' : ''" class="help-block"> {{ 'new-product.provider.helper' | locate }} </span> Whenever newProvider is se ...

In Safari, the scrollbar appears on top of any overlays, popups, and modals

On my webpage, I have a div with the CSS property overflow-y: scroll. The page also features several popup modals and overlays. Strangely, the scrollbar of the div appears on top of these overlays instead of behind them. I attempted to resolve this issue b ...

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

Determine whether the browser is being used on an Android or iOS device

Is there a dependable method to alter buttons and text on a mobile site based on whether the user is using an Android or iOS browser? ...

Is it possible for JavaScript code to access a file input from the terminal?

When I run the command cat input.txt | node prog.js >result.txt in my terminal, I need to use an input file. This is my code: var fs = require('fs'); var str = fs.readFileSync('input.txt', 'utf8'); str.replace(/^\s* ...

Rerendering of a React component occurs upon a change in its state

Previously, my form was functioning flawlessly. However, after making a few modifications to the state variables, the input field now loses focus upon a state change. I am utilizing MUI and everything was working perfectly until this sudden issue arose f ...

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

Imagine a scenario where, as soon as you enter your credit card number, the form automatically undergoes a change without requiring a button click, similar to how a credit card logo pops up. The form detects changes instantly after the input field has be ...

An issue with flickering in JavaScript tooltips on HTML5 canvas

I have encountered an issue with canvas tooltip in HTML5. Although everything appears to be functioning smoothly, when I calculate the canvas tooltip's position near the top right corner of the canvas (to ensure it remains within the canvas boundarie ...

Using ASP.NET MVC, pass a list of values separated by commas to an action method

Hey there, I'm facing an issue with an ajax call where I am trying to retrieve values from an html select multiple tag. The problem arises when I attempt to pass these values into my controller as I keep getting a null reference error in my controller ...

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

Run a function after all xmlHttpRequests have finished executing

OVERVIEW My website relies on an API to fetch data, making multiple post and get requests to a server upon opening. While we know how long each individual call takes, determining the total time for all calls to complete is challenging. SCENARIO For inst ...

display the values of the array object within the ajax success callback

When I receive the result, it looks like this https://i.sstatic.net/q4iUb.png But now I want to display that content inside a dropdown box with option values. How can we accomplish that? My current approach is as follows: var data = data.user_contacts ...

Having trouble with the dropdown onclick event not triggering when an item is selected in React?

I am having an issue where the onclick event handler is not being called when a dropdown item is selected. In my code, I am generating a dropdown inside a loop in the componentDidMount() lifecycle method. I am passing an event handler function named "show ...