¿Qué es el objeto XMLHTTPRequest?

El objeto XMLHTTPRequest es una API que se utiliza para obtener datos del servidor. XMLHTTPRequest se usa básicamente en la programación Ajax. Recupera cualquier tipo de datos como json, xml, texto, etc. Solicita datos en segundo plano y actualiza la página sin recargar la página en el lado del cliente. Se utiliza un objeto de XMLHTTPRequest para la comunicación asíncrona entre el cliente y el servidor. El método $.ajax() se usa para la creación del objeto XMLHTTPRequest.

El $.ajax() realiza los siguientes pasos en segundo plano:

• Enviar datos desde el fondo.
• Recibe los datos del servidor.
• Actualice la página web sin recargar la página.

A continuación veremos cómo crear un objeto XMLHTTPRequest con el método $.ajax(): 

Sintaxis: 

var XHR = $.ajax({configs});

Ejemplo: 

// Example showing how XMLHTTPRequest object created
var XMLO = $.ajax({
 
    // Our sample URL to make the request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
 
    // type of Request
    type: "GET"
});

Ahora veremos el tipo de datos que podemos recuperar del servidor y qué preprocesador tenemos para el tipo de datos respectivo.

Tipo de datos: Estos son los tipos de datos que podemos solicitar al servidor. Los tipos de datos disponibles son texto, xml, html, script, jsonp y json. Sobre la base de este tipo de datos, especificamos el preprocesador de la respuesta antes de enviarla al controlador del objeto XMLHTTPRequest. Los siguientes son el preprocesador para el tipo de datos especificado:

• Texto: si el tipo de datos es texto, no se aplica ningún preprocesador a la respuesta. Se puede acceder a través de la propiedad responseText del objeto XMLHTTPRequest.
• xml: en el caso de XML, el preprocesador jQuery.parseXML se aplica a la respuesta y luego se pasa al controlador como documento xml. Se puede acceder a través de la propiedad responseXML del objeto XMLRequestHTTPRequest.
• html: en el caso del tipo de datos html, no especificamos ningún preprocesador para responder. Se puede acceder a él con la propiedad responseText.
• string: en el caso de una secuencia de comandos, la secuencia de comandos se ejecutará primero y luego se manejará al controlador en forma de string.
• jsonp:  en caso de solicitar jsong, debemos especificar la propiedad jsonpCallback del método $.ajax(). que se ejecutará antes de pasar el objeto json al controlador sucesor.
• json: en el caso de json, la respuesta se analiza en jQuery.parseJSON antes de pasar un objeto al controlador.

Propiedades: el objeto XMLHTTPRequest tiene muchas propiedades de clase útiles que ayudan en el manejo flexible de la respuesta. Las propiedades del objeto XMLHTTPRequest son:

• readyState: esta propiedad indica el estado de la conexión.
• estado: Contiene el código de respuesta http del servidor.
• statusText: contiene la string de respuesta http del servidor.responseText: contiene la respuesta en formato de texto del servidor.
• responseXML: Contiene el Xml de respuesta del servidor.
• getAllResponseHeaders: esta propiedad devuelve el nombre de todos los encabezados como una string.
• getResponseHeader: toma el nombre del encabezado y devuelve el valor de texto del encabezado.
• setReaquestHeader: se utiliza para establecer el valor del encabezado de la solicitud.
• overrideMimeType: esta propiedad se usa para establecer el tipo MIME que se usa para tratar el tipo de datos de respuesta como texto o tipo XML.

Ejemplo:

// Demonstrating Properties of XMLHTTPRequest object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
 
    // type of Request
    type: "GET"
});
 
xmlObj.always(function(a, b, c) {
    console.log(" # Status of request is : ", c.status);
    console.log(" # readyState of request is : ", c.readyState);
    console.log(" # statusText of request is : ", c.statusText);
    console.log(" # All Response Headers of request is : ",
           c.getAllResponseHeaders);
 });
</script>

Producción:

# Status of request is : 200
# readyState of request is : 4
# statusText of request is : success
# All Response Headers of request is : function(){return h?p:null}

A continuación se muestra el ejemplo de algunas propiedades del objeto XMLHTTPRequest:

Métodos: como sabemos, XMLHTTPRequest realiza una comunicación asíncrona y, como resultado, devuelve una promesa. Tenemos muchos métodos de promesa del objeto jQuery XMLHTTPRequest. Los métodos de promesa disponibles son: 

• xmlObject.then(): este método toma dos funciones de devolución de llamada func1, func2 como parámetros. Llamada func1 cuando la promesa se resuelve con éxito. Y func2 es una llamada cuando falla la solicitud.
• xmlObject.always(): este método toma una sola función de devolución de llamada. Este método hace que el controlador llame cuando la solicitud se resuelve o se rechaza. La función de parámetro se llama siempre sin preocuparse por la solicitud.
• xmlObject.then(): este método acepta una sola función de devolución de llamada. Este método será llamado cuando se resuelva nuestra solicitud. La función de parámetro se ejecutará con la resolución de la solicitud.
• xmlObject.fail(): este método acepta una sola función de devolución de llamada. Este método se llama cuando nuestra solicitud es rechazada. después de que se resuelva el reflejo de la función de devolución de llamada de solicitud.

A continuación se muestra el ejemplo de algunos de los métodos del objeto XMLHTTPRequest:

Ejemplo: 

// Example demonstrating methods of XMLHTTPRequest
// object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
     
    // type of Request
    type: "GET",
});
 
xmlObj.then(function(){
    console.log(" #Then is resolved ");
});
 
xmlObj.fail(function(){
    console.log(" #Fail is resolved ");
});
 
xmlObj.always(function(){
    console.log(" #Always is resolved ");
});
 
xmlObj.done(function(){
    console.log(" #Done is resolved ");
});
         
</script>

Producción: 

#Always is resolved 
#Done is resolved 
#Then is resolved