Ajax significa "JavaScript Assíncrono e XML" e refere-se a uma tecnologia de desenvolvimento web para a criação de aplicativos web interativos. A tecnologia Ajax é uma coleção de todas as tecnologias atualmente disponíveis em navegadores por meio de scripts JavaScript. Ajax usa todas essas tecnologias de uma nova maneira, revitalizando o antigo estilo B/S de desenvolvimento Web.
Entre as tecnologias Ajax, a tecnologia principal é XMLHttpRequest. Seu nome original é XMLHTTP. Foi lançado pela primeira vez pela Microsoft no navegador IE5.0 em 1999 para atender às necessidades dos desenvolvedores. Mais tarde, esta tecnologia foi denominada XMLHttpRequest pela especificação acima. Isto é o que torna a tecnologia Ajax única. Resumindo, XMLHttpRequest fornece um meio para scripts JavaScript em execução no navegador se comunicarem com o servidor dentro da página. O JavaScript na página pode obter dados do servidor ou enviar dados ao servidor sem atualizar a página. O surgimento do XMLHttpRequest oferece uma nova possibilidade para o desenvolvimento da Web e até muda completamente a visão das pessoas sobre o que consistem os aplicativos da Web. Ele nos permite fazer desenvolvimento web de uma maneira completamente nova e fornecer aos usuários uma melhor experiência interativa.
Ao contrário do desenvolvimento Web tradicional, o Ajax não visualiza aplicações Web de uma forma estática baseada em páginas. Da perspectiva do Ajax, um aplicativo Web deve consistir em um pequeno número de páginas, cada uma delas sendo, na verdade, um aplicativo Ajax menor. Cada página inclui alguns componentes Ajax desenvolvidos em JavaScript. Esses componentes usam o objeto XMLHttpRequest para se comunicar com o servidor de forma assíncrona. Após obter os dados necessários do servidor, eles usam a API DOM para atualizar parte do conteúdo da página. Portanto, existem três diferenças principais entre aplicativos Ajax e aplicativos Web tradicionais:
1. Comunique-se com o servidor dentro da página sem atualizar a página inteira.
2. Use o modo assíncrono para se comunicar com o servidor, sem interromper a operação do usuário e tenha recursos de resposta mais rápidos.
3. O aplicativo consiste em apenas algumas páginas. A maioria das interações é concluída dentro da página e não há necessidade de alternar a página inteira.
Pode-se ver que o Ajax torna os aplicativos da Web mais dinâmicos, traz maior inteligência e fornece aos componentes da UI do Ajax recursos expressivos ricos. Esse novo tipo de aplicativo da Web é chamado de aplicativo RIA (Rich Internet Application).
A frente contém algumas informações sobre a introdução do AJAX que encontrei na Internet para ajudar os leitores que não conhecem a tecnologia AJAX a entender a tecnologia AJAX o mais rápido possível. A seguir, apresentarei a vocês algumas tecnologias e técnicas AJAX que usei. o processo de desenvolvimento real.
A coisa mais importante ao usar a tecnologia AJAX é criar um objeto XMLHttpRequest. Há muitas informações sobre como criar esse objeto na Internet.
função createXMLHttpRequest() {
var xmlhttp;
tentar {
xmlhttp = novo ActiveXObject('Msxml2.XMLHTTP');
} pegar(e) {
tentar {
xmlhttp = novo ActiveXObject('Microsoft.XMLHTTP');
} pegar(e) {
tentar {
xmlhttp = novo XMLHttpRequest();
} pegar(e) {
alert("Falha ao criar objeto XMLHttpRequest!");
}
}
}
retornar xmlhttp;
}
Abaixo listarei alguns exemplos e algumas coisas que podem ser aprendidas através desses exemplos.
O trecho de código a seguir é um exemplo de como verifico se o item já existe no banco de dados ao adicionar um item específico.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
função do_verify() {
var segmento10 = document.mainFrm.segment10.value;
var inventárioItemId = document.mainFrm.inventoryItemId.value;
// alerta(segmento10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventárioItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //Existem também dois métodos de transmissão de dados: GET e POST, mas quando o método é POST, a seguinte frase deve ser escrita
xmlHttp.setRequestHeader('Tipo de conteúdo', 'aplicativo/x-www-form-urlencoded');
xmlHttp.send(nulo);
}
função handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "bloco"
document.mainFrm.segment10.focus();
} outro {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} outro {
alerta(xmlHttp.status);
}
}
}
O código de fundo é:
boolean success = itemDAO.doVerifyItem(); //doVerifyItem é o método principal para verificar se o item especificado existe no banco de dados. Se o item já existir, este método retornará TRUE.
PrintWriter out = res.getWriter();
se (sucesso) {
out.print("S");
}
fora.flush();
out.close();
}