Insertar contenido de otra página con AJAX, JavaScript y JQuery

Cargar elementos desde otra página con AJAX

Dos ejemplos del uso de AJAX con JQuery para insertar dinámicamente contenido en esta página, sin tener que recargarla.
Al presionar el primer botón se inserta un pequeño archivo de este mismo dominio, que solo contiene un encabezado h2 en HTML.
Insertar texto

Al presionar el segundo botón se inserta otro archivo que contiene un iframe o marco, en el que se carga la página de https://code.jquery.com/, en la que se puede comprobar las últimas versiones de esta librería.
Insertar iframe

Código empleado

HTML
<button id="boton">Insertar iframe</button>
<div id="a-content"></div>

JAVASCRIPT
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('#boton').on('click', function() {
  $('#a-content').load('https://norfipc.com/include/ajax');
  $('#boton').hide();
})
</script>

ARCHIVO AUXILIAR
<iframe src="https://code.jquery.com/?output=embed" height="500" allowfullscreen></iframe>

Sobre AJAX

AJAX, son las iniciales de Asynchronous JavaScript And XML (JavaScript asíncrono y XML).
Es una técnica que permite ejecutar aplicaciones y cargar elementos en el navegador web, mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.
De esta forma realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.
A pesar de ser de mucha utilidad tiene la desventaja que solo se puede usar en el mismo dominio (medida de seguridad), a no ser que en el dominio secundario se pueda habilitar CORS (Cross-Origin Resource Sharing).
En los ejemplos en esta página, los datos se cargan desde este mismo dominio.

Páginas relacionadas



Comparte

Me Gusta Tuitear