Is it possible to retrieve specific elements from another html file using AJAX?

Question

Is it possible to retrieve specific elements from another html file using AJAX?

Looking to use vanilla JS for loading content dynamically without needing a page refresh. The goal is to retrieve content from another HTML file when a menu option is selected, while targeting either the body or a specific class.

Is it possible to achieve this without relying on jQuery?

Thank you in advance!

var AJAX = function(page){

  var request = new XMLHttpRequest();

  request.open("GET", page);

  request.send();

  request.addEventListener("load", function(response){
    console.log(response.target.responseText); // Currently displaying all HTML as text, but desire to extract either the body or a particular class and utilize it within an innerHTML method.
  });
}

javascript ajax

Answer 1

Answer №1

Working with XMLHttpRequest makes handling responses easy - by setting the responseType to document, you can access the response document through the .response property of the instantiated XMLHttpRequest. This allows you to apply standard DOM methods on it. To illustrate, the code snippet below demonstrates how to retrieve and display the text content of the first element with a class name of foo from the response document:

function fetchData(url){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'document';
  xhr.onload = function () {
    if (xhr.readyState !== 4 || xhr.status !== 200) return;
    
    // Handle error statuses
    
    // Accessing the response as a document
    const documentResponse = xhr.response;
    console.log(documentResponse.querySelector('.foo').textContent);
  };
  xhr.send();
}

If utilizing the more contemporary fetch method, you will need to explicitly convert the response text into a document, which can be achieved using DOMParser. Here's an example:

function fetchData(url){
  fetch(url)
    .then(response => response.text())
    .then((text) => {
      const documentParsed = new DOMParser().parseFromString(text, 'text/html')
      console.log(documentParsed.querySelector('.foo').textContent);
    });
}

An appealing feature of DOMParser is its versatility in converting any valid HTML string into a document.

Answer 2

Working with XMLHttpRequest makes handling responses easy - by setting the responseType to document, you can access the response document through the .response property of the instantiated XMLHttpRequest. This allows you to apply standard DOM methods on it. To illustrate, the code snippet below demonstrates how to retrieve and display the text content of the first element with a class name of foo from the response document:

function fetchData(url){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'document';
  xhr.onload = function () {
    if (xhr.readyState !== 4 || xhr.status !== 200) return;
    
    // Handle error statuses
    
    // Accessing the response as a document
    const documentResponse = xhr.response;
    console.log(documentResponse.querySelector('.foo').textContent);
  };
  xhr.send();
}

If utilizing the more contemporary fetch method, you will need to explicitly convert the response text into a document, which can be achieved using DOMParser. Here's an example:

function fetchData(url){
  fetch(url)
    .then(response => response.text())
    .then((text) => {
      const documentParsed = new DOMParser().parseFromString(text, 'text/html')
      console.log(documentParsed.querySelector('.foo').textContent);
    });
}

An appealing feature of DOMParser is its versatility in converting any valid HTML string into a document.

Answer 3

Answer №2

There are two ways to accomplish this:

Hide the content in a div and then access it through DOM manipulation.
Parse the response as XML and interact with the tags.

Method 1:

ajaxRequest.onreadystatechange = function() {

           if(ajaxRequest.readyState == 4) {
              var ajaxDisplay = document.getElementById('ajaxDiv');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
           }
        }

For Method 2, this resource may be useful:

Answer 4

There are two ways to accomplish this:

Hide the content in a div and then access it through DOM manipulation.
Parse the response as XML and interact with the tags.

Method 1:

ajaxRequest.onreadystatechange = function() {

           if(ajaxRequest.readyState == 4) {
              var ajaxDisplay = document.getElementById('ajaxDiv');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
           }
        }

For Method 2, this resource may be useful:

Is it possible to retrieve specific elements from another html file using AJAX?

Answer №1

Answer №2

Similar questions

What is the method for accessing the req, res objects within the callback functions?

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

Wcf Service does not define Angular JS methods

Issue with Jquery modal not functioning properly on second attempt

Troubleshooting issue with JavaScript sorting function failing to arrange elements in ascending

What is the correct location to define the "env" setting in the eslint.config.js file?

What is the procedure for turning off hover color on an href element?

Is using debounce with $scope.$apply a logical choice?

The observable did not trigger the next() callback

Prevent scrolling on browser resize event

Creating a unique styleset in styled-jsx using custom ruleset generation

What is the best way to sort and organize JSON data?

When refreshing, the useEffect async function will not execute

JQuery syntax for adding a comma before the first element in an array

Is the Utilization of Inline JavaScript in HTML Attributes by Angular considered a "good practice"?

No output is displayed in the absence of errors. The program is functioning correctly

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

Is there a way to expand the clickable area of JQuery sliders?

Button click event not triggering JavaScript execution

Tips for uploading numerous images to Firebase using React Native Fetch Blob