1. Ajax (javascript assíncrono + xml) pode solicitar dados adicionais como o servidor sem desinstalar a página, ou seja, a tecnologia de atualização local
2. Crie um objeto XHR
função createxhr () {if (typeof xmlHttPrequest! = "indefinido") {return new XmlhttPrequest (); } else if (typeof ActivexObject! = "Undefined") {// <ie7 if (typeof argumments.callee.activeXString! = "String") {var versão = ["msxml2.xmlhttp.6.0", msxmlx2.mlhttp.3, ".6.6.0 "," msxml2. for (i = 0, len = versão.length; i <len; i ++) {try {new ActiveXObject (versão [i]); argumentos.callee.activeXString = versão [i]; quebrar; } catch (ex) {}}} Retorne new ActiveXObject (Arguments.callee.activeXString); } else {lança um novo erro ("sem suporte para xhr"); }} var xhr = createxhr (); alerta (xhr); // [Objeto XmlHttPrequest]3. Nota de uso: Todos os exemplos nesta seção são aplicados ao lado do servidor
1. Chame o método Open (). Ele aceita 3 parâmetros: o tipo de solicitação a ser enviada ("Get", "Post", etc.), o URL da solicitação e o valor booleano indicando se a solicitação é enviada de forma assíncrona.
2. Para enviar uma solicitação, ligue para o método send () e aceite um parâmetro, ou seja, deve ser o assunto da solicitação. nulo se não for necessário
3. Os dados retornados serão automaticamente preenchidos nas propriedades do objeto XHR.
var xhr = createxhr (); // Abra o arquivo exemplo.txt em get síncrono // Sincronização: o código JavaScript aguardará o servidor responder e executar xhr.open ("get", "exemplo.txt", false); xhr.send (nulo); // O status representa o status http da resposta // 200 representa OK, 304 representa o cache if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.pressotext); // retorna o texto da resposta, 123456} else {alert ("a solicitação não teve sucesso:" + xhr.status); }4.Example.text Arquivo Conteúdo é uma string: 123456
4. É claro que não haverá problema com o método de sincronização usado no processo anterior. Temos que desafiar um método assíncrono.
var xhr = createxhr ();// xhr.readyState representa o status atual da solicitação/resposta e 4 representa que todos os dados de resposta foram aceitos // além disso, desde que o valor do XHR.ReadyState mude, o XHR.onReadyStechange será acionado xhr.onreadyStechange = () (if (xhr.readhange xhr.status <300) || xhr.status == 304) {alert (xhr.ProSeText); } else {alert ("A solicitação não teve sucesso:" + xhr.status); }}}; xhr.open ("get", "exemplo.txt", true); xhr.send (nulo);
5. Cada solicitação e resposta HTTP terão informações de cabeçalho correspondentes.
1. Por padrão, ao enviar uma solicitação XHR, as seguintes informações do cabeçalho também serão enviadas.
①Acept: o tipo de conteúdo que o navegador pode suportar.
②ACECT-CHARSET: O conjunto de caracteres que o navegador pode exibir.
③Cecept-codificação: codificação compactada que o navegador pode manusear.
Language Language: o idioma atualmente definido pelo navegador.
⑤Connection: o tipo de conexão entre o navegador e o servidor.
⑥cookies: qualquer cookies definido na página atual.
Host: O domínio em que a página em que a solicitação foi emitida está localizada.
⑧Referer: URI da página que emitiu a solicitação.
⑨User-Agent: a sequência do agente do usuário do navegador.
2. Use o método setRequestHeader () para definir informações de cabeçalho de solicitação personalizadas. Aceite dois parâmetros: o nome do campo do cabeçalho e o valor do campo do cabeçalho
var xhr = createxhr (); // xhr.readyState representa o status atual da solicitação/resposta e 4 representa que todos os dados de resposta foram aceitos // além disso, desde que o valor do XHR.ReadyState mude, o XHR.onReadyStechange será acionado xhr.onreadyStechange = () (if (xhr.readhange xhr.status <300) || xhr.status == 304) {alert (xhr.ProSeText); } else {alert ("A solicitação não teve sucesso:" + xhr.status); }}}; xhr.open ("get", "exemplo.txt", true); // xhr.setRequestHeader ("nome", "zhang"); // O "nome" aceito pode ser visto no http do exemplo.txt: "zhang" xhr.send (nulo);3. Obtenha as informações do cabeçalho da solicitação e as informações correspondentes, ligue para o método getResponseHeader () getAllResponseHeaders ()
var xhr = createxhr (); // xhr.readyState representa o status atual da solicitação/resposta e 4 representa que todos os dados de resposta foram aceitos // além disso, desde que o valor do XHR.ReadyState mude, o XHR.onReadyStechange será acionado xhr.onreadyStechange = () (if (xhr.readhange xhr.status <300) || xhr.status == 304) {// Obtenha o time de conteúdo do cabeçalho da resposta var conexão = xhr. // alerta (conexão); // text/plana // obtenha todas as informações de resposta var all = xhr.getAllResponseHeaders (); alerta (tudo); } else {alert ("A solicitação não teve sucesso:" + xhr.status); }}}}; xhr.open ("get", "exemplo.txt", true); xhr.send (nulo);6. Obtenha solicitação. Já discutimos o método de solicitação de get antes. Agora vamos expandi -lo e adicionar alguns parâmetros à solicitação GET.
/ ** URL: URL sem nome de solicitação: Valor da chave da solicitação: Valor da solicitação Retorno: URL com a sequência de solicitação*/ função addUrlParam (url, nome, valor) {url += (url.indexOf ("?") == -1? "?" ":" & "); url + = codeuricomponent (nome) + "=" + codeuricomponent (valor); Retornar URL; } var xhr = createxhr (); xhr.onReadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ProSonsext); } else {alert ("A solicitação não teve sucesso:" + xhr.status); }}}}; var url = "exemplo.txt"; url = addurlparam (url, "nome", "zhang"); url = addurlparam (url, "idade", "23"); // O URL solicitado se torna: Exemplo.txt? Nome = Zhang & Age = 23 XHR.OPEN ("Get", URL, True); xhr.send (nulo);7. Solicitação de postagem
1. Análise de caso: Em seguida, vamos discutir o aplicativo AJAX que envia solicitações no método POST, ou seja, o registro do usuário e o prompt será retornado com base no seu nome de usuário registrado.
2. Etapas de implementação
1) Primeiro, deve haver uma página registrada (é claro, é muito simples aqui) Ajax.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Untitled Document</title> <style> </style> </head> <body> <form name="myForm" method="post"> Name: <input type="text" name="username" /><label id = "userlabel"> insira o nome de usuário </cretwle> <br/> senha: <input type = "senha" name = "senha"/> <br/> <input type = "submit" value = "login"/> <bript/> </form> <script src = "eventUtil.js"> </script> src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) Então, é claro, a parte JavaScript
①Eventutil.js, aqui está apenas uma lista das peças de escuta do evento
var eventUtil = {addEvent: function (elemento, tipo, manipulador) {if (element.addeventListener) {element.addeventListener (tipo, manipulador, false); } else if (element.attachevent) {element.attachevent ("on" + tipo, manipulador); }}}}②Serialize.js: formar serialização
function serialize (form) {var partes = [], campo = null, i, len, j, optlen, opção, optValue; for (i = 0, len = form.Elements.Length; i <len; i ++) {field = form.Elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.lengthing; j <optlen; j ++) {option = field.options [j]; if (option.Selected) {optValue = ""; if (option.hasattribute) {optValue = (option.hasattribute ("value")? option.value: option.text); } else {optValue = (option.attributes ["value"]. especificado? option.value: option.text); } partes.push (codeuricomponent (field.name) + "=" + codeuricomponent (optValue)); } } } quebrar; case indefinido: // conjunto de campo "arquivo": // case de entrada de arquivo "envie": // envio de botão "redefinir": // capa de botão Redefinir "botão": // quebra de botão personalizada; Case "Radio": // Case de botão de rádio "Caixa de seleção": // Caixa de seleção if (! Field.Checked) {Break; } /* Execute a operação padrão* /default: // descontém os campos de formulário sem nomes if (field.name.length) {parts.push (codeuricomponent (field.name) + "=" + codeuricomponent (field.value)); }}} retorna partes.join ("&"); }③ajax.js é a função createxhr () acima e não será listada aqui.
④ajaxdo.js, o arquivo principal, é a parte da operação do nosso nome, que é escrito aleatoriamente.
var form = document.forms [0]; // obtenha formulário var userName = form.Elements ['nome de usuário']; // nome de usuário var userLabel = document.QuerySelector ("#userLabel"); // tag de tag eventutil.addevent (nome de usuário, "blugus", function () {var xhr = createxhr (); xhr.onreadyStateChange = function () {if (xhr.readystate == 4) {if (xhr.status> = 200 && xhr.status <300) {if (xhr.status> = 200 && xhr.status <3) XHR.PONSETEXT; Userlabel.firstchild.data = "Desculpe, este usuário já existe"; "Application/x-www-form-urlecoded");3. Parte de melhoria: todo mundo já viu. Quando enviamos o formulário agora, serializamos o formulário. O tipo formData é definido para isso no XMLHTTPREQUEST Nível 2, que serializará automaticamente o formulário para nós e não precisamos escrevê -lo.
Nós apenas movemos parte do código
// ... O código omitido aqui é consistente com a solicitação acima // POST SOLD XHR.OPEN ("POST", "Dome.php", true); // Ele só precisa ser alterado aqui para substituir a função anterior xhr.send (new FormData (form));8. Outras partes (entendam porque a compatibilidade não é suficiente)
1. Configuração do tempo limite
xhr.open ("get", "exemplo.txt", true); xhr.timeout = 1000; // Defina o tempo limite para 1 segundo (apenas para ie8+) xhr.ontimeout = function () {alert ("a solicitação não retornou em um segundo."); }; xhr.send (nulo);2. Método Overidemimetype (), o tipo retornado pelo servidor
var xhr = createxhr (); xhr.open ("get", "exemplo.txt", true); xhr.Overridemimetype ("text/xml"); // O anterior era texto/xhr.send (nulo);3. Eventos de progresso
1. Carregue o evento, acionado enquanto o navegador receber as informações do servidor.
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.Responsetext); } else {alert ("A solicitação não teve sucesso:" + xhr.status); }}; xhr.open ("get", "exemplo.txt", true); xhr.send (nulo);2. Evento de progresso, acionado periodicamente durante o navegador que recebe novos dados
var xhr = createxhr (); xhr.onProgress = function (event) {var divstatus = document.getElementById ("status"); // Calcule a porcentagem de dados que foram recebidos da resposta se (event.lengthComputable) {divstatus.innerhtml = "recebido" + event.position + "de" + event.totalsize + "bytes"; }}; xhr.open ("get", "altevents.php", true); xhr.send (nulo);O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.