Question 69874 in Ajax Question posted in
You can find the official documentation here.

Is There any way to do the same role that the method .load() in jquery does to get part of html page with vanilla Javascript – Jquery ajax

I’m learning Ajax now and I have a problem finding videos or articles that use just javascript to do things that jquery does.
To load apart from an HTML page and put it on the page, using jquery it is just like that :

   $(function () {
      $("#showData").load("pageName.html #whatIWant");
    });

And the Data in #whatIWant will be in element with #showData id.
I can’t figure how to do the same thing with Vanilla Js
thanks for your participation.

NOTE :
If I use the method below, I get all the data from the other page and I want to control the response.

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("test.html")
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((reject) => {
    console.error(reject);
  });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There is another way that I found when seeking answers.

    let dom = new DOMParser();

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("test.html")
  .then((resolve) => {
    let pageHtml = dom.parseFromString(resolve, "text/html");
    let element = pageHtml.querySelector("whatIWant");
    console.log(element);
  })
  .catch((reject) => {
    console.error(reject);
  });

    This Answers and the other one up are both works for me, I hope these answers help someone.


  2. 0

    You can use the built in XMLHttpRequest to fetch an HTML document.

    function fetchElement(url, selector) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      if (!this.responseXML || !this.responseXML.querySelector) reject("No HTML Document found");
      else resolve(this.responseXML.querySelector(selector));
    }
    xhr.open('GET', url);
    xhr.responseType = 'document';
    xhr.send();
  });
}

const myElement = await fetchElement("pageName.html", "#whatIWant");
document.querySelector("#showData").innerHTML = "";
document.querySelector("#showData").appendChild(myElement);

    Alternatively, you can also use the Fetch API to fetch the web page, along with the DOMParser to parse it.

    async function fetchElement(url, selector) {
    const data = await fetch(url).then(res => res.text());
    const parsed = new DOMParser().parseFromString(data, 'text/html');
    return parsed.querySelector(selector);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search