Obtener datos de URL en JavaScript

En este artículo, aprenderemos y usaremos varias funciones de JavaScript útiles para cargar datos desde la URL a nuestra página web y realizar más operaciones con esos datos en consecuencia.

Obtener datos de URL en JavaScript

Hay múltiples funciones integradas y externas en JavaScript para cargar datos mediante URL. Esa URL invoca una solicitud de API para una función creada en el lado del servidor y devuelve los datos para responder a la solicitud.

Podemos enviar una solicitud con un tipo de método diferente, pero en este artículo, discutiremos el método GET, que se usa principalmente para obtener datos del lado del servidor al lado del cliente. Hay varias formas de realizar una solicitud GET en JavaScript que se enumeran a continuación.

1. Método Fetch
2. Solicitud HTTP HTTP

Método fetch()

El método fetch() es una forma avanzada de realizar una solicitud de red en JavaScript, y los navegadores más recientes lo admiten. Podemos usar el método fetch() para cargar datos desde el servidor enviando una solicitud al servidor sin actualizar la página web.

Podemos usar el método async await con una solicitud fetch ​​para hacer una promesa de forma compacta. En todos los navegadores avanzados, las funciones Async son compatibles.

Sintaxis básica:

let requestRsponse = fetch(url, [params])

<script>
async function funcRequest(url){
 await fetch(url)
    .then((response) => {
      return response.json(); // data into json
    })
    .then((data) => {
      // Here we can use the response Data
    }).
    .catch(function(error) {
      console.log(error);
    });
}
   const url = 'URL of file';
   funcRequest(url);

</script>

En la fuente de JavaScript anterior, hemos declarado la función async await funcRequest(), que obtendrá URL como argumento y usamos el método fetch ​​con la palabra clave await y la función de devolución de llamada definida then() y traducir la respuesta en datos JSON.

Hemos utilizado el método catch con console.log() si se produce algún error para que muestre el error en los registros. Finalmente, guardamos la URL y la pasamos a funcRequest(url);.

Solicitud HTTP XML

Es una API en forma de objeto que transfiere datos entre un navegador web y un servidor web. XMLHttpRequest se utiliza principalmente en la programación AJAX (JavaScript asíncrono y XML).

No es un lenguaje de programación, pero AJAX es un conjunto de técnicas de desarrollo web que utilizan varias tecnologías web para desarrollar aplicaciones web asíncronas en el lado del cliente.

Sintaxis básica con GET:

<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {

 // Here, we can use the response Data

}
my_variable.open("GET", "MY_FILE_URL");

my_variable.send();

</script>

En la fuente de JavaScript anterior, creamos el objeto XMLHttpRequest y luego definimos la función de devolución de llamada durante la carga de una solicitud. Hemos utilizado la función open, pasamos el tipo de método de solicitud y la URL como argumento, y llamamos al método send() de XMLHttpRequest().