Recientemente, he involucrado muchas operaciones de AJAX, y tengo que hacer lo que debo hacer en segundo plano. La función AJAX que uso ahora está encapsulada por un personal de fondo, pero se basa en jQuery Ajax, por lo que será inútil sin jQuery. Y creo que el método AJAX de jQuery es muy completo y se puede usar directamente. Si hay jQuery, entonces su Ajax no se usará en vano. Lo que me falta es un método AJAX que se puede usar sin jQuery.
Así que también pasé un día escribiendo uno, los parámetros y el método de llamadas son similares al AJAX de JQuery. Se llama xhr, porque xhr = xmlhttprequest.
La copia del código es la siguiente:
/*
* Nombre: XHR, función de encapsulación AJAX
* Descripción: una clase de encapsulación de llamadas de Javax, imitando el método de llamadas AJAX de JQuery
* Autor: Diez años de luz
*/
var xhr = function () {
varilla
ajax = function () {
return ('xmlhttprequest' en la ventana)? función () {
devolver nuevo xmlhttprequest ();
} : función () {
devolver nuevo ActiveXObject ("Microsoft.xmlhttp");
}
} (),
formatData = function (fd) {
var res = '';
para (var f en fd) {
res+= f+'='+fd [f]+'&';
}
return res.lice (0, -1);
},
Ajax = function (ops) {
varilla
raíz = esto,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'ResponseText';
root.method = ops.method || 'CONSEGUIR';
root.async = ops.async || verdadero;
root.data = ops.data || {};
root.complete = ops.complete || función () {};
root.success = ops.success || función(){};
root.error = ops.error || función (s) {alert (root.url+'-> status:'+s+'error!')};
root.abort = req.abort;
root.setData = function (data) {
para (var d en datos) {
root.data [d] = data [d];
}
}
root.send = function () {
var dataString = formatData (root.data),
sendString, get = false,
async = root.async,
completo = root.complete,
método = root.method,
type = root.type;
if (método === 'get') {
root.url+= ''? '+dataTring;
get = verdadero;
}
req.open (método, root.url, async);
if (! get) {
req.setRequestHeader ("Content-type", "Application/x-www-form-urlencoded");
sendString = DataString;
}
// Restablecer el método OnreadyStateChange antes de enviar, de lo contrario aparecerá una nueva solicitud de sincronización y se ejecutarán dos devoluciones de llamada exitosas (Chrome, etc. también ejecutará OnreadyStateChange al sincronizar la solicitud)
req.onreadyStateChange = async? función () {
// console.log ('async true');
if (req.readyState == 4) {
completo();
if (req.status == 200) {
root.success (req [type]);
} demás {
root.error (req.status);
}
}
} : nulo;
req.send (sendString);
if (! async) {
//console.log('async falso ');
completo();
root.success (req [type]);
}
}
root.url && root.send ();
};
Función de retorno (OPS) {return new Ajax (OPS);}
} ();
Descripción del parámetro:
1.URL: la dirección de solicitud. No puede completarlo y la solicitud no se iniciará. Pero si no lo completa y lo obliga a enviar, no te culparé por ningún error.
2. Método: 'Get' o 'Post', todos capitalizados, predeterminados Get Get
3. Datos: los datos que se enviarán son un objeto
4.Async: si es asíncrono, predeterminado verdadero
5.Type: el tipo de datos devuelto es solo ResponseText o Responsexml, y el ajuste de respuesta predeterminado
6.
7.Success: Funciones ejecutadas cuando la solicitud es exitosa
8.Error: función ejecutada cuando falla la solicitud
Nota: Los parámetros de tipo no son tan ricos como el tipo de datos de jQuery, solo ResponseText o Responsexml en AJAX nativo. Si se devuelven los datos JSON, debe manejarlo usted mismo en la función de éxito para convertir el texto en JSON.
Descripción de la función:
Hay dos funciones para usar para un objeto XHR instanciado. Uno es enviar. El método de llamada es: xhr.send (), sin parámetros. Su función es iniciar el proceso de solicitud. Si no hay URL durante la inicialización, el método de envío no se ejecutará, por lo que puede agregar URL más tarde e iniciar el envío manualmente; si no hay URL durante el envío, la solicitud fallará y no manejé este error. Solo usted puede encontrar el error usted mismo.
Otro método es SetData, el método de llamada es XHR.SetData (data_obj), y su parámetro es un objeto. La función del método SetData es reemplazar parcialmente el valor en el atributo de datos de XHR.Data. Por ejemplo, ya hay una página: 1 en XHR.DATA. Puede usar xhr.setData ({página: 2}) para actualizar su valor sin afectar otros valores de atributos que ya existen en los datos.
Método de llamadas:
La copia del código es la siguiente:
var a1 = xhr ({
URL: '2.php',
datos:{
'Nombre de usuario': 'Lix',
'contraseña': '123456',
'género': 'masculino',
'Interset': 'Play'
},
async: falso,
Método: 'Get',
éxito: function (data) {
var obj = json.parse (datos);
// ...
}
});
Nota: No es necesario escribir nuevo
Introducción destacada:
Después de este período de experiencia del proyecto, descubrí que una clase AJAX debería tener una característica muy común: es conveniente iniciar solicitudes repetidamente. Por ejemplo, cuando escribo una página de AJAX en un proyecto, tengo que enviar una solicitud cada vez que giro la página, pero los datos enviados no cambiarán, excepto el número de página actual y el número de cada página. Si tiene que definir repetidamente esos parámetros sin cambios, sin duda es un desperdicio de recursos.
Entonces, esta función XHR ya ha considerado esta función. Tome el ejemplo de paginación. Podemos inicializar un objeto XHR cuando la página se carga y guardarla como una variable A1. Cuando se inicia una solicitud de turno de página, ningún otro parámetros ha cambiado, pero el número de pagenio ha cambiado. En este momento, podemos llamar al método SetData de XHR para cambiar PageNumber.
La copia del código es la siguiente:
a1.setData ({PageNumber: 2});
Nota: El parámetro de SetData también es un objeto.
Por supuesto, también puede reemplazar los datos por completo:
a1.data = {...};
No solo datos, puede realizar más cambios en el objeto XHR instanciado A1, como cambiar la URL, cambiar la función de éxito, cambiar la publicación y cambiar sincrónicamente a asíncrono ... después de cambiar, llame al método A1.send () e iniciará la solicitud nuevamente de acuerdo con su configuración.
Por supuesto, si se trata de otra solicitud de AJAX que está completamente no relacionada, no hay necesidad de forzar este A1 preparado. Podemos instanciar otro XHR llamado A2 o algo así.
Si no está satisfecho con el nombre XHR, solo puede cambiarlo usted mismo.
Además, proporciona una versión cifrada comprimida. La versión sin comprimir elimina los comentarios sobre 2KB, y la versión comprimida es de 1.00kb.
La copia del código es la siguiente:
var xhr=function(){var e=function(){return"XMLHttpRequest"in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){var t="";for(var n in e) {t+= n+"="+e [n]+"&"} return t.slice (0, -1)}, n = function (n) {var r = this, i = e (); r.Url = n.url; r.type = n.type || "ResponseText"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; r.complete = n.complete || financiero n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url+"-> status:"+e+"error!")}; r.abort = i.abort; r.setData = function (e) {para (var (var (var (var (var) t en e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = falso, o = r.async, u = r.complete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr = tr UE} i.open (a, r.url, o); if (! S) {I.SetRequestHeader ("Content-type", "Application/x-www-form-urlencoded "); n = e} i.onreadystateChange = o? function () {if (i.readystate == 4) {u (); if (i.status == 200) {r.success (i [f ])} else {r.error (i.status)}}}: null; i.send (n); if (! O) {u (); r.success (i [f])}}; r.url && r.send ()}; return función (e) {return new n (e)}} ()
Debe haber algo de incompletitud en XHR. Si lo encuentra durante el uso en el futuro, lo corregiré a tiempo. Si no está satisfecho con él o lo encuentre insuficiente, haga sugerencias de mejora.