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

Encountering a JSON_PARSER_ERROR when trying to call Google FCM using MobileFirstAdapter JS

Directive customization through comprehension expressions

Managing extensive amounts of data with server-side scripting in a Datatable

I find the JSX syntax to be quite perplexing

The e2e Protractor test is unable to identify the Angular component within a complex Angular router with multiple layers

Discover a method to conceal an element within a <div> by monitoring mouseover events in a separate <div> container

What is the abbreviated term for personalized elements in React Native development?

The "else" statement is never being executed

Troubleshooting: Issue with running npm start | React app not loading

What is the process for loading a .x model in Three.js?

Another approach to utilize JavaScript for populating content into a <div> container?

Encountered an error while attempting to insert a new user into a MySQL database using the Node, Express, and MySQL package

Choose the DIV element based on its data attribute using JSON

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

Modifying the content of a paragraph by incorporating information from various sources

Tips on converting a Java regular expression to JavaScript regular expression

Utilize Chrome storage instead of localstorage to generate Parse sessions

Utilize vuex v-model to define the value of an object component

"Scraping tool unable to make successful POST request via ajax, despite successful execution in Postman

Angular's FormGroup for reactive forms is a powerful feature that allows for