I encountered an issue where I was unable to execute an Ajax call on the Chrome browser while working with

My files are located in the C:/xampp/htdocs directory.

I am trying to call:

{"name":"john", "age":19.4}

file from:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ajax_json() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "jsp.js", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function () {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            var results = document.getElementById("results");
            results.innerHtml = data.name;
        }
    }
    hr.send(null);
    results.innerHTML = "requesting...";
}

</script>
</head>
<body>
<div id="results"></div>
<script type="text/javascript">ajax_json();</script>
</body>
</html>

file.

When I click on the HTML file, it just writes "requesting..." but does not call the AJAX. I have double-checked my codes multiple times as I followed a tutorial and others who watched the same tutorial were able to achieve it. Where could I be going wrong each time? Should I save my files somewhere else or with different extensions (.html, .js)?

Answer №1

output.textContent = data.title; instead of output.innerText = data.title; Remember, JavaScript is case-sensitive.

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

Navigating THREE.js Editor: Leveraging the main script within a sample illustration

One of the tools I can utilize is the THREE.js editor found at . Opening an example app like PONG is also possible. Interactive animation can be activated by clicking on Play in the menu bar, and deactivated by clicking on Stop. My goal is to edit the Mai ...

Objects shifting position as the browser window is resized or zoomed

I've scoured through numerous examples, but none seem to work for my specific situation. On my webpage, I have multiple tables nested within a <div>, which serves as a background element (as it doesn't cover the entire screen). However, whe ...

Struggling to iterate through the response.data as intended

Assume that the response.data I have is: { "data": { "person1": [ { "name": .... "age": xx } ], "person2": [ { ...

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

Formatting is lost in X.PagedList following an AJAX request

After referencing the UnobtrusiveAjax example here, I decided to incorporate some Bootstrap CSS into my project. Everything seemed to be working smoothly, until I encountered a problem with the pager functionality. The updated page lost all formatting and ...

Leveraging Selenium for extracting data from a webpage containing JavaScript

I am trying to extract data from a Google Scholar page that has a 'show more' button. After researching, I found out that this page is not in HTML format but rather in JavaScript. There are different methods to scrape such pages and I attempted t ...

Error: The function .join is not recognized by the sockets.io library in a Node.js client-server environment

I'm currently working on developing a chat app using node and vue js, and I've encountered an issue with the socket.io library. Specifically, I keep receiving an error stating that ".join is not a function" when trying to use it in my server-side ...

Is there a way to insert a row into a datatable without needing to perform an Ajax reload or using the

When using row.add(…) on a datatable, I encounter an issue where it refreshes via an ajax call when draw() is activated. This leads to the new row not being visible because the data is reloaded from the database. The UX flow behind this scenario is as f ...

When I click the login button, a .ttf file is being downloaded to my computer

I have encountered an issue with my web application where custom font files in .ttf, .eot, and .otf formats are being downloaded to users' local machines when they try to log in as newly registered users. Despite attempting various solutions, I have b ...

Is it possible to capture every ajax request?

My goal is to intercept all AJAX calls and check for specific error codes (ACCESS_DENIED, SYSTEM_ERROR, NOT_FOUND) in the response JSON sent from my PHP script. One approach I've seen is: $('.log').ajaxSuccess(function(e, xhr, settings) { ...

Displaying file when JQuery dialog is opened

I am utilizing a JQuery dialog to load a partial view within it. $("#WOdialog").dialog({ width: 765, resizable: false, closeOnEscape: true, modal: true, clos ...

What is preventing me from integrating angular-cookies into my application?

I'm struggling to resolve this issue where I can't seem to make it work. My aim is to integrate NgCookies (angular-cookies) into my application, but all I'm encountering are errors. This is what I currently have: JS files being included: ...

Getting the length of child elements in Angular using ngFor loop

Can anyone help me figure out how to check the length of a child element in my Angular *ngFor loop? I am fetching data from a real-time firebase database. What am I doing wrong? Here is the code snippet I am using: <div *ngFor="let event of events"> ...

Guide on implementing a progress bar for file uploads with JavaScript and AJAX request

I am looking to implement a progress bar in my file uploader. Below is the ajax call I have set up for both file upload and progress tracking. $(function() { $('button[type=button]').click(function(e) { e.preventDefault(); ...

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

Inform parent component about changes in child input using Angular

In my current setup, I have a parent component that holds a data object. This data object is passed down to two child components, all of which have an onpush strategy. Each child component contains a form that updates specific properties in the data object ...

JavaScript bug with URL encoding in Internet Explorer 11

I am encountering an issue with Internet Explorer 11 (IE 11) when attempting to call a JavaScript URL function. The problem lies with the URL parameter value, which is in Unicode format but the result displays as ????? instead of Unicode characters. Belo ...

"Rails Ajax spinner functions properly in the development environment, but encounters issues in the

I am currently implementing this JavaScript code: verify_link.js ... a=$(this).parent(); a.html('<img src="assets/ajax-loader.gif">'); ... The image file is located in app/assets/images/ajax-loader.gif Everything works fine in de ...

Extracting information from a JSON file using React.js

I have a JSON file named data.json in my React.js project: [{"id": 1,"title": "Child Bride"}, {"id": 2, "title": "Last Time I Committed Suicide, The"}, {"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"}, {"id": 4, ...

Having difficulty managing asynchronous Node JS API requests

I'm a beginner in Node.js and I've taken on a project that involves querying both the Factual API and Google Maps API. As I put together code from various sources, it's starting to get messy with callbacks. Currently, I'm facing an issu ...