Actualizar datos en una página sin actualizar
Tengo un sitio web donde necesito actualizar un estado. Al igual que en un vuelo, estás saliendo, navegando o aterrizando. Quiero poder actualizar el estado sin que mis espectadores tengan que recargar toda la página. Sé que hay una manera de hacerlo con AJAX y jQuery, pero no entiendo cómo funciona. Tampoco quiero que tengan y hagan clic en un botón. Si alguien sabe cómo se haría eso, ¡se lo agradezco mucho!
Esto normalmente se logra con una técnica llamada AJAX (abreviatura de " Javascript y XML asincrónicos "). Esta técnica carga datos (usando formato XML) de forma asincrónica (en segundo plano) para que pueda actualizar su contenido sin necesidad de recargar la página (usando Javascript).
La forma más sencilla de implementar AJAX es con el método jQueryload() . Este método proporciona una forma sencilla de cargar datos de forma asincrónica desde un servidor web y colocar el HTML devuelto en el elemento seleccionado. La sintaxis básica de este método es: $(selector).load(url, data, complete);donde los argumentos son:
selectorel elemento HTML existente en el que desea cargar los datosurluna cadena que contiene la URL a la que se envía la solicituddata(opcional) un objeto simple o una cadena que se envía al servidor con la solicitudcomplete(opcional) una función de devolución de llamada que se ejecuta cuando se completa la solicitud
El parámetro de URL requerido especifica la URL del archivo que desea cargar. El parámetro de datos opcional le permite especificar datos (es decir, pares clave/valor) que se envían al servidor web junto con la solicitud. El parámetro completo opcional se puede utilizar para hacer referencia a una función de devolución de llamada. La devolución de llamada se activa una vez para cada elemento seleccionado.
Una visualización:
Un ejemplo simple de uso load(), donde cargamos datos dinámicamente cuando se presiona un botón:
Usando jQuery
$(function() {
// optional: don't cache ajax to force the content to be fresh
$.ajaxSetup({
cache: false
});
// specify the server/url you want to load data from
var url = "https://baconipsum.com/api/?type=meat-and-filler";
// on click, load the data dynamically into the #demo div
// while loading, show three dots (…)
$("#button").click(function() {
$("#demo").html("…").load(url);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>Use jQuery load() to change this text</h1>
<button id="button" type="button">Change Content</button>
</div>
</body>
</html>Si no desea utilizar la biblioteca jQuery, también puede utilizar Javascript simple. Cargar contenido es un poco más difícil de esa manera. Aquí hay un ejemplo de cómo hacerlo solo con Javascript:
Usando Javascript simple
function loadContent(url) {
const xhttp = new XMLHttpRequest();
xhttp.open("GET", url);
xhttp.send();
xhttp.onreadystatechange = (e) => {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>Use a XMLHttpRequest to change this text</h1>
<button type="button" onclick="loadContent('https://baconipsum.com/api/?type=meat-and-filler')">Change Content</button>
</div>
</body>
</html>Para obtener más información sobre AJAX, puede consultar https://www.w3schools.com/xml/ajax_intro.asp
Supongamos que desea mostrar algún contenido de transmisión en vivo (por ejemplo, livefeed.txt ) en su página web sin necesidad de actualizar la página, entonces el siguiente ejemplo simplificado es para usted.
En el siguiente archivo html , los datos en vivo se actualizan en el elemento div de id "liveData"
índice.html
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<script type="text/javascript" src="autoUpdate.js"></script>
</head>
<div id="liveData">
<p>Loading Data...</p>
</div>
</body>
</html>
A continuación, autoUpdate.js lee los datos en vivo utilizando el objeto XMLHttpRequest y actualiza el elemento html div cada segundo. He dado comentarios sobre la mayor parte del código para una mejor comprensión.
actualización automática.js
window.addEventListener('load', function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
// Create a new XMLHttpRequest object
xhr = new XMLHttpRequest();
}
return xhr;
};
updateLiveData = function()
{
var now = new Date();
// Date string is appended as a query with live data
// for not to use the cached version
var url = 'livefeed.txt?' + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandler;
// asynchronous requests
xhr.open("GET", url, true);
// Send the request over the network
xhr.send(null);
};
updateLiveData();
function evenHandler()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('liveData');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 1 sec
setTimeout(updateLiveData(), 1000);
}
}
});
Para fines de prueba: simplemente escriba algo en livefeed.txt; se actualizará de la misma manera en index.html sin ninguna actualización.
transmisión en vivo.txt
Hello
World
blah..
blah..
Nota: Debe ejecutar el código anterior en el servidor web (por ejemplo, http://localhost:1234/index.html), no como un archivo html de cliente (por ejemplo, file:///C:/index.html).
