norfipc.com
Apuntes   Mapa del sitio   Últimas publicaciones

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


Ejemplo del uso de AJAX para agregar elementos a un artículo, sin tener que recargar la página desde el servidor.
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.


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.




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

✓ JQuery, ejemplos prácticos para usar en páginas web
✓ JQuery, todos los selectores, eventos, métodos y funciones
✓ Librerías JavaScript, usos, diferencias y donde cargarlas
✔ Como insertar contenido de sitios externos con PHP
✔ Cargar imágenes desde sitios HTTP no seguros y mostrar con HTTPS
✔ Cargar con JavaScript librerías y archivos externos solo a petición



Comparte



Inicio | Mapa del sitio | Buscar | Sobre mí

NorfiPC, Copyright © 2022 NorfiPC

SUBIR