jQuery ajax() opción - xhr

Question

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

Answer 1

De hecho, someone does know.

La opción xhr le permite definir su propia devolución de llamada para crear el objeto XMLHttpRequest que se utilizará detrás de escena en la llamada ajax(). En casi todos los casos, no debería necesitar especificar esta opción.

Answer 2

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. Anule para proporcionar su propia implementación de XMLHttpRequest o mejoras en la fábrica. No está disponible en jQuery 1.2.6 ni en ninguna versión anterior.

general, a menos que sepas lo que estás haciendo en realidad no va a utilizar esta función de la función $ .ajax()

Answer 3

Sé que esta es una vieja y vieja pregunta, pero solo estaba buscando esto y quiero publicar esto para que la próxima persona entienda lo que está pasando.

Para esta función, desea devolver un objeto XHR apropiado para su navegador. El comportamiento predeterminado es usar 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; 

Los dos crean métodos createStandardXHR y createActiveXHR llaman esencialmente los métodos básicos de creación XHR todo lo que hemos conocido y amado durante años. Aquí está createStandardXHR:

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

Por lo tanto, si desea reemplazar este, sólo tiene que pasar en su propia función que devuelve un objeto new XMLHttpRequest().

¿Por qué querrías hacer esto? Supongamos que necesita realizar una solicitud HTTP de dominio cruzado y está utilizando una corrección IFRAME para que funcione usando 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 del marco correcto en función del dominio con el que desea 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 que apunta a api.twitter.com que simplemente establece document.domain a "twitter.com". Establecieron document.domain en "twitter.com" en la página principal, también.

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

Puede hacer esto con la opción xhr de $ .ajax(). He aquí un fragmento (imaginar el código que 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 
    } 
}); 

que funcionará siempre y cuando tanto la página principal y el iframe fijan su document.domain en el mismo valor.(Este es un ejemplo de hackish: no funcionará en algunas versiones de IE porque hice trampa y solo usé el objeto XMLHttpRequest estándar; necesitará arreglarlo)

Espero que ayude.

(editado para añadir: esta es una técnica necesaria para navegadores antiguos - el apoyo CORS en la mayoría de los navegadores modernos haría innecesario)

Sujal

Answer 4

Otra respuesta tardía, pero el código de abajo es un gran ejemplo de lo que puede hacer cuando anula la opción xhr. This is taken from Ben Nolan's blog Le permite seguir el progreso de un xhr get. Lo usé para crear una barra de progreso cuando cargué un gran conjunto de datos JSON, exactamente lo mismo 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) 
}