1. Introdução ao Ajax
O Ajax é considerado a abreviação de (JavaScript assíncrono e XML), e a tecnologia que permite ao navegador se comunicar com o servidor sem atualizar a página atual é chamada AJAX.
Por exemplo: pesquisa do Baidu, mapa em tempo real, etc. No modelo AJAX, os dados são transmitidos independentemente entre o cliente e o servidor. O servidor pode atualizar os dados sem atualizar a página inteira;
2. Diagrama de princípios de trabalho de Ajax
3. Os métodos correspondentes de envio e recebimento de Ajax
1. O método correspondente para enviar uma solicitação
1) Função de manuseio de eventos ONREADESTATECHANGE: Esta função é acionada pelo servidor e não pelo usuário. Cada vez que a propriedade ReadyState muda, o evento OnreadyStatechange será acionado.
2) aberto (Método, URL, assíncronizado): O Open () do objeto XmlHttPrequest permite que o programa envie solicitações com um servidor de chamada AJAX. O tipo de solicitação de método pode ser "Get" ou "Post", e o URL é uma string de caminho. Sysnchronized indica se a solicitação deve ser transmitida de forma assíncrona.
3) Send (dados): os dados são uma string que também será passada para o servidor. Se a solicitação "Get" for selecionada, os dados serão nulos.
2. Receba o método correspondente
1) ReadyState: Representa o estado atual do Ajax, representado por um valor numérico, 0 representa a inicialização, 1 representa o carregamento, 2 representa o carregamento, 3 representa o servidor está enviando uma resposta, 4 representa a resposta que foi enviada e, quando a solicitação for concluída, cada navegador definirá o valor do Ready para 4;
2) Status: Como no Javaweb, 404 não encontrou a página, 403 proíbe o acesso, 500 Erro do servidor interno, 200 tudo é normal, 304 não foi modificado, no objeto XMLHTTPrequest, o código de status enviado pelo servidor é salvo no atributo de status. Através desse valor, podemos garantir que o servidor tenha enviado uma resposta bem -sucedida;
3) ResponseText: Contém os dados enviados do servidor, que geralmente é HTML, XML ou texto comum. Quando o valor do ReadyState é 4 e o status é 200, o atributo RespoteText só pode ser usado. Na superfície, a solicitação de Ajax terminou. Se o servidor retornar XML, os dados serão armazenados no ResponseXML.
4. Demonstração de código (imite a caixa de pesquisa do Baidu)
1. Crie um projeto Javaweb (a estrutura do diretório do projeto é a seguinte)
2. SearchServlet.java
pacote cn.jon.ajax; importar java.io.ioException; importar java.util.list; importar javax.servlet.servletexception; importar javax.servlet.http.httpServlet; importar javax.servlet.http.httpServletRequest; importar javax.servlet.http.httpServletResponse; importação net.sf.json.jsonArray; importar cn.jon.ajax.data.datautils; classe pública SearchServlet estende httpServlet {private estático final serialversionuid = 1L; Public void Doget (solicitação httpServletRequest, resposta httpServletResponse) lança servletexception, ioexception {// Defina o formato de saída da solicitação e resposta ao UTF-8 request.SetcharacterEncoding ("UTF-8"); Response.Setcharacterencoding ("UTF-8"); String Keyword = request.getParameter ("palavra -chave"); if (palavra -chave! = null) {dataUtils dataReSource = new Datautils (); List <String> List = Dataaresource.findDatalist (palavra -chave); //System.out.println (jsonArray.FromObject (list) .toString ()); Response.getWriter (). Write (jsonArray.FromObject (List) .ToString ()); }} public void DoPost (solicitação httpServletRequest, httpServletResponse resposta) lança servletexception, ioexception {doget (solicitação, resposta); }} 3. Datautils.java, leia dados em arquivo de recursos
pacote cn.jon.ajax.data; importar java.io.bufferedReader; importar java.io.ioException; importar java.io.inputStream; importar java.io.inputStreamReader; importar java.util.arraylist; importar java.util.list; classe pública Datautils {Private Static List <String> Datalist = new ArrayList <String> (); public static final string url = "/test.txt"; estático {readResource (url); // datalist.add ("aa"); // datalist.add ("Ajax"); // datalist.add ("afinal"); // datalist.add ("bb"); } // public static void readResource (string url) {inputStream is = null; InputStreamReader isr = null; BufferErader Br = null; Linha de string = null; tente {is = datautils.class.getClassLoader (). getResourceasStream (url); isr = new inputStreamReader (IS); Br = new BufferredReader (ISR); linha = BR.readline (); while (null! = line) {if (! line.isempty ()) {datalist.add (line); } linha = Br.readline (); } // while} catch (ioexception e) {e.printStackTrace (); } finalmente {if (null! = Br) {tente {Br.Close (); } catch (ioexception e) {}} if (null! = isr) {try {isr.close (); } catch (ioexception e) {}} if (null! = is) {try {is.close (); } catch (ioexception e) {}}}} public list <tring> findDatalist (string str) {list <string> data = new ArrayList <String> (); para (string sdata: datalist) {if (sdata.contains (str)) {data.add (sdata); }} // para dados de retorno; }} 4. Index.jsp, exibição de página
<%@ página linguagem = "java" import = "java.util. id = "mydiv"> <img src = "img/baidu.png"> <!-caixa de entrada-> <input type = "text" size = "50" id = "keyword" onKeyup = "getMorEContents ()" onBlur = "keyblur ()" em "" "getMorecontents") "/" Value = "Baidu"/> <!-A seguir, é apresentada a área de exibição de conteúdo-> <div id = "popdiv"> <tabela id = "content-table" bgcolor = "#ffffafa" CellPacing = "0" CellPadding = "0"> <tbody id = "contentable_body> <!-o que é dinâmico que é dinâmico </html>
5. My.js, a parte central do Ajax
var xmlhttp; // 1. Função da função para obter as informações associadas da função de conteúdo de entrada do usuário getMorEcontents () {// primeiro obtenha a entrada do usuário var content = document.getElementById ("palavra -chave"); if (content.value == "") {// Quando a caixa de entrada estiver vazia, limpe os dados anteriores clearContent (); retornar; } //alert(content.value); // 2. Em seguida, você deseja enviar o conteúdo de entrada do usuário para o servidor, porque usamos o AJAX para enviar dados de forma assíncrona; portanto, precisamos usar o objeto xmlHttp // xmlHttp = obter o objeto xmlHttp; xmlhttp = createxmlHttp (); // alerta (xmlHttp); // 3. Para enviar dados para o servidor, primeiro defina o endereço de um servidor, var url = "Search? Keyword ="+Escape (Content.value); // true significa que o script JavaScript continuará sendo executado após o método send (), sem aguardar uma resposta do servidor. xmlhttp.open ("get", url, true); // xmlhttp liga um método de retorno de chamada. Esse método de retorno de chamada será chamado quando o estado do XMLHTTP for alterado // XmlHttp State: 0-4, nós apenas nos preocupamos com 4 (completo), por isso é significativo chamar a função de retorno de chamada após a conclusão. xmlhttp.onreadyStatechange = retorno de chamada; // Os parâmetros já estão no URL, para que você não precise adicionar o parâmetro xmlHttp.send (null); } // Obtenha função do objeto xmlHttp createxmlHttp () {// var xmlhttp que é adequado para a maioria dos navegadores; if (window.xmlHttPrequest) {xmlHttp = new XmlHttPrequest (); } // Considere a compatibilidade do navegador if (window.activexObject) {xmlHttp = new ActivexObject ("microsoft.xmlhttp"); // Se o navegador possui objeto ActiveXObject, mas não possui parâmetro microsoft.xmlHttp if (! XmlHttp) {xmlHttp = new ActiveXObject ("msxml2.xmlHttp"); }} retornar xmlHttp; } // Função de retorno de chamada Função de chamada () {// 4 significa conclusão se (xmlHttp.readyState == 4) {// 200 significa resposta bem -sucedida do servidor, 404 significa não encontrado, 500 significa erro interno do servidor se (xmlHttp.status == 200) {// O texto é bem -sucedido e os dados correspondentes forem obtidos. var resultado = xmlHttp.ResponseText; // análise dos dados obtidos var json = avaliar ("("+resultado+")"); // Depois de obter esses dados, você pode exibir os dados dinamicamente. Exiba esses dados abaixo da caixa de entrada. // alerta (JSON); setContent (JSON); }}} // Defina a exibição de dados associados. Os parâmetros representam a função de dados associada SetContent (conteúdo) {// limpe os dados anteriores clearContent (); // defina a posição setLocaltion (); // primeiro obtém o comprimento dos dados associados para determinar quantos <tr> </tr> var size = contents.length; // Defina o conteúdo para (var i = 0; i <tamanho; i ++) {var nextNode = conteúdo [i]; // representa o elemento i-sh dos dados json var tr = document.createElement ("tr"); var td = document.createElement ("td"); td.setattribute ("borde", "0"); td.setattribute ("gbcolor", "#ffffafa"); // liga dois estilos para TD (eventos quando o mouse entra e se move) td.onMouseOver = function () {this.className = 'mouseOver'; }; td.onMouseOut = function () {this.className = 'mouseout'; }; td.OnClick = function () {// Este método implementa que, quando um dados relacionados é clicado com o mouse, os dados associados são automaticamente preenchidos na caixa de entrada. }; td.onMousedown = function () {// Quando o mouse clicar em dados associados, os dados serão adicionados automaticamente ao documento da caixa de entrada.getElementById ("palavra -chave"). value = this.innerText; }; // Quando o mouse estiver suspenso nos dados associados, ele será adicionado automaticamente à caixa de entrada/* td.onMouseOver = function () {this.className = 'mouseOver'; if (td.innerText! = null) document.getElementById ("palavra -chave"). value = this.innerText; } */// crie um nó de texto var text = document.createTextNode (nextNode); td.appendChild (texto); tr.appendChild (TD); Document.getElementById ("Content_Table_body"). ApndendChild (TR); }} // limpe a função de dados anterior clearContent () {var contentTableBody = document.getElementById ("content_table_body"); var size = contentTableBody.ChildNodes.Length; // Ao excluir, exclua de baixo para o topo para (var i = size-1; i> = 0; i-) {// Especifique a exclusão do I -th Child Node ContentTableBody.removeChild (contentTableBody.ChildNodes [i]); } // limpe a borda externa dos dados associados var popdiv = document.getElementById ("popdiv"). Style.border = "nenhum"; } // Quando a caixa de entrada perde foco, limpe a função de dados anterior KeywordBlur () {ClearContent (); } // Defina a posição da exibição da função de informação associada setLocaltion () {// A posição de exibição das informações associadas deve ser consistente com a caixa de entrada var content = document.getElementById ("palavra -chave"); var width = content.offsetWidth; // o comprimento da caixa de entrada var esquerd = content ["offsetleft"]; // a distância até a borda esquerda var top = content ["offsetTop"]+content.offSethEight; // a distância da parte superior (mais a altura da caixa de entrada) // obtém os dados da tela vardiv para a parte superior. popdiv.style.border = "cinza 1px sólido"; popdiv.style.left = esquerda+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; document.getElementById ("content-table"). style.width = width+"px"; } 6. My.css, estilo de controle
#mydiv {posição: absoluto; Esquerda: 50%; TOP: 50%; margem -esquerda: -200px; Margin -top: -120px; } #Button {Background-Color: #5566ee; } .mouseOver {Background: #708090; Cor: #fffafa; } .mouseout {background: #fffafa; Cor: #000000; }Nota: Este código vem do estudo do Mooc.com e fez melhorias. Espero que aqueles interessados possam se comunicar e aprender juntos.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.