En este artículo, veremos los parámetros que se utilizan en el método jQuery Ajax junto con la comprensión de sus implementaciones a través de las ilustraciones.
El método ajax() en jQuery se usa para realizar una solicitud AJAX o una solicitud HTTP asíncrona. En general, el método ajax() se usa en todos los métodos jQuery AJAX requeridos, que se usan principalmente para requests y que no usan los otros métodos.
Sintaxis:
$.ajax({name:value, name:value, ... })
Valores de los parámetros: La lista de valores posibles se proporciona a continuación:
- tipo: Se utiliza para especificar el tipo de solicitud.
- url: Se utiliza para especificar la URL a la que enviar la solicitud.
- nombre de usuario: se utiliza para especificar un nombre de usuario que se utilizará en una solicitud de autenticación de acceso HTTP.
- xhr: Se utiliza para crear el objeto XMLHttpRequest.
- async: su valor predeterminado es verdadero. Indica si la solicitud debe manejarse de forma asíncrona o no.
- beforeSend(xhr): Es una función que debe ejecutarse antes de enviar la solicitud.
- dataType: el tipo de datos esperado de la respuesta del servidor.
- error(xhr, status, error): Se utiliza para ejecutarse si la solicitud falla.
- global: Su valor por defecto es verdadero. Se utiliza para especificar si se activan o no los identificadores de eventos AJAX globales para la solicitud.
- ifModified: Su valor por defecto es falso. Se utiliza para especificar si una solicitud solo tiene éxito si la respuesta ha cambiado desde la última solicitud.
- jsonp: una string que anula la función de devolución de llamada en una solicitud jsonp.
- jsonpCallback: se utiliza para especificar un nombre para la función de devolución de llamada en una solicitud jsonp.
- caché: Su valor por defecto es verdadero. Indica si el navegador debe almacenar en caché las páginas solicitadas.
- complete(xhr, status): Es una función que se ejecutará cuando finalice la solicitud.
- contentType: Su valor por defecto es: “application/x-www-form-urlencoded” y se utiliza cuando se envían datos al servidor.
- contexto: se utiliza para especificar el valor «este» para todas las funciones de devolución de llamada relacionadas con AJAX.
- data: Se utiliza para especificar los datos que se enviarán al servidor.
- dataFilter (datos, tipo): se utiliza para manejar los datos de respuesta sin procesar de XMLHttpRequest.
- contraseña: se utiliza para especificar una contraseña que se utilizará en una solicitud de autenticación de acceso HTTP.
- processData: su valor predeterminado es verdadero. Se utiliza para especificar si los datos enviados con la solicitud deben transformarse o no en una string de consulta.
- scriptCharset: se utiliza para especificar el juego de caracteres para la solicitud.
- éxito (resultado, estado, xhr): se ejecutará cuando la solicitud tenga éxito.
- timeout: Es el tiempo de espera local para la solicitud. Se mide en términos de milisegundos.
- tradicional: Se utiliza para especificar si se utiliza o no el estilo tradicional de serialización de parámetros.
Los diversos parámetros pueden entenderse implementando los siguientes ejemplos. Se dan pocos como referencia, pero el desarrollador puede cambiar el código según la necesidad.
Ejemplo 1: el siguiente código muestra el método ajax() con los parámetros «url» y «contexto» que agrega una clase al cuerpo del documento para cambiar el color de fondo mediante la propiedad CSS background-color . La clase se agrega mediante el método jQuery addClass() . El valor de «url» será el archivo «test.html» proporcionado debajo del código.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<style>
.bgClass {
background-color: grey;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Ajax methods with parameters</h3>
<p>This is document body with paragraph</p>
<script>
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("bgClass");
});
</script>
</body>
</html>
test.html: este archivo se utiliza en el archivo anterior.
<html> <p>hello world</p> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el método ajax() con parámetros de «éxito» y «error». El valor de «url» será el archivo «sample.html» proporcionado debajo del código.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#btnID").click(function () {
$.ajax({
url: "sample.txt",
success: function (output) {
$("#divID").html(output);
},
error: function () {
alert("Ajax error!");
}
});
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>Ajax with parameters</h3>
<div id="divID">
<p id="paraID">
This is paragraph. Ajax is an acronym
for Asynchronous Javascript and XML.<br>
It is used to communicate with the
server without refreshing<br>the web
page and thus increasing the user
experience and better performance.
</p>
</div>
<button id="btnID">
Change the paragraph content
</button>
</body>
</html>
sample.txt: este archivo se utiliza en el archivo anterior.
This is changed paragraph for the HTML document.<br> There are no such pre-requisites required to understand the latter portion of the article.<br> Only the basic knowledge of HTML, CSS, and Javascript are good to go.
Producción:
Ejemplo 3: El siguiente código demuestra el método ajax() con los parámetros del método «contentType», «dataType» y beforeSend() . El valor de «url» será el archivo «url.json» proporcionado debajo del código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery ajax beforeSend() function </title>
<meta charset="utf-8">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>jQuery ajax beforeSend() function</h3>
<button id="buttonID">
Send the request using ajax beforeSend()
</button>
<br>
<p id="paraID" style=""> </p>
<script type="text/javascript">
$(document).ready(function () {
$('#buttonID').click(function () {
// url
var request = $.ajax({
url: 'url.json',
contentType: 'application/json',
dataType: 'json',
beforeSend: function (jqXHR) {
jqXHR.overrideMimeType("application/json");
$('#paraID').append(
'<p><b> The beforeSend() method is called.<b></p>');
}
});
request.success(function (data, status, jqXhr) {
$('#paraID').append('<p><b> The json data : </p></b>');
$('#paraID').append('<p><b> Date :</b> '
+ data.date
+ '</p>');
$('#paraID').append('<p><b> Name :</b> '
+ data.name
+ '</p>');
$('#paraID').append('<p><b> Time: </b>'
+ data.time
+ '</p>');
});
request.error(function (jqXhr, textStatus, errorMessage) {
$('#paraID').append(
'<p><b> The request status:</b> '
+ status
+ '</p>');
$("#paraID").append("The status is : " + textStatus);
});
});
});
</script>
</body>
</html>
url.json: este archivo JSON se usa en el archivo anterior.
{
"date": "07-15-2022",
"name": "Ajax learning",
"time": "11:32:10 AM"
}
Producción:
Ejemplo 4: El siguiente código demuestra el método ajax() con los parámetros «contentType», «dataType» y «jsonpCallback». El valor de «url» será el archivo «urljsonP.json» proporcionado debajo del código. Establezca la propiedad jsonpCallback: ‘JSONPResponse’ donde se menciona «JSONPResponse» en el archivo JSON como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Ajax methods with parameters</h3>
<p>This is document body with paragraph</p>
<script>
$.ajax({
url: "urljsonP.json",
dataType: "jsonp",
type: "POST",
jsonpCallback: 'JSONPResponse',
contentType: "application/json; charset=utf-8",
success: function (result, status, xhr) {
console.log(result);
},
error: function (xhr, status, error) {
console.log("Result: " + status + " "
+ error + " " + xhr.status
+ " " + xhr.statusText)
}
});
</script>
</body>
</html>
urljsonP.json: este archivo JSON se usa en el archivo anterior.
JSONPResponse( {
"id": 1,
"name": "accessory",
"items": [ "book", "pen" ]
})
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA