Fundamentos do Ajax

Nesta lio do tutorial Ajax, voc aprender ...

1. 2. 3. 4. O Objetivo do Ajax. Como o Ajax funciona. Como criar cross-browser Ajax. 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 mtodos de se comunicar com um servidor usando JavaScript. Como veremos, Ajax (Ver nota) nem sempre assncrona e nem sempre envolvem XML.

O Objetivo do Ajax
O principal objetivo do Ajax proporcionar um meio simples e padro para uma pgina web para se comunicar com o servidor sem uma atualizao de pgina completa. Para ilustrar isto, considere um simples formulrio de registro.Voc tem muito provvel experimentou a frustrao de ter que tentar vrios nomes de usurio quando se inscrever para algum site novo. Voc preencher todo o formulrio, clique no boto enviar, aguarde um segundo ou assim, e em seguida, obter a mesma forma de volta com uma mensagem dizendo que o nome de usurio que voc escolheu no est disponvel. Voc tenta outro mais fcil de lembrar nome de usurio e encontr-lo tambm no est disponvel.Voc repetir isso vrias vezes at que finalmente voc escolhe alguns nome de usurio obscura. Este processo no seria to ruim se voc no tem que esperar a pgina inteira para atualizar cada vez que voc tentou um novo nome de usurio. (Ver nota) Mas isso um exemplo muito simples. Algumas aplicaes web-based requerem constante interao com um banco de dados atravs de uma camada intermediria. Tomemos, por exemplo, uma interface para atualizar os registros de empregados. A maneira tradicional de se fazer isso ilustrado abaixo.

Aplicao Web tradicionais

1. Primeiro, o aplicativo mostra uma lista de funcionrios para escolher. (AjaxBasics / Demos / EmployeeAdmin.jsp)

2. Quando o usurio escolhe um empregado, o servidor retorna uma nova pgina (FIRST REFRESH) e um formulrio exibido. (AjaxBasics / Demos / EditEmployee.jsp)

3. O usurio pode ento editar os dados de funcionrios (por exemplo, alterar "Andrew" para "Andy") e enviar o formulrio. O servidor ento retorna a nova

pgina (REFRESH SEGUNDA). (AjaxBasics / Demos / EditEmployee.jsp)

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

Uma Aplicao Web Ajax

Ajax faz este processo muito mais simples para o usurio. Records, e at mesmo campos individuais de um registro, pode ser editado um de cada vez, sem atualizaes de pgina inteira. Este mtodo ilustrado abaixo.

1. Como com o mtodo tradicional, a aplicao Ajax mostra uma lista de funcionrios para escolher.(AjaxBasics / Solues / EmployeeAdmin.html)

2. Quando o usurio escolhe um empregado, a pgina no recarregar. Em vez disso, uma chamada Ajax para o servidor feita, o servidor retorna o

formulrio HTML e JavaScript usado para exibir o formulrio na pgina.

3. O usurio pode ento editar os campos do formulrio. Cada vez que um campo de formulrio perde o foco mudou a alterao enviada para o servidor com Ajax, as atualizaes do lado do servidor codificar os dados no banco de dados e envia de volta a lista atualizada dos funcionrios para o navegador. JavaScript novamente utilizado para exibir a lista actualizada na

pgina.

4. A lista de funcionrios atualizado para refletir as alteraes feitas. Aviso "Andrew" foi alterado para "Andy" na lista. exibida uma mensagem informando ao usurio que o banco de dados foi atualizado. (Ver nota)

Tudo isso feito sem ter que fazer uma atualizao completa ainda. Esta a grande vantagem do Ajax.

O objeto XMLHttpRequest
O 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 tm mtodos diferentes para faz-lo. Vamos examinar o mtodo Mozilla (Ver nota) eo mtodo do Internet Explorer e depois vamos ambos os mtodos abstratos com uma nica funo definida pelo usurio.

Criando um objeto XMLHttpRequest

Mtodo Mozilla
O mtodo Mozilla o mais simples dos dois. Ele usa um construtor simples XMLHttpRequest () para criar o objeto.

Exemplo de cdigo: AjaxBasics / Demos / CreateXMLHttpRequest-moz.html

<html> <head> <title> XMLHttpRequest no Mozilla </ title> <script type="text/javascript"> Iniciar function () { tentar { xmlhttp = new XMLHttpRequest (); document.getElementById ("Contedo") innerHTML = "<h1> Usando Objeto XMLHttpRequest </ h1>." } catch (e) { document.getElementById ("Contedo") innerHTML = "<h1> XMLHttp no pode ser criado </ h1>".; } } </ Script> </ Head> <body> <a href="javascript:Start()"> Incio </ a> <div id="Content"> </ div> </ Body> </ Html> Explicao cdigo Este cdigo tenta criar um objeto XMLHttpRequest usando o XMLHttpRequest () construtor. Se conseguir, ele escreve "Usando objetos XMLHttpRequest" ao corpo da pgina. Se ele falhar, ele escreve "XMLHttp no pode ser criado!"

Mtodo Internet Explorador

Microsoft Internet Explorer usa um controle ActiveX para implementar um objeto XMLHttpRequest. Verses novas e melhoradas deste controle foram liberados ao longo do tempo, assim que o nosso cdigo deve verificar a verso mais recente disponvel na mquina do usurio e usar esse.

Exemplo de cdigo: AjaxBasics / Demos / CreateXMLHttpRequest-ie.html

<html> <head> <title> XMLHttpRequest no Internet Explorer </ title> <script type="text/javascript"> Iniciar a funo () {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 ("Contedo") innerHTML = "<h1> Usando" + ieXmlHttpVersions [i] + "</ h1 > "; break;} catch (exc) {alert (ieXmlHttpVersions [i] +" no suportado. ");}} if (typeof xmlhttp ==" undefined ") document.getElementById (" Contedo ") <innerHTML =". h1> XMLHttp no pode ser criado </ h1> ";} </ script> </ head> <a <body> Iniciar href="javascript:Start()"> </ a> <div id="Content"> </ div> </ body> </ html> Explicao cdigo Este cdigo cria um array contendo os nomes de todas as diferentes verses do Microsoft XMLHttp do controle ActiveX, comeando com o mais recente. Em seguida, percorre o array e usa o primeiro controle disponvel para criar um objeto xmlhttp. Assim que encontrar um, ele grava a verso sendo usada para o corpo da pgina. Se nenhuma das verses suportado, ele escreve "XMLHttp no pode ser criado!"

Cross-browser Criao XMLHttpRequest

O exemplo de cdigo a seguir combina as duas anteriores em uma funo que lida com a criao XMLHttpRequestem ambos os navegadores. Ele primeiro tenta o mtodo Mozilla como muito mais provvel que o Internet Explorer ir eventualmente adotar este mtodo (Ver nota) do que que os navegadores Mozilla e outros suporte a controles ActiveX.

Exemplo de cdigo: AjaxBasics / Demos / CreateXMLHttpRequest.html

---- ---- Cdigo Omitida <script type="text/javascript"> Iniciar function () { tentar { var xmlhttp = new XMLHttpRequest (); document.getElementById ("Contedo") 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 ("Contedo") innerHTML = "<h1> Usando" + ieXmlHttpVersions [i] + "</ h1>." break;

} catch (ERR2) { alert (ieXmlHttpVersions [i] + "no suportado."); } } } if (typeof xmlhttp == "undefined") document.getElementById ("Contedo") innerHTML = "<h1> XMLHttp no pode ser criado </ h1>".; } </ Script> ---- ---- Cdigo Omitida

Usando um objeto XMLHttpRequest

Ento, agora que temos um objeto XMLHttpRequest criado, o que fazemos com ele? Ns a usamos para fazer pedidos HTTP. Para fazer isso, ns inicializar o objeto com o mtodo open (), que recebe trs argumentos. XMLHttpRequest open () Argumentos Mtodo Mtodo Tipo de pedido URL Assncrono Descrio String. Normalmente, POST, GET ou HEAD String. A URL recepo do pedido. Boolean. Se o pedido deve ser feito de forma assncrona (true) ou sncrona (false).

A abrir tpicas () chamada de mtodo mostrado abaixo. Xmlhttp.open ("GET", "Demo.xml", true);

Tipos de pedido
Embora a especificao HTTP identifica vrios mtodos de solicitaes HTTP (Ver nota) , o mais comumente suportado (e usados) so mtodos GET, POST e HEAD. CABEA O mtodo HEAD o menos usado dos trs, entretanto, para pedidos simples, pode ser tudo que voc precisa. Ele simplesmente retorna o meta-informao contida no cabealho HTTP. A chamada ficaria assim: Xmlhttp.open ("HEAD", "Demo.jsp", true); E a resposta pode ter esta aparncia: 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); Ns vamos explicar porque nulo passado em apenas um momento. GET O mtodo GET usado para enviar informaes para o servidor como parte da URL. O servidor retorna as informaes de cabealho mesmo que o mtodo retorna HEAD, mas tambm retorna o corpo da mensagem (ie, o contedo da pgina). Quaisquer pares nome-

valor para ser processado pela pgina de recepo 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 mtodo 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); POST O mtodo POST usado para enviar informao como uma entidade fechada. A chamada ficaria assim: Xmlhttp.open ("POST", "Demo.jsp", true); O cabealho de resposta um pouco diferente na medida em que especifica que o contedo retornado no armazenvel 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 / xwww-form-urlencoded"); xmlhttp.send ("FirstName = Nat & Dunn LastName ="); Como voc pode ver, com POST, primeiro precisamos definir o tipo de contedo para "application / x-www-form-urlencoded;". Isso informa ao servidor que esperar os dados do formulrio. No mtodo de envio, que incluem pares nome-valor. Estes pares nome-valor esto disponveis para a pgina de recebimento para o processamento. Nada pode ser enviado desta forma com a cabea e mtodos GET, razo pela qual nulo foi passado nos exemplos anteriores. Veremos mais tarde que tambm podemos enviar dados em outros formatos, como XMLprimas, utilizando o mtodoPOST.

Pedidos assncrona vs sncrona

O argumento assncrona quase sempre deve ser definido como verdadeiro. Afinal, esse o "A" em Ajax. Chamadas sncronas forar o browser a esperar por uma resposta do servidor antes de continuar. Isto deixa o usurio incapaz de interagir com o browser at que a resposta est completa. Solicitaes assncronas permitem que o navegador para continuar a processar o cdigo enquanto espera por uma resposta.

Lidar com a Resposta

Quando utilizar chamadas assncronas, no podemos ter certeza de quando a resposta vir, por isso temos de escrever um cdigo que aguarda a resposta e trata-lo quando ele chega. Fazemos isso com uma funo de callback.Funes de callback so funes que so activados por um evento. No nosso caso, o evento que estamos procurando uma mudana no estado da resposta xmlhttp. Este evento capturado pela propriedade do objeto xmlhttp doonreadystatechange. Podemos atribuir uma funo de retorno a esta propriedade da seguinte forma: xmlhttp.onreadystatechange = function () { / / Faz alguma coisa aqui } A propriedade do objeto xmlhttp do readyState mantm o estado atual da resposta. H cinco estados possveis (0-4), que so descritos abaixo. Valores da propriedade readyState Estado 0 1 Descrio no inicializada carregamento

Valores da propriedade readyState Estado 2 3 4 Descrio carregado interativo completo

Este uso de uma funo inline pode ser novidade para voc. Em JavaScript, as funes so objetos de primeira classe e pode ser atribudo a variveis ou propriedades de outros objetos. Poderamos tambm criar uma funo chamada e atribuir essa funo para xmlhttp.onreadystatechange. O arquivo de exemplo a seguir ilustra como o evento readystatechange manipulado.

Exemplo de cdigo: AjaxBasics / Demos / ReadyStateChange.html

---- ---- Cdigo Omitida Iniciar function () { ---- ---- Cdigo Omitida var ContentDiv = document.getElementById ("Contedo"); if (typeof xmlhttp == "undefined") { ContentDiv.innerHTML = "<h1> XMLHttp no pode ser criado </ h1>"; } outro { Xmlhttp.open ("HEAD", "Demo.xml", true); xmlhttp.onreadystatechange = function () { ContentDiv.innerHTML + = "Estado Ready:" + + xmlhttp.readyState "<br/>"; } xmlhttp.send (null); } } ---- ---- Cdigo Omitida Explicao cdigo A sada ser algo parecido com isso. Os estados reais pronto retornou depender de sua configurao.

Na prtica, antes de fazer qualquer coisa com os dados de resposta xmlhttp, queremos garantir que oreadyState est completo (4), ento colocamos uma condio dentro da nossa funo 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 mtodos do objeto xmlhttp, por isso sabemos o que est disponvel para ns. Propriedades do objeto XMLHttpRequest Propriedade onreadystatechange readyState responseText responseXML estado statusText Descrio Especifica a funo de callback para ser disparado quando o estado muda pronta. Contm o estado da resposta. Mantm o corpo da mensagem como uma string. Mantm o corpo da mensagem como um objeto XML. Detm o cdigo de status retornado do servidor (por exemplo, 200 para o sucesso, 404 para pgina no encontrada, etc.) Contm o texto de status retornado do servidor. Objeto XMLHttpRequest Mtodos Mtodo abort () getAllResponseHeaders () getResponseHeader (header) open (mtodo, URL, Async) send (postData) setRequestHeader (valor de cabealho) Descrio Aborta a solicitao XMLHTTP. Recupera os valores de todos os cabealhos HTTP como uma string. Recupera o valor do cabealho HTTP especificado como uma string. Inicializa o objeto XMLHttpRequest. Envia a solicitao HTTP para o servidor. Especifica o nome eo valor de um cabealho HTTP.

Uma aplicao comum verificar a propriedade status para se certificar de que o pedido foi bem sucedida e, em seguida, para a sada do corpo da mensagem para uma div na pgina HTML. O arquivo de exemplo a seguir demonstra isso.

Exemplo de cdigo: AjaxBasics / Demos / UsingXMLHttpRequest-Get.html

---- ---- Cdigo 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); } ---- ---- Cdigo Omitida Explicao cdigo Esta pgina simplesmente "copia" o texto de resposta (xmlhttp.responseText) e "cola" que em "Contedo" div na pgina.

Exerccio: Ajax utilizando o mtodo POST

Durao: 10 a 15 minutos. Neste exerccio, voc ir modificar o cdigo da ltima manifestao de enviar dados usando o mtodo POST. Voc vai precisar usar osetRequestHeader () para alertar o servidor para esperar os dados do formulrio. 1. AjaxBasics abrir / Exerccios / UsingXMLHttpRequest Post.html em seu editor. 2. Modificar o cdigo para fazer a solicitao usando o mtodoPOST mostrado anteriormente . 3. Testar sua soluo em um navegador.

Exemplo de cdigo: AjaxBasics / Exerccios / UsingXMLHttpRequest-Post.html

<html> <head> <title> Pedido XMLHttpRequest Usando mtodo GET </ title> <script type="text/javascript"> Iniciar function () { ---- ---- Cdigo Omitida var ContentDiv = document.getElementById ("Contedo"); if (typeof xmlhttp == "undefined") { ContentDiv.innerHTML = "<h1> XMLHttp no 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()"> Incio </ a> <div id="Content"> </ div> </ Body> </ Html> Escrever todos os cabealhos de resposta para o final do div "Contedo" mesmo. Onde est a soluo?

Exerccio: Exibindo e atualizando registros

Durao: 30 a 40 minutos. Neste exerccio, voc criar uma mini-aplicao para exibir e atualizar os registros de empregados. Os arquivos do lado do servidor j esto criados e grande parte do JavaScript escrito para voc. Voc vai ter que terminar o Ajax pores do cdigo.

1. AjaxBasics abrir / Exerccios / EmployeeList.jsp em seu editor de e revisar o cdigo. Esta pgina retorna uma lista dos funcionrios como links. Quando os links so clicados, o GetEmployeeForm (funo) chamado com EmployeeForm.jsp eo EmployeeID como parmetros 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 / Exerccios / EmployeeForm.jsp em seu editor de e revisar o cdigo. Esta pgina retorna um formulrio preenchido com os dados do funcionrio cujo id foi passado ao longo dos querystring. Para ver isto, em seu browser para navegar AjaxBasics / Exerccios / EmployeeForm.jsp? Eid = 1. O cdigo 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.va lue,1); "/> </ td> < / tr> <tr> <td> Ttulo: </ td> <input type = "text" name = "Ttulo" value = "Sales Representative" onchange = "UpdateEmployee ('EditEmployee.jsp', 'Ttulo' , this.value, 1); "/> </ td> </ tr> <tr> <td> Extenso: </ td> <input type =" text "name =" Extenso "value =" 5467 "onchange =" UpdateEmployee ('EditEmployee.jsp', 'extenso', this.value, 1); "/> </ td> </ tr> </ table> </ form> Como uma pgina independente, parece como se segue:

6. AjaxBasics abrir / Exerccios / EditEmployee.jsp em seu editor de e revisar o cdigo. Esta pgina atualiza o banco de dados e redireciona para EmployeeForm.jsp para que o formulrio ser devolvido.

7. AjaxBasics abrir / Exerccios / Scripts / Ajax.js em seu editor de e revisar o cdigo. Esta pgina contm apenas a funo para criar o objeto XMLHttpRequest. A funo chamada createXHR (). 8. AjaxBasics abrir / Exerccios / EmployeeAdmin.html para edio. Este o lugar onde voc vai fazer o seu trabalho. 1. Na funo GetEmployeeList () onde o comentrio : abrir um XMLHttpRequest usando o mtodo POST. Use o passado em URL. Quando o estado das mudanas pedido, chamar o mtodo display (). Enviar o pedido. 2. No visor () funo: Defina a propriedade innerHTML de OutputDiv ao r esponseText do objeto xmlhttp retornado. Teste a sua soluo para esta pea, abrindo AjaxBasics / Exerccios / EmployeeAdmin.html no seu browser. Voc dever ver uma lista dos funcionrios. Se voc no fizer isso, verifique o seu GetEmployeeList () e display () funes. 3. Na funo GetEmployeeForm (): Abra um XMLHttpRequest usando o mtodo POST. Use o passado em URL. Certifique-se de passar na EmployeeID como "eid" na querystring. Quando o estado das mudanas pedido, chamar o mtodo display (). Enviar o pedido. 4. No UpdateEmployee (funo): Abra um XMLHttpRequest usando o mtodo 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 mudanas pedido, chamar o mtodoEmployeeUpdated (). Enviar o pedido.

Exemplo de cdigo: AjaxBasics / Exerccios / EmployeeAdmin.html

<html> <head> Administrao <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 funo (URL) {OutputDiv = document.getElementById ("EmployeeList"); OutputDiv.innerHTML = "Carregando <h2> ...</ h2>"; / * Abre um XMLHttpRequest usando o mtodo POST. Use o passado em URL. Quando o estado das mudanas pedido, chamar o mtodo display (). Enviar o pedido. * Display funo /} () {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 mtodo POST. Use o passado em URL. Certifique-se de passar na EmployeeID como "eid" na querystring. Quando o estado das mudanas pedido, chamar o mtodo display (). Enviar o pedido. * UpdateEmployee funo /} (URL, campo de valor,, EID) {/ * Abre um XMLHttpRequest usando o mtodo 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 mudanas pedido, chamar o mtodo EmployeeUpdated (). Enviar o pedido. * EmployeeUpdated funo /} () {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 atualizao. }}} Window.onload = function () {GetEmployeeList ("EmployeeList.jsp");} </ script> </ head> <body> <h1> Administrao Employee </ h1> <p nome do funcionrio Clique para modificar. </ p> <div id="EmployeeList"> </ div> <div id="FormDiv"> </ div> <div id="MessageDiv"> </ div> </ body> </ html> Onde est a soluo?

Basics Ajax Concluso

Nesta lio do tutorial Ajax, voc aprendeu a finalidade de Ajax e os fundamentos bsicos para criar aplicaes Ajax.

Notas de Rodap
1. Ajax: Uma Nova Abordagem para Aplicaes Web http://www.adaptivepath.com/publications/essays/archives/000385.php 2. Embora no seja incomum ver o termo escrito em letras maisculas (AJAX), est se tornando padro para escrev-lo como Ajax. 3. Para um bom exemplo de melhorar esta experincia, ver o Encontrar um domnio formulrio de busca em nome http://sbs.smallbusiness.yahoo.com/domains . 4. Na prtica, voc pode querer fazer isso "Atualizado!" mensagem de menos distrao ou usar um boto ao invs de mudar o evento para iniciar as atualizaes. 5. Este mtodo tambm 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 pgina e clique na prxima lio na Tabela esse Tutorial Ajax de Contedo.