Retrieve Content from a Different Web Page Using Ajax

I recently received permission from another website to pull their RSS feeds, and now I'm trying to figure out what to write in TAG1 and TAG2. This is the specific issue I'm facing: Here is the HTML code (it's an ajaxed page)

<!doctype html>
<html lang="hu">
<head>
    <title>Videók</title>
    <meta charset="utf-8"/>
        <script type="text/javascript" src="../js/videok.js"></script>
</head>
<body>
    <h2><a href="#" style="font-size:15pt; color:#ff00e8; text-decoration: none;">Van  egy  jó  videód? Töltsd fel és kikerülhet az oldalra!</a></h2>
        <div id="videok"></div>
</body>        
</html>

And this is the JavaScript code for pulling the data:

window.onload = initAll;
var xhr = false;
var dataArray = new Array();
var url = "choose url";

function initAll() {

if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}
else {
    if (window.ActiveXObject) {
        try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) { }
    }
}

if (xhr) {
    xhr.onreadystatechange = setDataArray;
    xhr.open("GET", url, true);
    xhr.send(null);
}
else {
    alert("couldn't create XMLHttpRequest");
}
}

function setDataArray() {
var tag1 = "subject1";
var tag2 = "subject2";

if (xhr.readyState == 4) {
    if (xhr.status == 200) {
        if (xhr.responseXML) {

            var allData = xhr.responseXML.getElementsByTagName(tag1);
            for (var i=0; i<allData.length; i++) {
                dataArray[i] = allData[i].getElementsByTagName(tag2)[0].firstChild.nodeValue;
            }
        }
    }
    else {
        alert("the request failed" + xhr.status);
    }
}
}

Answer №1

In attempting to extract data from another web page using JavaScript, you may encounter limitations due to the browser's sandboxing of JavaScript. This means that JavaScript is restricted to sending requests only within the same domain it originated from, following the 'same origin policy'.

To overcome this restriction, one approach is to utilize a server-side language like PHP to fetch the desired data and then transmit it to JavaScript through AJAX.

From the code snippet provided, it appears to be a basic AJAX call. However, please note that it might not function as expected when trying to retrieve an RSS feed from a source outside your own website.

Answer №2

To ensure proper data formatting, it is recommended that the server side of your application handles fetching the xml data and organizing it according to your specifications.

By sending an Ajax request to your server's endpoint, you can have the server retrieve the xml data, format it appropriately, and then send back the requested data in the desired format.

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

How can I create a clickable <div> element containing multiple links and trigger only one action?

Within my code, there is a <div> element that has been made clickable. Upon clicking this <div>, the height and text expand using the jQuery function $(div).animate();. While this functionality works as intended, I am encountering a slight issu ...

Display the child component exclusively after the data has been successfully loaded

Within my parent component, I have the following structure: <v-container fluid> <ResultsPanel ref="results" /> </v-container> The ResultsPanel component consists of: <template v-if="showResults"> <v-container > IM SHOW ...

Trouble with sending data from $.ajax to my demo.php file

I'm having an issue with sending data to the demo.php file using my code. This is the code I am working with: <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script> function update(str) { var str2=s ...

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

The web application I am currently working on was developed approximately 10 years ago and is only compatible with Internet Explorer. My goal is to make it functional in Chrome as well. I am facing a challenge regarding the "text" property of IXMLDOMEleme ...

What is the best way to refresh my Material-UI checkboxes following updates to certain states in a React JS environment?

One of my latest projects involves an application that visualizes graphs, with all nodes originally colored blue. I included a component in the form of a checkbox that users can interact with to trigger a state change. This change dynamically alters the co ...

Finding your way to a particular section within a webpage through an external source

Hey there! I'm currently working on creating a link that will direct users to a specific section within my webpage. For example, redirecting them to https://blabla.github.io/my-website. My code is quite straightforward and it functions properly when ...

JSON.Parse allows for graceful degradation of data when handling JSON objects in JavaScript

What should be done if a browser does not support JSON.parse? Would it be appropriate to include json.js and use parseJSON instead? Here's an example of how the code could look: var output; if (JSON.parse) output = JSON.parse(data); else ou ...

Troubleshooting issues with ember-data's belongsTo relationship

I am facing an issue with the model I have: Whenever I make a call to this.store.find('history'); A request is sent to http:://www.example.com/api/histories/ and I receive the following JSON response: { "tracks":[ { "id":83, ...

The order in which JavaScript files are loaded is critical, especially when dealing with external

After experiencing issues with my script not working because it was loaded before jQuery by the client (a necessity), I am seeking a solution. My challenge lies in ensuring that my code waits for jQuery to load before execution, especially when dealing wi ...

Updating a data with a JavaScript browser script

Recently, I have been attempting to modify the timer in a game using scripts found on various websites. My coding skills are not top-notch, so I am seeking some assistance. I am keeping my fingers crossed that the timer is not server-sided. Upon inspecting ...

Guidelines for passing a value to a method within a method using JavaScript

I am currently exploring how jQuery can be used to select an element, retrieve an attribute, and assign it a new value. While I have successfully managed to select the element and extract the attribute, I am facing difficulty in setting the attribute using ...

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...

Getting a JWT token from Express to Angular using ngResource: A step-by-step guide

Currently, I am utilizing a jwt token for user registration validation. A unique URL is generated and sent to the user via email, which leads them to the authentication page. On the server side, the token is decoded and I need to transmit this JSON data to ...

Guide on receiving application/csp-report as json in an express application utilizing bodyParser

I am currently working on creating a middleware that can receive CSP reports from browsers. Browsers send these reports with the Content-Type of application/csp-report, and the data is in JSON format. Right now, I'm using bodyParser.text to handle thi ...

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

I've been in the process of updating my highcharts to the latest version, but I've hit a roadblock. Specifically, I have a bar chart set up with the following configuration: { chart: { type: 'bar', ...

Exploring the implementation of Javascript, HTML, PHP, and Ajax in programming

<div class="navigation"> <a class="prev" href="index.php?month=__prev_month__" onclick="$('#calendar').load('index.php?month=__prev_month__&_r=' + Math.random()); return false;"></a> <!-- <div class="title" & ...

The Intex XDK is experiencing difficulties with establishing an Ajax connection

Encountering an issue with connecting to a php page through Ajax on my phone. I've simplified the process as much as possible. Here is the server-side code: <?php echo(json_encode('success')); ?> And here is the client-side code: ...

Steps for attaching an onclick event to a dynamically created div

I'm trying to figure out how to set up an onclick event for dynamically generated div elements in my HTML file. Each of these divs has a unique id. How can I use the id to add the onclick behavior? This is the code I have for generating the divs: fu ...

Empty object being received by ASP.NET MVC action in Ajax POST request

I have a form that looks like this: @model CupCakeUI.Models.CupCakeEditViewModel @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "createFrm" })) { <div class="form-group"> <div class="editor-label"> @Html ...