Secure the data from a distant server by utilizing XMLHttpRequest

While I have come across a few similar threads, my problem still feels unique to me, so I am hoping for some assistance.

What I am trying to achieve is using a proxy to bypass the same origin policy and retrieve values that change over time, which need to be checked periodically and stored in variables that can be modified.

There is a server with a data file called data.asp that looks something like this and gets updated periodically:

{ "Title":"Tile of song" ,"Artist":"The artist" ,"Album":"The album" ,"CDCover":"/covers/randomcover.jpg" }

I have attempted a method similar to the one outlined on . In case you prefer not to visit the link, I have included the data here as well.

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","http://www.qnimate.com/ajaxdata.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

As for the proxy file:

<?php
   echo file_get_contents('http://www.qscutter.com/ajaxdata.txt');
?>

My goal is to store the retrieved data in variables that can be updated, rather than displaying it in a div using innerHTML. I would also like to periodically check for any changes in the data.

Any suggestions on how to achieve this?

It's worth mentioning that I have permission from the server owner to access and use the data, but I am unable to add scripts to their server, hence the attempt to bypass the same origin policy using a proxy.

Answer №1

Are you fetching information in JSON format?

{ "Title":"Title of the song" ,"Artist":"The artist" ,"Album":"The album" ,"CDCover":"/covers/randomcover.jpg" }

To store this data in a variable, you will require the use of JSON.parse.

Here's an example:

var data = JSON.parse(xmlhttp.responseText);

After parsing the data, the object data will include properties such as title, artist, album, and CDcover.

You can then proceed to make changes to the object

data['title'] = "I'll Be There This Christmas";
data['artist'] = "Gary Fomdeck";
//and so on.

Be sure to familiarize yourself with the basics of JSON.

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

Managing state in React using a nested object structure with React hooks for adding or updating entries

In my React application, I have a state object that represents a book structure consisting of books, chapters, sections, and items: const book = { id: "123", name: "book1", chapters: [ { id: "123", name: "chapter1", sections: [ ...

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

Order of AngularJS $q service response with error management

I am facing an issue with my function that handles asynchronous calls using promises in a sequence within a for loop. The problem is that the loop breaks when an exception occurs, but I need it to continue even after an exception is thrown. Here is my asy ...

The upcoming tick override feature will execute the specified function

I am looking to replace the code below The function will run in the following tick req.nextTick = typeof setTimeout !== 'undefined' ? function (fn) { setTimeout(fn, 5); } : function (fn) { fn(); }; with this new code, window.require.nextT ...

What techniques can be used to resize an image to perfectly fit a square on a webpage?

A challenge on the web page is to display images in a square format of 90 * 90 pixels. However, the sizes of these images are not consistent and may vary from 80*100 to 100*80 or even 90 * 110. The requested solution is to stretch the image as follows: ...

Enhanced File Upload Experience with MVC Pop-up Feature

I need to import some XML files into my MVC application. To do this, I want to create a popup window that allows me to upload the file. Below is the code I have written. In the controller, I can see the uploaded file. Upload.cshtml: @using (@Html.BeginFo ...

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS

I have a complex dynamic object and I need to extract all keys in a nested ul li format using AngularJS. The object looks like this: [{"key":"campaign_1","values":[{"key":"Furniture","values":[{"key":"Gene Hale","values":[{}],"rowLevel":2},{"key":"Ruben A ...

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

I'm struggling to grasp touch events, as nothing seems to be working for me. For testing purposes, I've created a very basic page: HTML: <div id="TOUCHME"> TOUCH ME </div> <div id="OUTPUT"></div> Jav ...

Why do I keep receiving the unprocessed JSON object instead of the expected partial view output?

Upon submitting my form, instead of displaying the testing alerts I have set up, the page is redirected to a new window where the raw JSON object is shown. My assumption is that this occurrence is related to returning a JSON result from the controller. How ...

Having trouble loading items into the dropdown menu

Having trouble getting my drop down list to populate. I'm trying to retrieve data from a service class function. Currently, I am utilizing Ajax calls, a Servlet, and HTML for this task. If you have any examples that involve using a Servlet class, Aj ...

Is it possible to use Javascript to query the neo4j database?

After creating a geohash neo4j database for NYC Taxi data, the next step is to visualize it on a map. I decided to use Leaflet as a JavaScript library. Using static data, I was able to plot geohash data in Leaflet: https://i.sstatic.net/AtQKZ.jpg Now, my ...

SquirrelFish appears to be lacking "bind()", so how can one attach a JS callback to "this" in its absence?

Does anyone know a way to attach a JS callback to "this" without using "bind()"? Based on Samsung specifications: In 2013 with V8: everything functions as expected (refer to linked screenshot, too large to include here) In 2012 with SquirrelFish: encoun ...

The validation for decimal numbers fails to function when considering the length

I've been struggling to come up with a regular expression for validating decimal numbers of a specific length. So far, I've tried using pattern="[0-9]){1,2}(\.){1}([0-9]){2}", but this only works for numbers like 12.12. What I'm aimin ...

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

What's the best way to align divs vertically in a compact layout?

Update The reason I require this specific behavior is to ensure that all my content remains in chronological order, both on the web page and in the HTML structure. This way, even if the layout collapses into a single column on smaller screens, the content ...

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

I find myself in a state of confusion when it comes to distinguishing between what is considered client-side and server-side. Currently, as I develop a website using Pug for my HTML pages without any external files being loaded into the client's brows ...

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

Implementing dynamic component rendering and iterating through a list in React JS based on state changes

Trying out React JS for the first time and encountering a couple of issues. 1) Attempting to display a table from a different class upon clicking the show button. However, even when the state is true for showing the table, it doesn't appear. 2) In t ...

Having trouble retrieving the data from the second child object in an object returned by an API call in a

Having trouble accessing the second child object of an object generated by an API response. The weather API in question can be found at . Refer to Display.js for a detailed explanation. App.js import React,{useState} from 'react'; import Navbar ...

Triggering on multiple clicks - MULTIPLE CLICKS

I'm currently in the process of developing a website and I have a specific requirement where I need an image to change on click to another image, and then to a third image on the second click, and so forth. I've managed to create a JavaScript fu ...