jQuery | Método ajax()

El método ajax() en jQuery se usa para realizar una solicitud AJAX o una solicitud HTTP asíncrona.

Sintaxis:

$.ajax({name:value, name:value, ... })

Parámetros: La lista de valores posibles se da 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.
  • asíncrono: 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 que se envíe 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 predeterminado 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 predeterminado 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 predeterminado es: «application/x-www-form-urlencoded» y se usa 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.

Ejemplo 1: este ejemplo usa el método ajax() para agregar el contenido de texto usando la solicitud ajax.

<!DOCTYPE html>
<html>
      
<head> 
    <title>
        jQuery ajax() Method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script>
        $(document).ready(function() {
            $("li:parent").css("background-color", "green");
        });
    </script>
</head> 
  
<body style="text-align:center;">
  
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
      
    <h2>
        jQuery ajax() Method
    </h2>
      
    <h3 id="h11"></h3>
      
    <button>Click</button>
      
    <!-- Script to use ajax() method to
        add text content -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $.ajax({url: "geeks.txt", 
                        success: function(result) {
                    $("#h11").html(result);
                }});
            });
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo ilustra el método ajax() en jQuery.

<!DOCTYPE html>
<html>
  
<head> 
    <title>
        jQuery ajax() Method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script>
        $(document).ready(function() {
            $("li:parent").css("background-color", "green");
        });
    </script>
</head> 
  
<body style="text-align:center;">
   
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
      
    <h2>jQuery ajax() Method</h2>
      
    <h3 id="h11"></h3>
      
    <button>Click</button>
      
    <!-- Script to use ajax() method to
        add text content -->
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.ajax({url: "geeks_exp.txt", async: false,
                                success: function(result) {
                    $("h11").html(result);
                }});
            });
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *