Fundamentos do AjaxNesta lição do tutorial Ajax, você aprenderá ...

1. O Objetivo do Ajax.2. Como o Ajax funciona.3. Como criar cross-browser Ajax.4. Como enviar dados usando Head, Get e Post.

O AJAX termo é uma pseudo-sigla para "Asynchronous JavaScript And XML", (Ver nota) , mas agora é muito usado de forma mais ampla para cobrir todos os métodos de se comunicar com um servidor usando JavaScript. Como veremos, Ajax (Ver nota) nem sempre é assíncrona e nem sempre envolvem XML.

O Objetivo do AjaxO principal objetivo do Ajax é proporcionar um meio simples e padrão para uma página web para se comunicar com o servidor sem uma atualização de página completa. Para ilustrar isto, considere um simples formulário de registro.Você tem muito provável experimentou a frustração de ter que tentar vários nomes de usuário quando se inscrever para algum site novo. Você preencher todo o formulário, clique no botão enviar, aguarde um segundo ou assim, e em seguida, obter a mesma forma de volta com uma mensagem dizendo que o nome de usuário que você escolheu não está disponível. Você tenta outro mais fácil de lembrar nome de usuário e encontrá-lo também não está disponível.Você repetir isso várias vezes até que finalmente você escolhe alguns nome de usuário obscura. Este processo não seria tão ruim se você não tem que esperar a página inteira para atualizar cada vez que você tentou um novo nome de usuário. (Ver nota)Mas isso é um exemplo muito simples. Algumas aplicações web-based requerem constante interação com um banco de dados através de uma camada intermediária. Tomemos, por exemplo, uma interface para atualizar os registros de empregados. A maneira tradicional de se fazer isso é ilustrado abaixo.

Aplicação Web tradicionais1. Primeiro, o aplicativo mostra uma lista de funcionários para

escolher. (AjaxBasics / Demos / EmployeeAdmin.jsp)

2. Quando o usuário escolhe um empregado, o servidor retorna uma nova página (FIRST REFRESH) e um formulário é exibido. (AjaxBasics / Demos / EditEmployee.jsp)

3. O usuário pode então editar os dados de funcionários (por exemplo, alterar "Andrew" para "Andy") e enviar o formulário. O servidor então retorna a nova

página (REFRESH SEGUNDA). (AjaxBasics / Demos / EditEmployee.jsp)

4. Para voltar para a lista de funcionários para iniciar o processo de modificar dados de outro empregado, o usuário teria que clicar sobre o "Employee List" link (REFRESH TERCEIROS).

Uma Aplicação Web AjaxAjax faz este processo muito mais simples para o usuário. Records, e até mesmo campos individuais de um registro, pode ser editado um de cada vez, sem atualizações de página inteira. Este método é ilustrado abaixo.

1. Como com o método tradicional, a aplicação Ajax mostra uma lista de funcionários para escolher.(AjaxBasics / Soluções / EmployeeAdmin.html)

2. Quando o usuário escolhe um empregado, a página não recarregar. Em vez disso, uma chamada Ajax para o servidor é feita, o servidor retorna o

formulário HTML e JavaScript é usado para exibir o formulário na página.

3. O usuário pode então editar os campos do formulário. Cada vez que um campo de formulário perde o foco mudou a alteração é enviada para o servidor com Ajax, as atualizações do lado do servidor codificar os dados no banco de dados e envia de volta a lista atualizada dos funcionários para o navegador. JavaScript é novamente utilizado para exibir a lista actualizada na

página.

4. A lista de funcionários é atualizado para refletir as alterações feitas. Aviso "Andrew" foi alterado para "Andy" na lista. É exibida uma mensagem informando ao usuário que o banco de dados foi atualizado. (Ver nota)

Tudo isso é feito sem ter que fazer uma atualização completa ainda. Esta é a grande vantagem do Ajax.

O objeto XMLHttpRequestO mecanismo para o envio de dados para e recuperar dados do servidor com o Ajax é o objeto XMLHttpRequest.Infelizmente, os browsers modernos que suportam pedidos XMLHttp têm métodos diferentes para fazê-lo. Vamos examinar o método Mozilla (Ver nota) eo método do Internet Explorer e depois vamos ambos os métodos abstratos com uma única função definida pelo usuário.

Criando um objeto XMLHttpRequestMétodo Mozilla

O método Mozilla é o mais simples dos dois. Ele usa um construtor simples XMLHttpRequest () para criar o objeto.

Exemplo de código: AjaxBasics / Demos / CreateXMLHttpRequest-moz.html <html> <head> <title> XMLHttpRequest no Mozilla </ title> <script type="text/javascript"> Iniciar function () { tentar { xmlhttp = new XMLHttpRequest (); document.getElementById ("Conteúdo") innerHTML = "<h1> Usando Objeto XMLHttpRequest </ h1>." } catch (e) { document.getElementById ("Conteúdo") innerHTML = "<h1> XMLHttp não pode ser criado </ h1>".; } } </ Script> </ Head> <body> <a href="javascript:Start()"> Início </ a> <div id="Content"> </ div> </ Body> </ Html>

Explicação códigoEste código tenta criar um objeto XMLHttpRequest usando o XMLHttpRequest () construtor. Se conseguir, ele escreve "Usando objetos XMLHttpRequest" ao corpo da página. Se ele falhar, ele escreve "XMLHttp não pode ser criado!"

Método Internet ExploradorMicrosoft Internet Explorer usa um controle ActiveX para implementar um objeto XMLHttpRequest. Versões novas e melhoradas deste controle foram liberados ao longo do tempo, assim que o nosso código deve verificar a versão mais recente disponível na máquina do usuário e usar esse.

Exemplo de código: AjaxBasics / Demos / CreateXMLHttpRequest-ie.html <html> <head> <title> XMLHttpRequest no Internet Explorer </ title> <script type="text/javascript"> Iniciar a função () {var ieXmlHttpVersions = new Array (); ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2. XMLHttp.7.0 "; ieXmlHttpVersions [ieXmlHttpVersions.length] =" MSXML2.XMLHttp.6.0 "; ieXmlHttpVersions [ieXmlHttpVersions.length] =" MSXML2.XMLHttp.5.0 "; ieXmlHttpVersions [ieXmlHttpVersions.length] =" MSXML2.XMLHttp.4.0 "; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHTTP"; ieXmlHttpVersions

[ieXmlHttpVersions.length] = "Microsoft.XMLHTTP"; var i; for (i = 0; i <ieXmlHttpVersions.length; i + +) {try {var xmlhttp = new ActiveXObject (ieXmlHttpVersions [i]);. document.getElementById ("Conteúdo") innerHTML = "<h1> Usando" + ieXmlHttpVersions [i] + "</ h1 > "; break;} catch (exc) {alert (ieXmlHttpVersions [i] +" não é suportado. ");}} if (typeof xmlhttp ==" undefined ") document.getElementById (" Conteúdo ") <innerHTML =". h1> XMLHttp não pode ser criado </ h1> ";} </ script> </ head> <a <body> Iniciar href="javascript:Start()"> </ a> <div id="Content"> </ div> </ body> </ html>

Explicação códigoEste código cria um array contendo os nomes de todas as diferentes versões do Microsoft XMLHttp do controle ActiveX, começando com o mais recente. Em seguida, percorre o array e usa o primeiro controle disponível para criar um objeto xmlhttp. Assim que encontrar um, ele grava a versão sendo usada para o corpo da página. Se nenhuma das versões é suportado, ele escreve "XMLHttp não pode ser criado!"

Cross-browser Criação XMLHttpRequestO exemplo de código a seguir combina as duas anteriores em uma função que lida com a criação XMLHttpRequestem ambos os navegadores. Ele primeiro tenta o método Mozilla como é muito mais provável que o Internet Explorer irá eventualmente adotar este método (Ver nota) do que é que os navegadores Mozilla e outros suporte a controles ActiveX.

Exemplo de código: AjaxBasics / Demos / CreateXMLHttpRequest.html ---- ---- Código Omitida <script type="text/javascript"> Iniciar function () { tentar { var xmlhttp = new XMLHttpRequest (); document.getElementById ("Conteúdo") innerHTML = "<h1> Usando Objeto XMLHttpRequest </ h1>." } catch (ERR1) { ieXmlHttpVersions var = new Array (); ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "MSXML2.XMLHTTP"; ieXmlHttpVersions [ieXmlHttpVersions.length] = "Microsoft.XMLHTTP";

var i; for (i = 0; i <ieXmlHttpVersions.length; i + +) { tentar { var xmlhttp = new ActiveXObject (ieXmlHttpVersions [i]); document.getElementById ("Conteúdo") innerHTML = "<h1> Usando" + ieXmlHttpVersions [i] + "</ h1>."

break; } catch (ERR2) { alert (ieXmlHttpVersions [i] + "não é suportado."); } } }

if (typeof xmlhttp == "undefined") document.getElementById ("Conteúdo") innerHTML = "<h1> XMLHttp não pode ser criado </ h1>".; } </ Script> ---- ---- Código Omitida

Usando um objeto XMLHttpRequestEntão, agora que temos um objeto XMLHttpRequest criado, o que fazemos com ele? Nós a usamos para fazer pedidos HTTP. Para fazer isso, nós inicializar o objeto com o método open (), que recebe três argumentos.

XMLHttpRequest open () Argumentos Método

Método Descrição

Tipo de pedido String. Normalmente, POST, GET ou HEAD

URL String. A URL recepção do pedido.

AssíncronoBoolean. Se o pedido deve ser feito de forma assíncrona (true) ou síncrona (false).

A abrir típicas () chamada de método é mostrado abaixo. Xmlhttp.open ("GET", "Demo.xml", true);

Tipos de pedidoEmbora a especificação HTTP identifica vários métodos de solicitações HTTP (Ver nota) , o mais comumente suportado (e usados) são métodos GET, POST e HEAD.

CABEÇAO método HEAD é o menos usado dos três, entretanto, para pedidos simples, pode ser tudo que você precisa. Ele simplesmente retorna o meta-informação contida no cabeçalho HTTP. A chamada ficaria assim: Xmlhttp.open ("HEAD", "Demo.jsp", true);

E a resposta pode ter esta aparência: Servidor: Microsoft-IIS/5.1 X-Powered-By: ASP.NET Data: Fri, 03 Mar 2006 17:47:47 GMT Content-Type: text / xml Accept-Ranges: bytes Last-Modified: Fri, 03 Mar 2006 14:07:51 GMT ETag: "50c59dccb3ec61: 99E" Content-Length: 21

O pedido é enviado XMLHttpRequest como segue: xmlhttp.send (null);

Nós vamos explicar porque nulo é passado em apenas um momento.GET

O método GET é usado para enviar informações para o servidor como parte da URL. O servidor retorna as informações de cabeçalho mesmo que o método retorna HEAD, mas também retorna o corpo da mensagem (ie, o conteúdo da página). Quaisquer pares nome-

valor para ser processado pela página de recepção deve ser passado ao longo da querystring. A chamada ficaria assim: Xmlhttp.open ("GET", "Demo.jsp FirstName = Nat & Dunn LastName =?", true);

A resposta seria a mesma que a resposta mostrada para o método HEAD seguido pelo corpo da mensagem, que normalmente seria de texto simples, HTML ou XML.Mais uma vez, o pedido XMLHttpRequest é enviado da seguinte forma: xmlhttp.send (null);

POSTO método POST é usado para enviar informação como uma entidade fechada. A chamada ficaria assim: Xmlhttp.open ("POST", "Demo.jsp", true);

O cabeçalho de resposta é um pouco diferente na medida em que especifica que o conteúdo retornado não é armazenável em cache. Como com GET, o corpo da mensagem normalmente seria de texto simples, HTML ou XML.O pedido é enviado XMLHttpRequest como segue: xmlhttp.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded"); xmlhttp.send ("FirstName = Nat & Dunn LastName =");

Como você pode ver, com POST, primeiro precisamos definir o tipo de conteúdo para "application / x-www-form-urlencoded;". Isso informa ao servidor que esperar os dados do formulário. No método de envio, que incluem pares nome-valor. Estes pares nome-valor estão disponíveis para a página de recebimento para o processamento.Nada pode ser enviado desta forma com a cabeça e métodos GET, razão pela qual nulo foi passado nos exemplos anteriores.Veremos mais tarde que também podemos enviar dados em outros formatos, como XML-primas, utilizando o métodoPOST.

Pedidos assíncrona vs síncronaO argumento assíncrona quase sempre deve ser definido como verdadeiro. Afinal, esse é o "A" em Ajax. Chamadas síncronas forçar o browser a esperar por uma resposta do servidor antes de continuar. Isto deixa o usuário incapaz de interagir com o browser até que a resposta está completa. Solicitações assíncronas permitem que o navegador para continuar a processar o código enquanto espera por uma resposta.

Lidar com a RespostaQuando utilizar chamadas assíncronas, não podemos ter certeza de quando a resposta virá, por isso temos de escrever um código que aguarda a resposta e trata-lo quando ele chega. Fazemos isso com uma função de callback.Funções de callback são funções que são activados por um evento. No nosso caso, o evento que estamos procurando é uma mudança no estado da resposta xmlhttp. Este evento é capturado pela propriedade do objeto xmlhttp doonreadystatechange. Podemos atribuir uma função de retorno a esta propriedade da seguinte forma: xmlhttp.onreadystatechange = function () { / / Faz alguma coisa aqui }

A propriedade do objeto xmlhttp do readyState mantém o estado atual da resposta. Há cinco estados possíveis (0-4), que são descritos abaixo.

Valores da propriedade readyState

Estado Descrição

0 não inicializada

1 carregamento

2 carregado

Valores da propriedade readyState

Estado Descrição

3 interativo

4 completoEste uso de uma função inline pode ser novidade para você. Em JavaScript, as funções são objetos de primeira classe e pode ser atribuído a variáveis ou propriedades de outros objetos. Poderíamos também criar uma função chamada e atribuir essa função para xmlhttp.onreadystatechange.O arquivo de exemplo a seguir ilustra como o evento readystatechange é manipulado.

Exemplo de código: AjaxBasics / Demos / ReadyStateChange.html ---- ---- Código Omitida Iniciar function () { ---- ---- Código Omitida var ContentDiv = document.getElementById ("Conteúdo"); if (typeof xmlhttp == "undefined") { ContentDiv.innerHTML = "<h1> XMLHttp não pode ser criado </ h1>"; } outro { Xmlhttp.open ("HEAD", "Demo.xml", true); xmlhttp.onreadystatechange = function () { ContentDiv.innerHTML + = "Estado Ready:" + + xmlhttp.readyState "<br/>"; } xmlhttp.send (null); } } ---- ---- Código Omitida

Explicação códigoA saída será algo parecido com isso. Os estados reais pronto retornou dependerá de sua configuração.

Na prática, antes de fazer qualquer coisa com os dados de resposta xmlhttp, queremos garantir que oreadyState está completo (4), então colocamos uma condição dentro da nossa função para verificar o seguinte:

xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { / / Faz alguma coisa aqui } }

Agora estamos prontos para fazer algo com os dados retornados. Antes de olhar para um exemplo, vamos dar uma olhada nas propriedades e métodos do objeto xmlhttp, por isso sabemos o que está disponível para nós.

Propriedades do objeto XMLHttpRequest

Propriedade Descrição

onreadystatechange Especifica a função de callback para ser disparado quando o estado muda pronta.

readyState Contém o estado da resposta.

responseText Mantém o corpo da mensagem como uma string.

responseXML Mantém o corpo da mensagem como um objeto XML.

estado Detém o código de status retornado do servidor (por exemplo, 200 para o sucesso, 404 para página não encontrada, etc.)

statusText Contém o texto de status retornado do servidor.

Objeto XMLHttpRequest Métodos

Método Descrição

abort () Aborta a solicitação XMLHTTP.

getAllResponseHeaders () Recupera os valores de todos os cabeçalhos HTTP como uma string.

getResponseHeader (header) Recupera o valor do cabeçalho HTTP especificado como uma string.

open (método, URL, Async) Inicializa o objeto XMLHttpRequest.

send (postData) Envia a solicitação HTTP para o servidor.

setRequestHeader (valor de cabeçalho) Especifica o nome eo valor de um cabeçalho HTTP.

Uma aplicação comum é verificar a propriedade status para se certificar de que o pedido foi bem sucedida e, em seguida, para a saída do corpo da mensagem para uma div na página HTML. O arquivo de exemplo a seguir demonstra isso.

Exemplo de código: AjaxBasics / Demos / UsingXMLHttpRequest-Get.html ---- ---- Código Omitida outro { Xmlhttp.open ("GET", "Demo.jsp FirstName = Nat & Dunn LastName =?", true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { ContentDiv.innerHTML = xmlhttp.responseText; } } xmlhttp.send (null); } ---- ---- Código Omitida

Explicação código

Esta página simplesmente "copia" o texto de resposta (xmlhttp.responseText) e "cola" que em "Conteúdo" div na página.

Exercício: Ajax utilizando o método POSTDuração: 10 a 15 minutos.

Neste exercício, você irá modificar o código da última manifestação de enviar dados usando o método POST. Você vai precisar usar osetRequestHeader () para alertar o servidor para esperar os dados do formulário.

1. AjaxBasics abrir / Exercícios / UsingXMLHttpRequest Post.html em seu editor.2. Modificar o código para fazer a solicitação usando o métodoPOST mostrado

anteriormente .3. Testar sua solução em um navegador.

Exemplo de código: AjaxBasics / Exercícios / UsingXMLHttpRequest-Post.html <html> <head> <title> Pedido XMLHttpRequest Usando método GET </ title> <script type="text/javascript"> Iniciar function () { ---- ---- Código Omitida var ContentDiv = document.getElementById ("Conteúdo"); if (typeof xmlhttp == "undefined") { ContentDiv.innerHTML = "<h1> XMLHttp não pode ser criado </ h1>"; } outro { Xmlhttp.open ("GET", "Demo.jsp FirstName = Nat & Dunn LastName =?", true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) { ContentDiv.innerHTML = xmlhttp.responseText; } } xmlhttp.send (null); } } </ Script> </ Head> <body> <a href="javascript:Start()"> Início </ a> <div id="Content"> </ div> </ Body> </ Html>

Escrever todos os cabeçalhos de resposta para o final do div "Conteúdo" mesmo.Onde está a solução?

Exercício: Exibindo e atualizando registrosDuração: 30 a 40 minutos.

Neste exercício, você criará uma mini-aplicação para exibir e atualizar os registros de empregados. Os arquivos do lado do servidor já estão criados e grande parte do JavaScript é escrito para você. Você vai ter que terminar o Ajax porções do código.

1. AjaxBasics abrir / Exercícios / EmployeeList.jsp em seu editor de e revisar o código. Esta página retorna uma lista dos funcionários como links. Quando os links são clicados, o GetEmployeeForm (função) é chamado com EmployeeForm.jsp eo EmployeeID como parâmetros passados. O primeiro item da lista gerada é mostrado abaixo:2. <li>

3. <A href = "javascript: void (0)" 4. onclick = "GetEmployeeForm ('EmployeeForm.jsp',

1)"> Nancy Davolio </ a> </ Li>

5. AjaxBasics abrir / Exercícios / EmployeeForm.jsp em seu editor de e revisar o código. Esta página retorna um formulário preenchido com os dados do funcionário cujo id foi passado ao longo dos querystring. Para ver isto, em seu browser para navegar AjaxBasics / Exercícios / EmployeeForm.jsp? Eid = 1. O código retornado é mostrado abaixo:

<h2> Employee Editar </ h2> onsubmit="return <form false"> <table> <tr> <td> Nome: </ td> <input type = "text" name = value "FirstName" = "Nancy" onchange = "UpdateEmployee ('EditEmployee.jsp', 'Nome', this.value, 1);" /> </ td> </ tr> <tr> <td> Sobrenome: </ td> <td> <input type="text" name="LastName" value="Davolio" onchange=" UpdateEmployee('EditEmployee.jsp','LastName',this.value,1); "/> </ td> < / tr> <tr> <td> Título: </ td> <input type = "text" name = "Título" value = "Sales Representative" onchange = "UpdateEmployee ('EditEmployee.jsp', 'Título' , this.value, 1); "/> </ td> </ tr> <tr> <td> Extensão: </ td> <input type =" text "name =" Extensão "value =" 5467 "onchange =" UpdateEmployee ('EditEmployee.jsp', 'extensão', this.value, 1); "/> </ td> </ tr> </ table> </ form>

Como uma página independente, parece como se segue:

6. AjaxBasics abrir / Exercícios / EditEmployee.jsp em seu editor de e revisar o código. Esta página atualiza o banco de dados e redireciona para EmployeeForm.jsp para que o formulário será devolvido.

7. AjaxBasics abrir / Exercícios / Scripts / Ajax.js em seu editor de e revisar o código. Esta página contém apenas a função para criar o objeto XMLHttpRequest. A função é chamada createXHR ().

8. AjaxBasics abrir / Exercícios / EmployeeAdmin.html para edição. Este é o lugar onde você vai fazer o seu trabalho.

1. Na função GetEmployeeList () onde o comentário é: abrir um XMLHttpRequest usando o

método POST.

Use o passado em URL. Quando o estado das mudanças pedido,

chamar o método display (). Enviar o pedido.

2. No visor () função: Defina a

propriedade innerHTML de OutputDiv ao responseText do objeto xmlhttp retornado.

Teste a sua solução para esta peça, abrindo AjaxBasics / Exercícios / EmployeeAdmin.html no seu browser. Você deverá ver uma lista dos funcionários. Se você não fizer isso, verifique o seu GetEmployeeList () e display () funções.

3. Na função GetEmployeeForm (): Abra um XMLHttpRequest usando o

método POST. Use o passado em URL. Certifique-se de passar na

EmployeeID como "eid" na querystring.

Quando o estado das mudanças pedido, chamar o método display ().

Enviar o pedido.4. No UpdateEmployee (função):

Abra um XMLHttpRequest usando o método POST.

Use o passado em URL. Certifique-se de passar na

EmployeeID como "eid", o campo que está sendo alterado como "campo" eo valor novo campo como "valor" na querystring.

Quando o estado das mudanças pedido, chamar o métodoEmployeeUpdated ().

Enviar o pedido.

Exemplo de código: AjaxBasics / Exercícios / EmployeeAdmin.html <html> <head> Administração <title> Employee </ title> <link rel="stylesheet" type="text/css" href="Styles/Main.css"> <script type = "text / javascript" src = "Scripts / Ajax.js"> </ script> <script type="text/javascript" src="Scripts/Effects.js"> </ script> <script type="text/javascript"> var xmlhttp = createXHR ( ); var OutputDiv; GetEmployeeList função (URL) {OutputDiv = document.getElementById ("EmployeeList"); OutputDiv.innerHTML = "Carregando <h2> ...</ h2>"; / * Abre um XMLHttpRequest usando o método POST. Use o passado em URL. Quando o estado das mudanças pedido, chamar o método display (). Enviar o pedido. * Display função /} () {if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) {OutputDiv.style.display = "block"; if (xmlhttp.responseText.indexOf ("Failed") == 0 ) {OutputDiv.className = "Aviso"; OutputDiv.innerHTML = xmlhttp.responseText;} else {/ /. Defina a propriedade innerHTML de OutputDiv ao responseText do objeto xmlhttp}}} function GetEmployeeForm (URL, EID) {OutputDiv = document.getElementById ("FormDiv"); OutputDiv.innerHTML = Loading "..."; / * Abre um XMLHttpRequest usando o método POST. Use o passado em URL. Certifique-se de passar na EmployeeID como "eid" na querystring. Quando o estado das mudanças pedido, chamar o método display (). Enviar o pedido. * UpdateEmployee função /} (URL, campo

de valor,, EID) {/ * Abre um XMLHttpRequest usando o método POST. Use o passado em URL. Certifique-se de passar na EmployeeID como "eid", o campo que está sendo alterado como "campo" eo valor novo campo como "valor" na querystring. Quando o estado das mudanças pedido, chamar o método EmployeeUpdated (). Enviar o pedido. * EmployeeUpdated função /} () {if (xmlhttp.readyState == 4 & & xmlhttp.status == 200) {var MessageDiv = document.getElementById ("MessageDiv"); if (xmlhttp.responseText.indexOf ("Failed") = = 0) {MessageDiv.className = "Aviso"; MessageDiv.innerHTML = xmlhttp.responseText;} else {MessageDiv.innerHTML = "Atualizado!"; FadeElem (MessageDiv, 255,255,0,255,255,255); setTimeout (function () {GetEmployeeList (' EmployeeList.jsp ')}, "1000"); / Call / para GetEmployeeList está atrasado para dar ao banco de dados uma oportunidade de atualização. }}} Window.onload = function () {GetEmployeeList ("EmployeeList.jsp");} </ script> </ head> <body> <h1> Administração Employee </ h1> <p nome do funcionário Clique para modificar. </ p> <div id="EmployeeList"> </ div> <div id="FormDiv"> </ div> <div id="MessageDiv"> </ div> </ body> </ html>

Onde está a solução?

Basics Ajax ConclusãoNesta lição do tutorial Ajax, você aprendeu a finalidade de Ajax e os fundamentos básicos para criar aplicações Ajax.

Notas de Rodapé1. Ajax: Uma Nova Abordagem para Aplicações Web

-http://www.adaptivepath.com/publications/essays/archives/000385.php2. Embora não seja incomum ver o termo escrito em letras

maiúsculas (AJAX), está se tornando padrão para escrevê-lo como Ajax.3. Para um bom exemplo de melhorar esta experiência, ver o Encontrar um

domínio formulário de busca em nome http://sbs.smallbusiness.yahoo.com/domains .

4. Na prática, você pode querer fazer isso "Atualizado!" mensagem de menos distração ou usar um botão ao invés de mudar o evento para iniciar as atualizações.

5. Este método também é suportado pelo Opera e Safari.6. Na verdade, o Internet Explorer 7 terá suporte nativo para o

objeto XMLHttpRequest.7. http://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html # sec5.1.1

Para continuar a aprender Ajax ir para o topo desta página e clique na próxima lição na Tabela esse Tutorial Ajax de Conteúdo.