Opción jQuery ajax () – xhr

En la función ajax jQuery hay la opción xhr. ¿Alguien sabe más detalles, usabilidad o uso de muestra de esta opción?

De hecho, alguien lo sabe .

La opción xhr permite definir su propia callback para crear el objeto XMLHttpRequest que se usará entre bambalinas en la llamada ajax() . En casi todos los casos, no necesita especificar esta opción.

Sé que esta es una pregunta antigua, pero estaba buscando esto y quiero publicar esto para que la siguiente persona entienda lo que está pasando.

Para esta función, desea devolver un objeto XHR apropiado para su navegador. El comportamiento predeterminado es utilizar XMLHTTPRequest o el equivalente de IE. Aquí está el comportamiento por defecto:

 jQuery.ajaxSettings.xhr = window.ActiveXObject ? /* Microsoft failed to properly * implement the XMLHttpRequest in IE7 (can't request local files), * so we use the ActiveXObject when it is available * Additionally XMLHttpRequest can be disabled in IE7/IE8 so * we need a fallback. */ function() { return !this.isLocal && createStandardXHR() || createActiveXHR(); } : // For all other browsers, use the standard XMLHttpRequest object createStandardXHR; 

Esos dos métodos de creación createStandardXHR y createActiveXHR esencialmente a los métodos básicos de creación de XHR que todos conocemos y amamos desde hace años. Aquí está createStandardXHR:

 function createStandardXHR() { try { return new window.XMLHttpRequest(); } catch( e ) {} } 

Por lo tanto, si desea anular esto, simplemente puede pasar su propia función que devuelve un new XMLHttpRequest() objeto new XMLHttpRequest() .

Por qué querrías hacer esto? Supongamos que necesita realizar una solicitud HTTP de dominio cruzado y está utilizando un complemento IFRAME para que funcione utilizando document.domain para trabajar dentro de las mismas reglas de origen. Esta es una buena manera de hacer que su javascript cargue el objeto XHR desde el marco correcto en función del dominio con el que quiera hablar.

Twitter.com utiliza esta técnica.

JavaScript se ejecuta en http://twitter.com/ pero los datos están en http://api.twitter.com . Crean un IFRAME apuntando a api.twitter.com que simplemente establece document.domain en "twitter.com" . También configuran document.domain a "twitter.com" en la página principal.

Luego, su JS, al realizar solicitudes HTTP, simplemente lo crea a partir de IFRAME en lugar de la página principal. Los consigue a través de la política del mismo origen.

Puedes hacer esto con la opción xhr para $ .ajax (). Aquí hay un fragmento (imagine que este código se ejecuta en una página en http://myapp.com ):

 $.ajax({url: "http://api.myapp.com", xhr: function(){ return new ($('#my_api_iframe')[0].contentWindow.XMLHttpRequest)(); }, success: function(html) { // format and output result } }); 

Esto funcionará siempre que tanto la página principal como el iframe establezcan su document.domain en el mismo valor. (Este es un ejemplo de piratería: no funcionará en algunas versiones de IE porque hice trampa y solo usé el objeto XMLHttpRequest estándar, tendrá que arreglarlo).

Espero que ayude.

(editado para agregar: esta es una técnica necesaria para los navegadores más antiguos; la compatibilidad con CORS en la mayoría de los navegadores modernos haría esto innecesario)

Sujal

Otra respuesta tardía, pero el código a continuación es un gran ejemplo de lo que puede hacer cuando invalida la opción xhr. Esto se ha tomado del blog de Ben Nolan. Le permite hacer un seguimiento del progreso de un xhr get. Utilicé esto para crear una barra de progreso al cargar un gran conjunto de datos json, exactamente para lo que lo creó. Me ayudó un montón.

 interval = null $.ajax { url : "endpoint.json" dataType : 'json' xhr : () => xhr = jQuery.ajaxSettings.xhr() interval = setInterval( => if xhr.readyState > 2 total = parseInt(xhr.getResponseHeader('Content-length')) completed = parseInt(xhr.responseText.length) percentage = (100.0 / total * completed).toFixed(2) console.log "Completed #{percentage}%" , 50) xhr complete: -> clearInterval(interval) success : (data) => alert(data) } 

http://api.jquery.com/ es tu amigo. Desde ese sitio cuando busca el comando ajax ():

xhr (Función): Devolución de llamada para crear el objeto XMLHttpRequest. El valor predeterminado es ActiveXObject cuando está disponible (IE), de lo contrario, XMLHttpRequest. Reemplace para proporcionar su propia implementación para XMLHttpRequest o mejoras a la fábrica. No está disponible en jQuery 1.2.6 y en ninguna versión anterior.

Generalmente, a menos que sepa lo que está haciendo, realmente no usará esta función de la función $ .ajax ()