Ajax significa JavaScript asíncrono y XML. Se utiliza para realizar una comunicación asíncrona con el servidor. Ajax se usa para leer datos del servidor y actualizar la página o enviar datos al servidor sin afectar la página actual del cliente. Ajax es un concepto de programación.
A continuación se muestran algunas formas de hacer una llamada Ajax en JavaScript.
Enfoque 1: en este enfoque, utilizaremos el objeto XMLHttpRequest para realizar una llamada Ajax. El método XMLHttpRequest() que crea el objeto XMLHttpRequest que se utiliza para realizar requests con el servidor.
Sintaxis:
var xhttp = new XMLHttpRequest();
La sintaxis anterior se usa para crear el objeto XMLHttpRequest. Este objeto tiene muchos métodos diferentes que se utilizan para interactuar con el servidor para enviar, recibir o interrumpir respuestas del servidor. En la respuesta, recibimos una string del servidor que imprimimos.
Ejemplo:
Javascript
<script>
function run() {
// Creating Our XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Making our connection
var url = 'https://jsonplaceholder.typicode.com/todos/1';
xhr.open("GET", url, true);
// function execute after request is successful
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}
// Sending our request
xhr.send();
}
run();
</script>
Producción:
"{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}"
Enfoque 2: en este enfoque, usaremos jQuery para realizar una llamada ajax. El método ajax() se usa en jQuery para hacer llamadas ajax. Se utiliza como reemplazo de todos los enfoques que no funcionan para realizar llamadas ajax.
Sintaxis:
$.ajax({arg1: value, arg2: value, ... });
Parámetro: Se necesita un archivo de configuración que configura la URL, tipo, función a llamar cuando recibimos nuestra respuesta o en caso de error, etc.
Ejemplo:
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<script>
function ajaxCall() {
$.ajax({
// Our sample url to make request
url:
'https://jsonplaceholder.typicode.com/todos/1',
// Type of Request
type: "GET",
// Function to call when to
// request is ok
success: function (data) {
var x = JSON.stringify(data);
console.log(x);
},
// Error handling
error: function (error) {
console.log(`Error ${error}`);
}
});
}
ajaxCall();
</script>
</body>
</html>
Producción:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
Enfoque 3: En este enfoque, usaremos la API fetch() que se usa para hacer XMLHttpRequest con el servidor. Debido a su estructura flexible, es fácil de usar. Esta API realiza una solicitud al servidor y obtiene el resultado como una promesa que se resuelve en la string.
Sintaxis:
fetch(url, {config}).then().catch();
Parámetro: Toma la URL y la configuración de la solicitud como parámetros.
Configuraremos los datos requeridos y realizaremos la solicitud al servidor. Dado que es una promesa resuelta, usamos la función then() y la función catch() para crear una salida para el resultado. En respuesta, obtenemos la string que imprimimos.
Ejemplo:
Javascript
<script>
// Url for the request
var url = 'https://jsonplaceholder.typicode.com/todos/1';
// Making our request
fetch(url, { method: 'GET' })
.then(Result => Result.json())
.then(string => {
// Printing our response
console.log(string);
// Printing our field of our response
console.log(`Title of our response : ${string.title}`);
})
.catch(errorMsg => { console.log(errorMsg); });
</script>
Producción:
{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response : delectus aut autem
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA