Ajax é a abreviação de JavaScript assíncrono e XML e é um mecanismo para atualizar uma determinada parte da página. Ele fornece o poder de atualizar uma parte da página depois de obter dados do servidor, evitando assim a atualização de toda a página. Além disso, a realização de atualizações de página local dessa maneira pode não apenas criar uma experiência suave do usuário, mas também reduzir a carga no servidor.
Aqui está uma análise de uma solicitação básica de Ajax:
var xhr = novo xmlHttPrequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (nulo);Aqui, criamos uma instância de uma classe que pode fazer solicitações HTTP ao servidor. Seu método aberto é então chamado, onde o primeiro parâmetro é o método de solicitação HTTP e o segundo parâmetro é o URL da página de solicitação. Finalmente, chamamos o método de envio com o parâmetro nulo. Se você usar o método de solicitação de postagem (usamos o Get AQUI), os parâmetros do método de envio devem conter os dados que você deseja enviar.
Aqui está como lidamos com a resposta do servidor:
xhr.onReadyStateChange = function () {var done = 4; // ReadyState 4 significa que a solicitação foi enviada para o servidor var ok = 200; // status 200 significa que o servidor retorna com sucesso se (xhr.readyState === done) {if (xhr.status === ok) {console.log (xhr.ResponseTxt); // Este é o texto retornado} else {console.log ("Error:"+ xhr.status); // Ocorreu o erro nesta solicitação}}}OnreadyStateChange é assíncrono, o que significa que será chamado a qualquer momento. Esse tipo de função é chamado de função de retorno de chamada - depois que algum processamento é concluído, ela é chamada. Nesse caso, esse processamento ocorre no servidor.
Exemplo
O método Ajax conveniente também é a razão pela qual muitas pessoas confiam no jQuery, mas, de fato, a API do Ajax do JavaScript nativo também é muito poderosa, e o uso básico não é muito diferente em cada navegador. Portanto, você pode encapsular completamente um objeto Ajax sozinho. A seguir, o objeto Ajax encapsulado:
// Método Ajax // Lazy Load Crie a função do objeto XHR createxhr () {if ('xmlHttPrequest' na janela) {createxhr = function () {retorna novo xmlHttPrequest (); }; } else if ('ActivexObject' na janela) {createxhr = function () {return new ActivexObject ("msxml2.xmlhttp"); }; } else {createxhr = function () {tiro novo erro ("ajax não é suportado por este navegador"); }; } retornar createxhr (); } // ajax Executa a solicitação de função (ajaxData) {var xhr = createxhr (); ajaxdata.before && ajaxdata.before (); // lidera solicitações assíncronas através dos eventos xhr.onReadyStateChange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {if (ajaxdata.datypey == 'json') {// Retorne o objeto JSON; JSON1 = EVALL ('(' + JSONST + ')'), JSON2 = (NOVA FUNÇÃO ('Return' + JSonstr)) (); ajaxdata.callback (json2); // ajaxdata.callback (json.parse (xhr.ProSetext)); // método nativo, não suportado no IE6/7} else ajaxdata.callback (xhr.ProSeText); } else {ajaxdata.error && ajaxdata.error (xhr.Responsetext); }}}; // Definir parâmetros de solicitação xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setRequestHeader ('if-modificado-desde', '0'); if (ajaxdata.data) {xhr.setRequestHeader ('content-type', 'Application/x-www-forma-urlencoded'); xhr.send (ajaxdata.data); } outro {? ? xhr.setRequestHeader ('x-requestado-with', 'xmlhttprequest'); xhr.send (nulo); } retornar xhr;} função post (ajaxdata) {ajaxdata.type = 'post'; var _Result = request (ajaxData); Return _Result;} função get (ajaxdata) {ajaxdata.type = 'get'; ajaxdata.data = null; var _Result = request (ajaxData); retornar _result;}Aqui está um exemplo de uso:
index.html
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> implementação nativa javascript ajax </title> <link rel = "stylesheet" type = "text/css"/"all" href = ". Fonte-família: 'Lucida Grande', 'Microsoft yahei'} #Content .btn_ctr {display: block; Largura: 120px; Altura: 30px; Margem: 0 Auto 20px; Antecedentes: #53A7BB; Cor: #FFF; Peso da fonte: negrito; Size da fonte: 14px; altura de linha: 30px; Decoração de texto: Nenhum; Radio de fronteira: 4px; } #test {width: 280px; Altura: 130px; margem: 0 automático; preenchimento: 15px; Antecedentes: #FFF; Radio de fronteira: 4px; Alinhamento de texto: esquerda; } </style> </head> <body> <div id = "cabeçalho"> <div id = "cabeçalho-content"> <div id = "header-inside"> <p> <a href = "http://kayostest.com/css3-animation.html" TARGET = "_BLAPT"> href = "http://kayofito.com" Target = "_ Blank"> meu blog </a> </p> <p> Demo por Kayo © Copyright 2011-2013 </p> </div> <h1> CSS3 Animation </h1 </div> </div> <ds> "; ONCLICK = "GET ({url: './ajax.html', retorno de chamada: function (out) {document.getElementById ('teste'). inerhtml = out;}})"> ajax Get Content </a> <div = "test"> </lort> </div> <script> // Aqui </cript> </body> </html> ajax.html<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <body> <p> obteve com sucesso este texto </p> </body> </html>
Para efeitos específicos, você pode navegar pela demonstração completa.