Método Ajax de jquery

antecedentes

Consulte la api ajax de jquery para encapsular un método ajax

Dificultades técnicas

• paquete jsonp
• prometer apoyo
• soporte de formData
• Encapsulación del método de conveniencia
• Soporte modular

paquete jsonp

El principio de jsonp se basa en la etiqueta de script, que asigna una interfaz de solicitud a src, pasa una función de devolución de llamada （?callback=jsonp12121）al servidor y el servidor typeof jsonp12121 === 'function' && jsonp12121(respData)responde al navegador en forma de respuesta.

Paquete jsonp completo

function JSONP(options) {
    //
    var callbackName = options.jsonpCallback || 'jsonp' + (new Date().getTime());

    var script = window.document.createElement('script');

    var abort = function () {
        // 设置 window.xxx = noop
        if (callbackName in window) {
            window[callbackName] = noop;
        }
    };

    var xhr = {abort: abort};
    var abortTimeout;

    var head = window.document.getElementsByTagName('head')[0] || window.document.documentElement;

    // ie8+
    script.onerror = function (error) {
        _error(error);
    };

    function _error(error) {
        window.clearTimeout(abortTimeout);
        xhr.abort();
        ajaxError(error.type, xhr, error.type, options);
        _removeScript();
    }

    window[callbackName] = function (data) {
        window.clearTimeout(abortTimeout);
        ajaxSuccess(data, xhr, options);
        _removeScript();
    };

    //
    serializeData(options);

    script.src = options.url.replace(/=\?/, '=' + callbackName);
    //
    script.src = appendQuery(script.src, '_=' + (new Date()).getTime());
    //
    script.async = true;

    // script charset
    if (options.scriptCharset) {
        script.charset = options.scriptCharset;
    }

    //
    head.insertBefore(script, head.firstChild);

    //
    if (options.timeout > 0) {
        abortTimeout = window.setTimeout(function () {
            xhr.abort();
            ajaxError('timeout', xhr, 'timeout', options);
            _removeScript();
        }, options.timeout);
    }

    // remove script
    function _removeScript() {
        if (script.clearAttributes) {
            script.clearAttributes();
        } else {
            script.onload = script.onreadystatechange = script.onerror = null;
        }

        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        //
        script = null;

        delete window[callbackName];
    }

    return options.promise;
}

prometer apoyo

Al configurar el objeto devuelto como un objeto Promise, se puede lograr el soporte de promesa.

ie8 no es compatible.

let ajax = function(options){
    var settings = extend({}, options || {});
    <!--promise 支持--> 
    try {
        var q = {};
        var promise = new Promise(function (resolve, reject) {
            q.resolve = resolve;
            q.reject = reject;
        });

        promise.resolve = q.resolve;
        promise.reject = q.reject;

        settings.promise = promise;
    } catch (e) {
        //
        settings.promise = {
            resolve: noop,
            reject: noop
        };
    }
    
    
    <!---->
    return settings.promise;
}

soporte de formdata

Solo es necesario configurarlo processDataen falsey está configurado contentTypeenfalse

let formData = new FormData();
ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
})

Encapsulación del método de conveniencia

• ajax.get ()

• ajax.post ()

• ajax.getJSON ()

• ajax.ajaxSetup ()

Soporte modular

 // RequireJS && SeaJS
if (typeof define === 'function') {
    define(function () {
        return ajax;
    });
    // NodeJS
} else if (typeof exports !== 'undefined') {
    module.exports = ajax;
} else {
    // browser
    window.ajax = ajax;
}

Parámetros admitidos

url

(Una cadena que contiene la URL utilizada para enviar la solicitud).

acepta

(Valor predeterminado: depende del tipo de datos). El
tipo de contenido envía el encabezado de la solicitud, indicándole al servidor qué tipo de respuesta se devolverá. Si es necesario modificar la configuración de acepta, se recomienda hacerlo una vez en el método ajaxSetup ().

asincrónico

(Valor predeterminado: verdadero) De forma predeterminada, todas las solicitudes son solicitudes asincrónicas. Si necesita enviar una solicitud de sincronización, establezca esta opción en falso. Tenga en cuenta que la
solicitud de sincronización bloqueará el navegador y otras operaciones del usuario deben esperar a que se complete la solicitud antes de que puedan ejecutarse. )

beforeSend (XHR)

(Puede modificar la función del objeto XMLHttpRequest antes de enviar la solicitud, como agregar un encabezado HTTP personalizado. El objeto XMLHttpRequest es el único parámetro.
Este es un evento Ajax. Si devuelve falso, puede cancelar la solicitud ajax).

function (XMLHttpRequest) {
    this; // 调用本次AJAX请求时传递的options参数
}

completo (XHR, TS)

Función de devolución de llamada después de que se complete la solicitud (llamada después de que la solicitud sea exitosa o fallida). Parámetros: objeto XMLHttpRequest y una cadena que describe el tipo de solicitud exitosa.

function (XMLHttpRequest, textStatus) {
    this; // 调用本次AJAX请求时传递的options参数
}

tipo de contenido

(Predeterminado: "application / x-www-form-urlencoded") El tipo de codificación de contenido al enviar información al servidor. El valor predeterminado es adecuado para la mayoría de situaciones.
Si pasa explícitamente un tipo de contenido a ajax (), debe enviarse al servidor (incluso si no hay datos para enviar)

contexto

(Este objeto se utiliza para establecer el contexto de las devoluciones de llamada relacionadas con Ajax. En otras palabras, deje que la devolución de llamada funcione en este punto dentro del objeto (si no establece este parámetro,
esto apunta al parámetro de opciones que se pasó al llamar a esta solicitud AJAX ).
Por ejemplo, especifique un elemento DOM como parámetro de contexto, de modo que el contexto de la función de devolución de llamada exitosa se establezca en este elemento DOM. Así :)

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

dominio cruzado

(Predeterminado: la misma solicitud de dominio es falsa)
La solicitud de dominio cruzado es verdadera Si desea forzar la solicitud de dominio cruzado (como el formato JSONP) al mismo dominio, establezca crossDomain en verdadero. Esto hace, por ejemplo, la redirección del lado del servidor a otro dominio.

datos

(Los datos enviados al servidor. Se convertirán automáticamente al formato de cadena de solicitud. La solicitud GET se agregará a la URL. Verifique la descripción de la opción processData para prohibir esta conversión automática.
Debe estar en formato de clave / valor. Si es es una matriz, jQuery automáticamente Los diferentes valores corresponden al mismo nombre. Por ejemplo, {foo: ["bar1", "bar2"]} se convierte en "& foo = bar1 & foo = bar2").

tipo de datos

El tipo de datos que se espera que devuelva el servidor. Si no se especifica, se juzgará automáticamente de forma inteligente en función de la información MIME del paquete HTTP. Por ejemplo, el tipo XML MIME se reconoce como XML. En 1.4, JSON generará un objeto JavaScript y el script ejecutará el script.
Luego, los datos devueltos por el servidor se analizarán de acuerdo con este valor y se pasarán a la función de devolución de llamada. Valores disponibles:

"Xml": Devuelve un documento XML, que jQuery puede procesar.

"Html": Devuelve la información HTML en texto plano, la etiqueta de script incluida se ejecutará cuando se inserte el dom.

"Json": devuelve datos JSON.

"Jsonp": formato JSONP. Al llamar a una función en forma de JSONP, como "myurl? Callback =?", JQuery reemplazará automáticamente? Con el nombre de función correcto para ejecutar la función de devolución de llamada.

"Texto": devuelve una cadena de texto sin formato

"*": Cualquier tipo

error (XMLHttpRequest, textStatus, errorThrown)

(Valor predeterminado: juicio automático (xml o html)) Esta función se llama cuando falla la solicitud. Hay tres parámetros: objeto XMLHttpRequest, mensaje de error y (opcional) el objeto de excepción capturado. Si ocurre un error, el mensaje de error (el segundo parámetro)
puede ser "timeout", "error", "notmodified" y "parsererror" además de nulo.

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

encabezados

Un par "{clave: valor}" adicional se asigna a la solicitud y se envía en conjunto. La función beforeSend se llama antes de que se establezca esta configuración; por lo tanto, la configuración del valor en el encabezado del mensaje puede anular cualquier configuración dentro del alcance de la función beforeSend.

jsonp

Vuelva a escribir el nombre de la función de devolución de llamada en una solicitud jsonp. Este valor se usa para reemplazar la parte "callback" del parámetro URL en la solicitud "callback =?" GET o POST. Por
ejemplo, {jsonp: 'onJsonPLoad'} hará que "onJsonPLoad =?" Se pase al servidor .

jsonpCallback

Especifique un nombre de función de devolución de llamada para la solicitud jsonp. Este valor se utilizará para reemplazar el nombre de la función aleatoria generada automáticamente por jQuery. Esto se usa principalmente para permitir que jQuery genere nombres de funciones únicos, de
modo que sea más fácil administrar las solicitudes, y también es conveniente proporcionar funciones de devolución de llamada y manejo de errores. También puede especificar el nombre de la función de devolución de llamada cuando desee que el navegador almacene en caché las solicitudes GET.

éxito (datos, estado de texto, jqXHR)

La función de devolución de llamada después de que la solicitud sea exitosa. Parámetros: los datos devueltos por el servidor y procesados ​​de acuerdo con el parámetro dataType; una cadena que describe el estado.

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

se acabó el tiempo

Establezca el tiempo de espera de la solicitud (en milisegundos). Esta configuración anulará la configuración global.

tipo

(Predeterminado: "GET") Método de solicitud ("POST" o "GET"), el predeterminado es "GET". Nota: También se pueden utilizar otros métodos de solicitud HTTP, como PUT y DELETE, pero solo algunos navegadores son compatibles.

nombre de usuario

Nombre de usuario utilizado para responder a las solicitudes de autenticación de acceso HTTP

contraseña

Contraseña utilizada para responder a las solicitudes de autenticación de acceso HTTP

procesar datos

(Predeterminado: verdadero) De forma predeterminada, los datos pasados ​​a través de la opción de datos, si es un objeto (técnicamente hablando, siempre que no sea una cadena), se
procesarán y convertirán en una cadena de consulta para que coincida con la predeterminada. tipo de contenido "application / x- www-form-urlencoded".
Si desea enviar información del árbol DOM u otra información que no desea convertir, configúrelo en falso.

xhrFields

Objeto Objeto. Puede admitir con Credenciales, Control de acceso-Permitir-Credenciales,
cuyos parámetros de compatibilidad con Credenciales es IE10 +

tipo de Mimica

(Se utiliza un tipo mime para anular el tipo MIME de XHR).

ifModified

((Predeterminado: falso) Solo obtenga datos nuevos cuando se modifiquen los datos del servidor. Utilice el encabezado Última modificación del paquete HTTP para determinar. El
servidor especificado 'etag' también se verificará para asegurarse de que los datos no se hayan modificado).

cache

((Valor predeterminado: verdadero, el valor predeterminado es falso cuando dataType es script y jsonp) Si se establece en falso, esta página no se almacenará en caché).

Parámetros no admitidos actualmente

xhr

(Utilice el xhr predeterminado (XMLHttpRequest, compatible con ie8 +)

tradicional

(Si desea serializar los datos de la forma tradicional, configúrelo en verdadero).

código de estado

(Un conjunto de códigos HTTP numéricos y objetos de función, y los códigos correspondientes se llaman al responder. Por ejemplo, si el estado de respuesta es 404, se activará la siguiente alarma :)

ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

isLocal

(Predeterminado: depende del protocolo de ubicación actual)
(Permite que el entorno actual se reconozca como "local" (como el sistema de archivos), incluso si jQuery no lo reconoce de forma predeterminada. Los
siguientes protocolos se reconocen actualmente como locales: archivo , * -extension y widget. Si es necesario modificar la configuración de isLocal, se recomienda hacerlo una vez en el método $ .ajaxSetup ().)

global

(Predeterminado: verdadero) Si se activan eventos AJAX globales. Establecer en falso no activará eventos AJAX globales, como ajaxStart o ajaxStop se pueden usar para controlar diferentes eventos Ajax.

dataFilter

(Una función para preprocesar los datos originales devueltos por Ajax. Proporcione dos parámetros: datos y tipo: los datos son los datos originales devueltos por Ajax, y el
tipo es el parámetro dataType proporcionado al llamar a Ajax. El valor devuelto por la función se procesará más. por jQuery.)

convertidores

(Predeterminado: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML})
(un tipo de datos a un objeto convertidor de tipos de datos. valor de cada convertidor es una función que devuelve el valor convertido de la respuesta)

contenido

Un objeto emparejado con "{string: regular expression}" se usa para determinar cómo se analizará la respuesta, dado su tipo de contenido.

github

https://github.com/bosscheng/simple-ajax