0

Quiero hacer una petición a un servidor, que el mismo me devuelve el html completo. Lo obtengo como un string, pero me gustaria transformarlo a HTML para luego manipular el DOM del mismo.

var URL_PATH = 'https://www.web.com.pe/web/web/web.jsp';
var method = "GET";
var peticion = new XMLHttpRequest();

peticion.open(method, URL_PATH, true);

var promesa = new Promise(function(resolve, reject){
    peticion.addEventListener('readystatechange', function(){
        if(peticion.readyState === 4){
            resolve(peticion);
        }
    })

    peticion.addEventListener('error', function(){
        reject(peticion);
    });
});

peticion.send();

promesa.then(function(request){
    console.log(request.responseText);
    var textHtml = request.responseText;
    var html = document.createElement('html');
    html.innerHTML = textHtml;
    var email = html.getElementById('IdQueQuerioManipular');
}, function(request){
    console.log('rechazo: ', request);
});
2
  • Si no me equivoco, solo te falta un .append(html), para agregarlo a algún lugar de tu DOM.
    – Emeeus
    Commented el 4 sept. 2019 a las 23:51
  • Tienes algún error? Commented el 5 sept. 2019 a las 0:15

1 respuesta 1

1

Como dije en los comentarios, solo falta un .append(html) a algún lugar de tu DOM. Una vez hecho esto, tienes libertad para manipularlo como quieras.

var URL_PATH = 'https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS';
var method = "GET";
var peticion = new XMLHttpRequest();

peticion.open(method, URL_PATH, true);

var promesa = new Promise(function(resolve, reject) {
  peticion.addEventListener('readystatechange', function() {
    if (peticion.readyState === 4) {
      resolve(peticion);
    }
  })

  peticion.addEventListener('error', function() {
    reject(peticion);
  });
});

peticion.send();

promesa.then(function(request) {
  var textHtml = request.responseText;
  var html = document.createElement('html');
  html.innerHTML = textHtml;
  var contenido = document.getElementById('contenido');
  contenido.append(html);// <-- Aqui el append

  //Aquí ya tenemos acceso al DOM que fuimos a buscar
  const titulo = document.getElementsByClassName("document-title")[0].innerText;

  console.log("El título de la página es: " + titulo);

}, function(request) {
  console.log('rechazo: ', request);
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="contenido">
</div>
</div>

Cuidado: La página que estoy consultando (developer.mozilla.org) tiene actualmente un allow origin *, si esto cambia en el futuro va a tirar un error de CORS.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.