Recentemente, envolvi muitas operações do Ajax e tenho que fazer o que devo fazer em segundo plano. A função AJAX que eu uso agora é encapsulada por um pessoal de segundo plano - mas é baseado no jQuery Ajax, por isso será inútil sem jQuery. E acho que o método de jQuery Ajax é muito completo e pode ser usado diretamente. Se houver jQuery, seu Ajax não será usado em vão. O que me falta é um método Ajax que pode ser usado sem jQuery.
Então, também passei um dia escrevendo um, os parâmetros e o método de chamada são semelhantes ao Ajax da JQuery. Chama -se xhr, porque xhr = xmlhttPrequest.
A cópia do código é a seguinte:
/*
* Nome: XHR, Função de encapsulamento AJAX
* Descrição: Uma classe de encapsulamento de chamadas Javax, imitando o método de chamada Ajax de JQuery
* Autor: Dez Anos de Luz
*/
var xhr = function () {
var
ajax = function () {
Return ('xmlHttPrequest' na janela)? function () {
retornar novo xmlHttPrequest ();
}: function () {
retornar new ActiveXObject ("Microsoft.xmlHttp");
}
} (),
formatData = função (fd) {
var res = '';
para (var f em fd) {
res+= f+'='+fd [f]+'&';
}
retornar res.slice (0, -1);
},
Ajax = função (ops) {
var
raiz = isso,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'responseText';
root.method = ops.method || 'PEGAR';
root.async = ops.async || verdadeiro;
root.data = ops.data || {};
root.complete = ops.complete || function () {};
root.success = ops.success || função(){};
root.error = ops.error || função (s) {alert (root.url+'-> status:'+s+'error!')};
root.abort = req.abort;
root.setData = function (dados) {
para (var d em dados) {
root.data [d] = dados [d];
}
}
root.send = function () {
var datasting = formatData (root.data),
sendstring, get = false,
assync = root.async,
complete = root.complete,
método = root.method,
tipo = root.type;
if (método === 'get') {
root.url+= '?'+DataString;
get = true;
}
req.open (método, root.url, assíncrono);
if (! Get) {
req.setRequestHeader ("Content-Type", "Application/X-Www-Form-Urlencoded");
sendString = DataString;
}
// Redefina o método ONREADESTATECHANGE Antes de enviar, caso contrário, uma nova solicitação de sincronização será exibida e dois retornos de chamada bem -sucedidos serão executados (Chrome, etc. também será executado em OnreadyStatechange ao sincronizar a solicitação)
req.onReadyStateChange = assíncrono? function () {
// console.log ('assíncrono true');
if (req.readyState == 4) {
completo();
if (req.status == 200) {
root.success (req [tipo]);
} outro {
root.error (req.status);
}
}
} : nulo;
req.send (sendString);
if (! assync) {
//console.log(sync false ');
completo();
root.success (req [tipo]);
}
}
root.url && root.send ();
};
Função de retorno (ops) {retorna novo Ajax (OPS);}
} ();
Descrição do parâmetro:
1.url: o endereço de solicitação. Você não pode preencher e a solicitação não será iniciada. Mas se você não preencher e forçá -lo a enviar, não o culparei por nenhum erro.
2.METHOD: 'Get' ou 'Post', todos capitalizados e padrão
3.datos: os dados a serem enviados são um objeto
4.Async: Se é assíncrono, padrão true
5.Type: o tipo de dados retornado é apenas RespoteText ou Responsexml, e o responsável padrão padrão
6.complete: funções executadas quando a solicitação é concluída
7.CESSO: funções executadas quando a solicitação é bem -sucedida
8.Error: função executada quando a solicitação falha
NOTA: Os parâmetros de tipo não são tão ricos quanto o Datatype do JQuery, apenas o responseText ou o ResponseXML no Ajax nativo. Se os dados JSON forem retornados, você precisará lidar com isso na função de sucesso para converter o texto em JSON.
Descrição da função:
Existem duas funções a serem usadas para um objeto XHR instanciado. Um é enviar. O método de chamada é: xhr.send (), sem parâmetros. Sua função é iniciar o processo de solicitação. Se não houver URL durante a inicialização, o método de envio não será executado; portanto, você poderá adicionar URL posteriormente e iniciar o envio manualmente - se não houver URL durante o envio, a solicitação falhará e eu não lide com esse erro. Só você pode encontrar o erro sozinho.
Outro método é o SetData, o método de chamada é XHR.SetData (Data_OBJ) e seu parâmetro é um objeto. A função do método setData é substituir parcialmente o valor no atributo de dados do XHR.Data. Por exemplo, já existe uma página: 1 em xhr.data. Você pode usar o XHR.SetData ({Página: 2}) para atualizar seu valor sem afetar outros valores de atributo que já existem nos dados.
Método de chamada:
A cópia do código é a seguinte:
var a1 = xhr ({
URL: '2.php',
dados:{
'Nome de usuário': 'LX',
'Senha': '123456',
'gênero': 'masculino',
'Interset': 'Play'
},
assíncrono: falso,
Método: 'Get',
Sucesso: função (dados) {
var obj = json.parse (dados);
// ...
}
});
Nota: Não há necessidade de escrever novo
Introdução em destaque:
Após esse período de experiência no projeto, descobri que uma aula de Ajax deveria ter um recurso muito comum: é conveniente iniciar solicitações repetidamente. Por exemplo, quando escrevo uma página do AJAX em um projeto, tenho que enviar uma solicitação toda vez que viro a página, mas os dados enviados não serão alterados, exceto o número atual da página e o número de cada página. Se você precisar definir repetidamente esses parâmetros inalterados, é sem dúvida um desperdício de recursos.
Portanto, essa função XHR já considerou essa função. Veja o exemplo de paginação. Podemos inicializar um objeto XHR quando a página é carregada e salvá -lo como uma variável A1. Quando uma solicitação de giro de página é iniciada, nenhum outro parâmetros mudou, mas o número de pagenores mudou. No momento, podemos chamar o método setData de XHR para alterar o número de pagen.
A cópia do código é a seguinte:
a1.setData ({pagenumber: 2});
Nota: O parâmetro do setData também é um objeto.
Obviamente, você também pode substituir os dados completamente:
a1.data = {…};
Não apenas os dados, você pode fazer mais alterações no objeto XHR instanciado A1, como alterar o URL, a alteração da função de sucesso, a mudança de postar e alterar síncrono para assíncrono ... depois de alterar, chamar o método A1.send () e iniciará a solicitação novamente de acordo com suas configurações.
Obviamente, se for outra solicitação de Ajax que não é completamente relacionada, não há necessidade de forçar este A1 pronto. Podemos instanciar outro XHR chamado A2 ou algo assim.
Se você não estiver satisfeito com o nome XHR, só pode alterá -lo.
Além disso, ele fornece uma versão criptografada compactada. A versão não compactada remove os comentários sobre 2kb e a versão compactada é de 1,00 KB.
A cópia do código é a seguinte:
var xhr = function () {var e = function () {return "xmlHttPRequest" na janela? function () {retorna novo xmlHttPrequest}: function () {return new ActiveXObject ("Microsoft.xmlHtp")}}}} (), t = function (e) {var) e) {t+= n+"="+e [n]+"&"} retorna t.slice (0, -1)}, n = function (n) {var r = this, i = e (); r.url = n.url; r.type = n.type || "RespoteText"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; r.comPlete = n.comte | n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url+"-> status:"+e+"erro!")}; t em e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r.complete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); if (! s) {i.setRequestHeader ("conteúdo-tipo", "Application/x-www-forma-urlncoded "); 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 ()}; retornar função (e) {return new n (e)}} ()
Deve haver alguma incompletude no XHR. Se você o encontrar durante o uso no futuro, eu o corrigirei a tempo. Se você não estiver satisfeito com isso ou achar insuficiente, dê sugestões para melhorias.