Ajax (assíncronojavascriptandxml) javascript assíncrono e xml.
É para resolver as deficiências do modelo "enviar solicitação-aguardar resposta" em aplicações web tradicionais (após enviar a solicitação, o navegador só pode aguardar a resposta do servidor. O usuário não pode realizar outras operações. Após o navegador enviar a resposta. solicitação, descartará a página inteira e aguardará o servidor retornar uma nova página, ou seja, a quantidade de dados interagidos entre o navegador e o servidor é muito grande e os dados não podem ser obtidos sob demanda). A essência desta tecnologia é: de forma assíncrona através de um objeto (XmlHttpRequest) embutido no navegador. Envie uma solicitação ao servidor.
O chamado assíncrono significa que o navegador não abandona a página inteira, ou seja, não envia dados ao servidor por meio do envio do formulário. Após o servidor processar a solicitação, ele retorna os dados ao objeto XmlHttpRequest, e os dados. no XmlHttpRequest pode ser obtido através de javascript. Em seguida, use esses dados para atualizar a página. Durante todo o processo, o usuário não precisa esperar uma resposta do servidor.
Descrição: Tecnologia de transmissão assíncrona de páginas da web. Um método para se comunicar com o servidor sem atualizar a página inteira. Enquanto aguarda a transmissão da página da web, o usuário ainda pode interagir com o sistema e a página pode atualizar o conteúdo sem atualizar. O uso razoável pode permitir que seja melhor e mais conveniente para os usuários, mas não abuse.
Síncrono e assíncrono
A sincronização refere-se ao método de comunicação no qual o remetente envia dados e espera que o destinatário envie uma resposta antes de enviar o próximo pacote de dados.
Por exemplo: Sincronização: enviar solicitação -> aguardar o processamento do servidor -> retornar após o processamento. Durante este período, o navegador do cliente não pode fazer nada. resposta e, em seguida, envia o próximo método de comunicação de pacote de dados.
Por exemplo, assíncrono: a solicitação é acionada por um evento -> processada pelo servidor (o navegador ainda pode fazer outras coisas neste momento) -> processada
Objeto importante do AjaxXMLHttpRequest
Objeto Javascript importante, por meio do qual podem ser feitas solicitações ao servidor. As solicitações podem ser feitas por meio de Javascript. Se forem feitas várias solicitações, vários objetos XHR são necessários.
Como criar um objeto XmlHttpRequest
função getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != 'indefinido') {
//navegador não-ie
xmlHttpRequest = novo XMLHttpRequest();
}outro {
//ou seja, navegador
xmlHttpRequest = novo ActiveXObject('Microsoft.XMLHttp');
}
retornar xmlHttpRequest;
}
ou
função createXmlHttpRequest(){
var xmlHttpRequest = null;
if(janela.ActiveXObject){
xmlHttpRequest = novo AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = novo XMLHttpRequest();
}
}
Propriedades importantes do objeto xmlHttpRequest.
responseXml: Obtenha os dados xml da resposta do servidor
status: Obtenha o código de status retornado pelo servidor (como 200)
readyState: obtém o status da comunicação entre xmlHttpRequest e o servidor (0, 1, 2, 3, 4, respectivamente descrevendo diferentes estados).
(Não inicializado): O objeto foi criado, mas não foi inicializado (o método aberto ainda não foi chamado)
(Inicialização): O objeto foi criado e o método send ainda não foi chamado.
(Enviar dados): O método de envio foi chamado, mas o status atual e o cabeçalho http são desconhecidos
(Transmissão de dados em curso): Dados parciais foram aceites.
(Fim da resposta): Neste ponto, os dados podem ser obtidos através de responseText/responseXml.
Um exemplo de aplicativo implementado por uma pessoa usando Ajax
Captura de tela do sistema
Descrição do sistema:
Diagrama de estrutura do sistema
Exiba a página inicial Register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<cabeça>
<title>Registro de usuário</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</head>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table bordercolor="gray" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">Registro de usuário</font>
<font color="gray">[Descrição do módulo: verificação de nome de usuário, termos de serviço usam processamento assíncrono Ajax, geração de servidor de código de verificação]</font>
</td>
</tr>
<tr>
<td alinhar="direita">
nome de usuário:
</td>
<td>
<input type="text" name="nome de usuário" id="nome de usuário" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * O nome de usuário consiste em letras, números e sublinhados.</span>
</td>
</tr>
<tr>
<td alinhar="direita">
senha:
</td>
<td>
<input type="senha" nome="senha" id="senha">
<span style="color:orange" id="pwdMsg" > * O comprimento da senha é de 6 a 8 caracteres.</span>
</td>
</tr>
<tr>
<td alinhar="direita">
Confirme sua senha:
</td>
<td>
<input type="senha" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * Confirme a senha para garantir que você não cometeu nenhum erro ao definir a senha</span>
</td>
</tr>
<tr>
<td alinhar="direita">
Correspondência:
</td>
<td>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * Digite seu endereço de e-mail habitual para que possamos entrar em contato com você.</span>
</td>
</tr>
<tr>
<td alinhar="direita">
Código de verificação:
</td>
<td>
<input type="text" id="checkcode">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Código de verificação-->
<a href="javascript:;" onclick="getCheckcode()">Não consigo ver claramente, altere outro</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td alinhar="direita">
Termos de Serviço:
</td>
<td>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td alinhar="direita">
</td>
<td>
<input type="submit" value="Concorde com os termos e registre-se"/>
</td>
</tr>
</tabela>
<div alinhar="centro">
Copyright (c) 2013 Su Ruonian ( <a href="mailto:[email protected]">Entre em contato conosco:[email protected]</a> )
corporação Todos os direitos reservados.
</div>
</form>
</body>
</html>
/*
Crie um método para obter o objeto xmlHttpRequest
*/
função getXmlHttpRequest(){
var xmlHttpRequest = null;
if((typeof XMLHttpRequest) != 'indefinido'){
/*Navegadores não-IE criam objetos XMLHttpRequest*/
xmlHttpRequest = novo XMLHttpRequest();
}outro{
/*Navegador IE cria objeto XMLHttpRequest*/
xmlHttpRequest = novo ActiveXObject('Microsoft.XMLHttp');
}
retornar xmlHttpRequest;
}
/*
Evento de resposta do código de verificação
*/
função getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
Usando Ajax para obter termos de serviço
*/
função getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
//Resolva o problema de codificação chinesa ao enviar no modo get. Use encodeURI(url).true para indicar que a solicitação é enviada de forma assíncrona e addTimestamp(url) evita o cache do navegador.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Tipo de Conteúdo","aplicativo/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=função(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}outro{
//Erro no sistema.
item.value="erro do sistema";
}
}outro{
//Verificação de exibição...
item.value="carregando...";
}
};
xmlHttpRequest.send(nulo);
}
/*
Use o método get para verificar
*/
função getValidate(){
var nome de usuário = document.getElementById("nome de usuário");
var url = "validatename.do?username=" + nomedeusuário.valor;
//Resolva o problema de codificação chinesa ao enviar no modo get. Use encodeURI(url).true para indicar que a solicitação é enviada de forma assíncrona e addTimestamp(url) evita o cache do navegador.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//Chama o método para verificar o status do retorno
xmlHttpRequest.onreadystatechange=retorno de chamada;
xmlHttpRequest.send(nulo);
}
/*
Use o método post para verificar
*/
função postValidate(){
var nome de usuário = document.getElementById("nome de usuário");
var url = "validatenome.do";
//true significa usar um método assíncrono para enviar a solicitação. O padrão é true e o método de solicitação pode ser get, post, put, delete.
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Tipo de Conteúdo","aplicativo/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=retorno de chamada;
//Se houver vários parâmetros, use o símbolo & para vincular pares de valores-chave e escape é usado para resolver problemas chineses
xmlHttpRequest.send('nomedeusuário=' + escape(nomedeusuário.valor));
}
/*
Método de retorno de status de monitoramento
*/
retorno de chamada de função(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}outro{
//Erro no sistema.
innerHtmlMsg("erro");
}
}outro{
//Verificação de exibição...
innerHtmlMsg("verificando");
}
}
/*
Adicione carimbo de data/hora para evitar o cache do navegador. O cache do navegador armazena em cache apenas o método get.
*/
função addTimestamp(url){
if(url.indexOf("?")!=-1){
//Se houver parâmetros
return url+"×tamp=" + new Date().valueOf();
}outro{
//sem parâmetros
return url+"?timestamp=" + new Date().valueOf();
}
}
function innerHtmlMsg(mensagem){
var checkMsg = document.getElementById("checkMsg");
if(mensagem=='existe'){
//Nome de usuário existe
checkMsg.innerHTML= "<font color='red'>* Desculpe, o nome de usuário já existe.</font>";
}
if(mensagem=='noexiste'){
//Nome de usuário pode ser usado
checkMsg.innerHTML= "<font color='green'>* Parabéns, o nome de usuário está disponível.</font>";
}
if(mensagem=='verificando'){
//Verificação do sistema
checkMsg.innerHTML= "<font color='#0099aa'>* O sistema está verificando dados...</font>";
}
if(mensagem=='erro'){
//Erro no sistema
checkMsg.innerHTML= "<font color='red'>Falha no sistema, verifique a rede ou <a href='#'>Entre em contato conosco</a></font>";
}
}
} /* Define a largura geral e o estilo da borda da tabela e define o estilo de todo o texto na tabela */
.esquerda{
peso da fonte: 500;
cor:#708899;
preenchimento à direita: 20px;
cor de fundo: #D6ECF5;
}
.inpt {
borda:sólido #92CEDB 1px;
largura: 210px;
altura: 22px;
margem esquerda: 10px;
}
.certo{
margem superior: 20px;
cor:#708899;
tamanho da fonte: 12px;
}
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<parâmetro de inicialização>
<param-name>rulesfilepath</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</servlet>
<mapeamento de servlet>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<lista de arquivos de boas-vindas>
<arquivo de boas-vindas>regist.jsp</arquivo de boas-vindas>
</welcome-file-list>
</web-app>
importar java.awt.Color;
importar java.awt.Font;
importar java.awt.Graphics;
importar java.awt.image.BufferedImage;
importar java.util.HashMap;
importar java.util.Map;
importar java.util.Random;
/**
*
* @versão: 1.1
*
* @autor: Su Ruonian<a href="mailto:[email protected]">Enviar e-mail</a>
*
* @desde: 1.0 Tempo de criação: 20/01/2013 16:26:52
*
* @função: TODO
*
*/
classe pública CheckCodeImageUtil {
string final estática privada [] caracteres = { "0", "1", "2", "3", "4", "5", "6",
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };
private static final int SIZE = 4; //O número de caracteres no código de verificação
private static final int LINES = 4; //número de linhas de interferência
private static final int WIDTH = 110; //largura da imagem do código de verificação
private static final int HEIGHT = 40; //Altura da imagem do código de verificação
private static final int FONT_SIZE = 21; //Tamanho da fonte no código de verificação
/**
* Gerar código de verificação
*
* @return Mapa<valor do código de verificação, imagem do código de verificação>
*
*/
public static Map<String,BufferedImage> creatCheckImage(){
//Salva a string que gera o valor verdadeiro do código de verificação
Buffer StringBuffer = new StringBuffer();
//Objeto de imagem personalizado
Imagem BufferedImage = novo BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
Gráficos gráficos = image.getGraphics();
gráficos.setColor(Color.WHITE);
gráficos.fillRect(0, 0, LARGURA, ALTURA);
Aleatório aleatório = new Aleatório();
//desenha caracteres aleatórios
for(int i=0; i<TAMANHO; i++){
//Obtém um elemento do conjunto de caracteres definido
int rand = random.nextInt(chars.length);
gráficos.setColor(randomColor());
graphics.setFont(nova Fonte(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); //Salve a string gerada no buffer e use-a para comparar com o valor inserido pelo usuário quando obtido no futuro.
}
//Desenha linhas de interferência
for(int i=1;i<=LINHAS;i++){
gráficos.setColor(randomColor());
gráficos.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
if(i==LINHAS){
graphics.setFont(new Font(null,Font.ITALIC,13));
gráficos.setColor(Color.CINZA);
graphics.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), imagem);
mapa de retorno;
}
/**
* A cor será gerada imediatamente
* @retornar
*/
public static Cor randomColor(){
Aleatório aleatório = new Aleatório();
Cor cor = new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256));
retornar cor;
}
}
importar java.awt.image.BufferedImage;
importar java.io.BufferedReader;
importar java.io.ByteArrayInputStream;
importar java.io.ByteArrayOutputStream;
importar java.io.File;
importar java.io.FileReader;
importar java.io.FileWriter;
importar java.io.IOException;
importar java.io.InputStream;
importar java.io.PrintWriter;
importar java.util.List;
importar java.util.Map;
importar java.util.Vector;
importar javax.imageio.ImageIO;
importar javax.servlet.ServletException;
importar javax.servlet.ServletOutputStream;
importar javax.servlet.http.HttpServlet;
importar javax.servlet.http.HttpServletRequest;
importar javax.servlet.http.HttpServletResponse;
importar com.sun.image.codec.jpeg.JPEGCodec;
importar com.sun.image.codec.jpeg.JPEGImageEncoder;
importar com.sun.imageio.plugins.common.ImageUtil;
importar com.webapp.util.CheckCodeImageUtil;
classe pública UserServlet estende HttpServlet {
lista privada<String> lista_de_usuários;
string privada txtFilePath = null;
public void init() lança ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
//Simula banco de dados
lista de usuários = new Vector<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
public void doGet (solicitação HttpServletRequest, resposta HttpServletResponse)
lança ServletException, IOException {
doPost(solicitação,resposta);
}
public void doPost (solicitação HttpServletRequest, resposta HttpServletResponse)
lança ServletException, IOException {
String uri = request.getRequestURI();
Caminho da string = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatenome")){
request.setCharacterEncoding("utf-8");
resposta.setContentType("text/html;charset=utf-8");
tentar {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//Sistema de simulação gera teste de exceção
/*se(1==2){
lançar new ServletException("algum erro");
}*/
String nome de usuário = request.getParameter("nome de usuário");
System.out.println("nome de usuário:" + nome de usuário);
//Simula consulta de dados do usuário
booleano existe = userList.contains (nome de usuário);
se(existir){
resposta.getWriter().print("existe");
}outro{
resposta.getWriter().print("noexiste");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
resposta.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
Arquivo arquivo = new Arquivo(filePath);
Buffer StringBuffer = new StringBuffer();
tentar {
Leitor BufferedReader = novo BufferedReader(novo FileReader(arquivo));
String tmp = "";
while((tmp = leitor.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
leitor.close();
} catch (Exceção e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
resposta.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
resposta.setContentType("imagem/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
String chave = (String)map.keySet().iterator().next();
request.getSession().setAttribute("código",chave);
System.out.println("checkcode = " + request.getSession().getAttribute("código"));
Imagem BufferedImage = map.get (chave);
ImageIO.write(imagem, "jpeg", resposta.getOutputStream());
}
}
}