AJAX está para Asynchronous JavaScript and XML. AJAX é um tipo de programação feito popular em 2005 por Google (com Google sugerir). AJAX não é uma língua de programação nova, mas uma maneira nova usar padrões existentes. Com o AJAX você pode criar melhor, rapidamente, e aplicações mais user-friendly da web applications. AJAX é baseado em pedidos do Javascript e do HTTP.

Introdução de AJAX
AJAX está para Asynchronous JavaScript and XML.

O que você deve já saber
Antes que você continue você deve ter uma compreensão básica do seguinte:
 

HTML / XHTML JavaScript

AJAX = Asynchronous JavaScript and XML
AJAX não é uma língua de programação nova, mas uma técnica para criar melhor e mais rapidamente, e uma aplicação mais interativa da web applications. Com o AJAX, seu Javascript pode comunicar-se diretamente com o usuário, usando o objeto de XMLHttpRequest do Javascript. Com este objeto, seu Javascript pode negociar dados com um web server, sem recarregar a página. AJAX usa transferência de dados assíncrona (pedidos do HTTP) entre o browser e o web server, permitindo que os Web pages peçam bocados de informação pequenos do usuário em vez das páginas inteiras. A técnica de AJAX faz aplicações da Internet menores, mais rapidamente e mais userfriendly. AJAX é um independente da tecnologia do browser do software da web server.

AJAX é baseado em padrões Web Standards
AJAX é baseado nos seguintes padrões da web Standards:

JavaScript

  

XML HTML CSS

Os padrões da web Standards usados em AJAX são definidos bem, e suportados por todos os principais browsers. As aplicações de AJAX são browser e independente da plataforma.

AJAX é sobre aplicações melhores da Internet
As aplicações da Web têm muitos benefícios sobre aplicações desktop; podem alcançar uma audiência maior, é mais fácil de instalar e suportar, e mais fácil de tornar-se. Entretanto, as aplicações da Internet não são sempre como “ricas” e user-friendly como aplicações desktop tradicionais. Com AJAX, as aplicações da Internet podem ser feitas mais ricas e mais user-friendly.

Você pode começar usar AJAX hoje
Não há nada novo aprender. AJAX é baseado em padrões existentes. Estes padrões foram usados por a maioria de colaboradores por diversos anos.

AJAX Http Requests
AJAX usa pedidos do HTTP
No coding tradicional do Javascript, se você quiser começar alguma informação de uma base de dados ou de um arquivo no usuário, ou emitir a informação do usuário a um usuário, você terá que fazer um HTML dar forma e COMEÇAR ou AFIXAR os dados ao usuário. O usuário terá que enviar “submete” a tecla para emitir/começa a informação, espera para que o usuário responda, então uma página nova carregará com os resultados. Porque o usuário retorna uma página nova cada vez o usuário submete a entrada, as aplicações tradicionais da web application podem funcionar lentamente e tender a ser mais menos user-friendly. Com o AJAX, seu Javascript comunica-se diretamente com o usuário, através do objeto de XMLHttpRequest do Javascript Com um pedido do HTTP, uma página web pode fazer um pedido, e começa uma resposta de um web server - sem recarregar a página. O usuário permanecerá na mesma página, e ou não observarão que os scripts pedem páginas, ou emitem dados a um usuário no fundo.

O campo do username será preenchido pelo usuário e o campo do time será preenchido dentro usando AJAX. e no Netscape 7. Os browsers diferentes usam métodos diferentes para criar o objeto de XMLHttpRequest.htm”. Google Suggest está usando o objeto de XMLHttpRequest criar uma relação muito dinâmica da web interface: Quando você começa datilografar na caixa da busca do Google.2.O objeto de XMLHttpRequest Usando o objeto de XMLHttpRequest. O objeto de XMLHttpRequest é suportado no Internet Explorer 5. O arquivo do HTML será nomeado “testAjax.Support do Browser A chave de AJAX é o objeto de XMLHttpRequest. um Javascript emite as letras fora a um usuário e o usuário retorna uma lista das sugestões. nós criaremos uma aplicação pequena de AJAX. Exemplo de AJAX Sua primeira aplicação em AJAX Para compreender como AJAX trabalha. . no Mozilla 1. Support do Browser de AJAX AJAX . no Safari 1.0+. nós estamos indo criar um formulário padrão do HTML com os dois campos do texto: username e time. ópera 8+. Primeiramente. um colaborador da web standart pode atualizar uma página com dados do usuário depois que a página carregou! AJAX foi feito popular em 2005 pela Google (com Google suggest(Sugerir)).0/Firefox. e olha como esta (observação que o formulário do HTML abaixo tem nenhum submeter à tecla!): <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Os capítulos seguintes explicarão as chaves de AJAX.

Vamos atualizar nosso arquivo de “testAjax.0+. try { // Firefox. Você pode ler mais sobre a tentativa e try . catch" a indicação. } catch (e) { alert("Your browser does not support AJAX!").. catch statement em nosso tutorial do Javascript. e para tratar dos browsers diferentes. e de Safari.XMLHTTP"). } } } } </script> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Exemplo explicado: Criar primeiramente um xmlHttp variável para prender o objeto de XMLHttpRequest.. return false. se . quando outros browsers usarem o objeto interno do Javascript chamado XMLHttpRequest.XMLHTTP"). nós estamos indo usar uma "try .. Se isso falhar.XMLHTTP") o qual é para o Internet Explorer 6. Isto é para os browsers de Firefox. Safari xmlHttp=new XMLHttpRequest(). Tentar então criar o objeto com xmlHttp=new XMLHttpRequest().0+. Para criar este objeto. } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft. Opera 8.htm” com o Javascript que cría o objeto de XMLHttpRequest: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp.. de ópera. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2. tentativa xmlHttp=new ActiveXObject("Msxml2.O Internet Explorer usa um ActiveXObject.

ópera.O objeto de XMLHttpRequest AJAX . Estão aqui os valores possíveis para a propriedade do readyState: Estado Descrição 0 1 2 3 Os pedidos não são inicializados Que o pedido foi ajustado acima O pedido foi emitido O pedido está no processo .XMLHTTP") o qual é para o Internet Explorer 5. Cada vez que o readyState muda. O código acima é compatível com todos os browsers populares: Internet Explorer. e começara um alerta indicando que o browser não suporta AJAX. este é o código que você pode se usar cada vez que você necessita criar um objeto de XMLHttpRequest. Firefox.aquele falhar também. A propriedade do onreadystatechange Depois que um pedido ao usuário. AJAX .onreadystatechange=function() { // nós estamos indo escrever aqui algum código } A propriedade do readyState A propriedade do readyState prende o status da resposta do usuário. A propriedade do onreadystatechange armazena a função que processará a resposta de um usuário. Entretanto. Nota: O código browser-específico acima é por muito tempo e completamente complexo.Mais sobre o objeto de XMLHttpRequest Antes de emitir dados ao usuário. o usuário tem um browser muito antigo. O seguinte código define uma função vazia e ajusta a propriedade do onreadystatechange ao mesmo tempo: xmlHttp.5+ Se nenhuns dos três métodos trabalharem. a função do onreadystatechange estará executada. O capítulo seguinte mostra como usar o objeto de XMLHttpRequest comunicar-se com o usuário. nós temos que explicar três propriedades importantes do objeto de XMLHttpRequest. nós necessitamos de uma função que possa receber os dados que são retornados pelo usuário. e Safari. assim que você pode apenas cópia e colá-lo sempre que você o necessita. tentativa xmlHttp=new ActiveXObject("Microsoft.

Em nosso código.true). nós ajustaremos o valor de nosso campo da entrada do “time(tempo)” igual ao responseText: xmlHttp.Emitindo um pedido ao usuário Para emitir fora de um pedido ao usuário.Pedir um usuário AJAX . O terceiro argumento especifica que o pedido deve ser segurado asynchronously. O método da send() emite o pedido fora ao usuário.time.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Começar os dados da resposta do usuário } } A propriedade do responseText Os dados emitidos para trás do usuário podem ser recuperados com a propriedade do responseText.value=xmlHttp.responseText. O método open() faz um exame de três argumentos. nós usamos o método open() e o método send().send(null). O segundo argumento especifica o URL do server-side script.asp". } } O capítulo seguinte mostra como pedir o usuário para alguns dados! AJAX .myForm. ."time.onreadystatechange=function() { if(xmlHttp.4 O pedido está completo Nós estamos indo adicionar se a indicação à função do onreadystatechange ao teste se nossa resposta estiver completa (isto significar que nós podemos começar nossos dados): xmlHttp. o código seria: xmlHttp. O primeiro argumento define que método para se usar quando emitindo o pedido (GET ou POST).readyState==4) { document. xmlHttp. Se nós supuséssemos que a lima do HTML e do ASP está no mesmo diretório.open("GET".

Agora nós devemos decidir-se quando a função de AJAX deve ser executada.asp".0+. } catch (e) { alert("Your browser does not support AJAX!").XMLHTTP").XMLHTTP")."time.readyState==4) { document.myForm.onreadystatechange=function() { if(xmlHttp.time.send(null). AJAX – O Script Server-Side . Safari xmlHttp=new XMLHttpRequest()." name="username" /> Time: <input type="text" name="time" /> </form> Nossa lima AJAX-ready updated de “testAjax.htm” olha agora como está: <html> <body> <script type="text/javascript"> function ajaxFunction(){ var xmlHttp.value=xmlHttp. } } } xmlHttp.asp”.responseText. Nós deixaremos a função funcionar “atrás das cenas” quando o usuário datilografa algo no campo do texto do username: <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction()." name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> O capítulo seguinte faz nossa aplicação de AJAX completa com o script de “time. } } xmlHttp. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.true). try { // Firefox. Opera 8. } catch (e){ try { xmlHttp=new ActiveXObject("Microsoft. } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction().open("GET". return false. xmlHttp.

Um atributo do evento para o campo da entrada define uma função a ser provocada pelo evento do onkeyup. AJAX sugere o exemplo Nós vimos que AJAX pode ser usado para criar aplicações mais interativas. (Response. uma função chamaram o “showHint()” é executado. AJAX sugere o exemplo No exemplo de AJAX abaixo nós demonstraremos como um Web page pode se comunicar com um web server em linha enquanto um usuário incorpora dados em um formulário padrão do HTML. Em outras . Aqui nós queremos emitir para trás o tempo atual.asp” olha como está: <% response. O código em “time.Expires = -1) indica que a página nunca cached.write(time) %> Nota: Expiram os sets da propriedade quanto tempo (nos minutos) uma página cached em um browser antes que expire. Exemplo explicado . O parágrafo abaixo do formulário contem uma extensão chamada “txtHint”. a versão cached está indicada. A propriedade do responseText (explicada no capítulo precedente) armazenará os dados retornados do usuário.o formulário do HTML O formulário tem o seguinte código do HTML: <form> First Name: <input type="text" id="txt1" onkeyup="showHint(this. Se um usuário retornar à mesma página antes que expire.AJAX – O Script ASP Server-Side Agora nós estamos indo criar o script que indica o tempo atual do usuário. A execução da função é provocada pelo evento do “onkeyup”.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> Como você pode ver é justo um formulário simples do HTML com um campo da entrada chamado “txt1” . A extensão é usada como um placeholder para os dados recuperados do web server. Quando os dados de entradas do usuário.expires=-1 response.

length > 0) a função executa o seguinte:       Define o URL (nome do arquivo) para emitir ao usuário Adiciona um parâmetro (q) ao URL com o índice do campo da entrada Adiciona um número aleatório para impedir que o usuário use um arquivo cached Cría um objeto de XMLHTTP.onreadystatechange=stateChanged. A função contem o seguinte código: function showHint(str) { if (str.innerHTML="". Emite um pedido do HTTP ao usuário Se o campo da entrada estiver vazio. url=url+"&sid="+Math. a função cancela simplesmente o índice do placeholder do txtHint. A função é a listada abaixo: . o showHint da função está chamado. return. } A função executa cada vez que um caráter é incorporado ao campo da entrada.a função de GetXmlHttpObject() O exemplo acima chama uma função chamada GetXmlHttpObject().url.open("GET". A finalidade da função é resolver o problema de criar objetos diferentes de xmlHttp para browsers diferentes. xmlHttp.a função do showHint() A função do showHint() é uma função muito simples do Javascript colocada na seção do <head> da página HTML.asp". e diz o objeto para executar uma função chamada stateChanged quando uma mudança é provocada abre o objeto de XMLHTTP com o URL dado.getElementById("txtHint").palavras: Cada vez que o usuário move seu dedo longe de uma chave de teclado dentro do campo da entrada. Exemplo explicado . return. } var url="gethint.length==0) { document.true). xmlHttp. } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Your browser does not support AJAX!").send(null). Se houver alguma entrada no campo do texto (str. url=url+"?q="+str.random(). xmlHttp. Exemplo explicado .

getElementById("txtHint"). try { // Firefox.js"></script> </head> <body> <form> . Contem um formulário simples do HTML e uma ligação a um Javascript. } Exemplo explicado . Safari xmlHttp=new XMLHttpRequest(). } } A função stateChanged() executa cada vez que o estado do objeto de XMLHTTP muda.0+.function GetXmlHttpObject() { var xmlHttp=null.XMLHTTP").XMLHTTP"). } } return xmlHttp. o índice do placeholder do txtHint está enchido com o texto da resposta. Opera 8. e tenta-o você mesmo.readyState==4) { document. AJAX sugere o código fonte Código fonte de AJAX para sugerir o exemplo O código fonte abaixo pertence ao exemplo de AJAX na página precedente. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2. Quando o estado mudar a 4 (“completo”). <html> <head> <script src="clienthint.responseText.A função stateChanged() A função stateChanged() contem o seguinte código: function stateChanged() { if (xmlHttp. } catch (e) { xmlHttp=new ActiveXObject("Microsoft. O HTML da página de AJAX Este é o HTML page.innerHTML=xmlHttp. Você pode cópia e colá-lo.

XMLHTTP").url.length==0) { document.getElementById("txtHint"). } } return xmlHttp. } catch (e) { xmlHttp=new ActiveXObject("Microsoft.readyState==4) { document.0+. xmlHttp. url=url+"&sid="+Math. url=url+"?q="+str. armazenado no arquivo “clienthint.random().js”: var xmlHttp.true). } xmlHttp=GetXmlHttpObject(). } function stateChanged() { if (xmlHttp.innerHTML=xmlHttp. } var url="gethint.innerHTML="". return. O AJAX JavaScript Este é o código do Javascript.send(null).getElementById("txtHint"). function showHint(str) { if (str.XMLHTTP"). Safari xmlHttp=new XMLHttpRequest().asp". Opera 8. xmlHttp. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.responseText. try { // Firefox. if (xmlHttp==null) { alert ("Your browser does not support AJAX!"). return.onreadystatechange=stateChanged.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> O código do Javascript é listado abaixo. xmlHttp. } } function GetXmlHttpObject() { var xmlHttp=null.First Name: <input type="text" id="txt1" onkeyup="showHint(this.open("GET". } .

As páginas de AJAX podem ser servidas por todo o usuário da Internet.A página do usuário de AJAX .querystring("q")) 'lookup all hints from array if length of q>0 if len(q)>0 then hint="" .asp”. A página do usuário chamada pelo Javascript no exemplo do capítulo precedente é um arquivo simples do ASP chamada “gethint. de um escrito no ASP e de um da página do usuário em PHP.ASP e PHP Não há nenhuma coisa como um usuário de AJAX.expires=-1 dim a(30) 'Fill up array with names a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" 'get the q parameter from URL q=ucase(request. Exemplo de AJAX ASP O código na página de “gethint.asp” é escrito em VBScript para um usuário de informação do Internet (IIS). Ele verificações justas uma disposição dos nomes e dos retornos que corresponder nomeia ao cliente: <% response. Abaixo nós listamos dois exemplos do código.

$a[]="Petunia". $a[]="Amanda". $a[]="Hege". $a[]="Sunniva". $a[]="Johanna". 26 Jul 1997 05:00:00 GMT"). $a[]="Nina". Exemplo PHP <?php header("Cache-Control: no-cache. $a[]="Gunda". " & a(i) end if end if next end if 'Output "no suggestion" if no hint were found 'or output the correct values if hint="" then response. // Fill up array with names $a[]="Anna".php”. $a[]="Evita". $a[]="Fiona". $a[]="Unni".for i=1 to 30 if q=ucase(mid(a(i). // Date in the past header("Expires: Mon. $a[]="Eva".1.asp” a “gethint.js” de “gethint. $a[]="Tove". $a[]="Kitty". $a[]="Raquel".write(hint) end if %> Exemplo de AJAX PHP O código acima foi reescrito em PHP. .len(q))) then if hint="" then hint=a(i) else hint=hint & " .write("no suggestion") else response. $a[]="Eve". $a[]="Brittany". $a[]="Ophelia". Nota: Para funcionar o exemplo inteiro em PHP. $a[]="Cinderella". $a[]="Inga". $a[]="Cindy". $a[]="Linda". $a[]="Diana". must-revalidate"). recordar mudar o valor da variável do URL em “clienthint. $a[]="Doris".

for($i=0. } else { $hint=$hint.$a[]="Violet". $i<count($a).strlen($q)))) { if ($hint=="") { $hint=$a[$i].0. ?> Exemplo da base de dados de AJAX AJAX pode ser usado para uma comunicação interativa com uma base de dados.$a[$i]. //get the q parameter from URL $q=$_GET["q"]. } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion". Exemplo da base de dados de AJAX No exemplo de AJAX abaixo nós demonstraremos como um Web page pode buscar a informação de uma base de dados usando a tecnologia de AJAX. O exemplo de AJAX explicou O exemplo contém um formulário simples do HTML e uma ligação a um Javascript: . } //output the response echo $response. } else { $response=$hint. //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint="". $a[]="Vicky". $a[]="Elizabeth"." . ". $i++) { if (strtolower($q)==strtolower(substr($a[$i]. $a[]="Wenche". $a[]="Liza". $a[]="Ellen".

onreadystatechange=stateChanged. O div é usado como um placeholder para o info recuperado do web server. O código do Javascript é alistado abaixo.open("GET". if (xmlHttp==null) { alert ("Your browser does not support AJAX!"). uma função chamada “showCustomer ()” está executada. Quando o usuário seleciona dados.</b></div> </p> </body> </html> Como você pode ver é justo um formulário simples do HTML com uma gota encaixota para baixo “Customer”.random().js”: var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(). } var url="getcustomer. xmlHttp. Em outras palavras: Cada vez que a mudança que do usuário o valor na gota encaixota para baixo.true).send(null). O parágrafo abaixo do formulário contem um “txtHint chamado div”. } function stateChanged() { .<html> <head> <script src="selectcustomer.url. xmlHttp.value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select> </form> <p> <div id="txtHint"><b> O cliente info será listado aqui. A execução da função é provocada pelo evento do “onchange”. xmlHttp. O AJAX JavaScript Este é o código do Javascript armazenado no arquivo “selectcustomer. o showCustomer da função é chamado.asp".js"></script> </head> <body> <form> Select a Customer: <select name="customers" onchange="showCustomer(this. url=url+"?q="+str. url=url+"&sid="+Math. return.

innerHTML=xmlHttp.mdb")) set rs = Server.querystring("q") & "'" set conn=Server.Mappath("/db/northwind.write("<tr><td><b>" & x.XMLHTTP"). Opera 8. conn response. Safari xmlHttp=new XMLHttpRequest().0+. O código funciona um SQL de encontro a uma base de dados e retorna o resultado como uma tabela do HTML: <% response. } } return xmlHttp.recordset") rs.if (xmlHttp. } } function GetXmlHttpObject() { var xmlHttp=null. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.Jet.write("<table>") do until rs.CreateObject("ADODB.expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.CreateObject("ADODB. A página é escrita em VBScript para um usuário de informação do Internet (IIS).OLEDB.asp”. } A página do usuário de AJAX A página do usuário chamada pelo Javascript.XMLHTTP").name & "</b></td>") response.Connection") conn.Provider="Microsoft.value & "</td></tr>") .responseText. Poderia fàcilmente ser reescrita em PHP.getElementById("txtHint"). ou em alguma outra língua do usuário.Open(Server.write("<td>" & x.4.readyState==4) { document.0" conn.EOF for each x in rs.Open sql.Fields response. é um arquivo simples do ASP chamada “getcustomer. try { // Firefox. } catch (e) { xmlHttp=new ActiveXObject("Microsoft.

Este exemplo consiste em quatro elementos:     Base de dados MySQL Um formulário simples em html Um Javascript Uma página de PHP A base de dados A base de dados que nós nos estaremos usando em olhares deste exemplo como está: id 1 2 3 4 FirstName Peter Lois Joseph Glenn LastName Griffin Griffin Swanson Quagmire Age 41 40 39 41 Hometown Quahog Newport Quahog Quahog Brewery Piano Teacher Police Officer Pilot Job O formulário do HTML O exemplo acima contem um formulário simples do HTML e uma ligação a um Javascript: <html> <head> <script src="selectuser.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> .MoveNext loop response.next rs.js"></script> </head> <body> <form> Select a User: <select name="users" onchange="showUser(this. Exemplo da base de dados de AJAX com PHP No exemplo de AJAX abaixo nós demonstraremos como uma página web pode buscar a informação de uma base de dados de MySQL usando a tecnologia de AJAX.write("</table>") %> Exemplo da base de dados de PHP. AJAX e MySQL AJAX pode ser usado para uma comunicação interativa com uma base de dados.

0+. O div é usado como um placeholder para o info recuperado do web server. A execução da função é provocada pelo evento do “onchange”.open("GET". Quando o usuário seleciona dados.true) xmlHttp. o showUser() da função está chamado.getElementById("txtHint"). O parágrafo abaixo do formulário contem um “txtHint chamado div”.</b></div> </p> </body> </html> Exemplo explicado .o formulário do HTML Como você pode ver é justo um formulário simples do HTML com uma gota encaixota para baixo “usuários chamados” com nomes e a “identificação” da base de dados como valores da opção. } catch (e) { //Internet Explorer .onreadystatechange=stateChanged xmlHttp. O JavaScript Este é o código do Javascript armazenado no arquivo “selectuser. Safari xmlHttp=new XMLHttpRequest().<option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <p> <div id="txtHint"><b>User info will be listed here.url. Opera 8.readyState==4 || xmlHttp. Em outras palavras: Cada vez que o usuário muda o valor do campo select. try { // Firefox.innerHTML=xmlHttp.random() xmlHttp. uma função chamada “showUser()” está executada.php" url=url+"?q="+str url=url+"&sid="+Math.js”: var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getuser.send(null) } function stateChanged() { if (xmlHttp.readyState=="complete") { document.responseText } } function GetXmlHttpObject() { var xmlHttp=null.

A página é escrita em PHP e usa um banco de dados de MySQL. 'peter'. 'abc123'). } O exemplo explicou stateChanged() e as funções de GetXmlHttpObject() são as mesmas que no AJAX de PHP sugerir o capítulo. 3. $result = mysql_query($sql).php”.XMLHTTP"). $sql="SELECT * FROM user WHERE id = '". O código funciona com uma pergunta ao MySQL de encontro a uma base de dados e retorna o resultado como uma tabela do HTML: <?php $q=$_GET["q"]. é um arquivo simples de PHP chamada “getuser. mysql_error())."'". 2. A função do showUser() Se um artigo for selecionado a função executar o seguinte: 1. 7. } catch (e) { xmlHttp=new ActiveXObject("Microsoft. } } return xmlHttp. echo "<table border='1'> <tr> <th>Firstname</th> . $con = mysql_connect('localhost'.XMLHTTP"). $con). 4. Emite um pedido do HTTP ao usuário A página PHP A página do usuário chamou-se pelo Javascript. } mysql_select_db("ajax_demo".$q.try { xmlHttp=new ActiveXObject("Msxml2. 6. if (!$con) { die('Could not connect: ' . Convida a função de GetXmlHttpObject para criar um do objeto de xmlHttp Define o URL (nome do arquivo) para emitir ao do usuário Adiciona um parâmetro (q) ao URL com o índice da caixa dropdown Adiciona um número aleatório para impedir que o usuário use um arquivo cached A chamada stateChanged quando uma mudança é provocada Abre o objeto de xmlHttp com o URL dado. 5.

while($row = mysql_fetch_array($result)) { echo "<tr>". $row['Job'] . Exemplo de AJAX XML No exemplo de AJAX abaixo nós demonstraremos como um Web page pode buscar a informação de um arquivo de XML usando a tecnologia de AJAX. "</td>". Uma tabela é criada e os dados são introduzidos e emitidos ao placeholder do “txtHint” Exemplo de AJAX XML AJAX pode ser usado para uma comunicação interativa com um arquivo de XML. O “user” com o nome especificado é encontrado 3. $row['Hometown'] . echo "<td>" .value)"> . ?> Exemplo explicado Quando a pergunta é emitida do Javascript à página de PHP o seguinte acontece: 1. $row['FirstName'] . "</td>".js"></script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this. AJAX Example Explained O exemplo um formulário simples do HTML e uma ligação a um Javascript: <html> <head> <script src="selectcd. "</td>". $row['LastName'] . echo "<td>" . "</td>". mysql_close($con). } echo "</table>". echo "<td>" . $row['Age'] . echo "<td>" . echo "</tr>".<th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>". PHP abre uma conexão a um usuário de MySQL 2. "</td>". echo "<td>" .

true). url=url+"&sid="+Math. xmlHttp. uma função chamada “showCD” está executada. xmlHttp.url. Quando o usuário seleciona dados.random(). o showCD da função é chamado.innerHTML=xmlHttp. if (xmlHttp==null) { alert ("Your browser does not support AJAX!").asp". Em outras palavras: Cada vez que a mudança que do usuário o valor na gota encaixota para baixo. } function stateChanged() { if (xmlHttp. O AJAX JavaScript Este é o código do Javascript armazenado no arquivo “selectcd.getElementById("txtHint").open("GET".responseText.send(null). A execução da função é provocada pelo evento do “onchange”. O div é usado como um placeholder para o info recuperado do web server. try { . return.onreadystatechange=stateChanged.readyState==4) { document.<option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <p> <div id="txtHint"><b>CD info will be listed here.</b></div> </p> </body> </html> Como você pode ver é justo um formulário simples do HTML com uma gota simples encaixota para baixo “CD chamados”. xmlHttp. url=url+"?q="+str.js”: var xmlHttp function showCD(str) { xmlHttp=GetXmlHttpObject(). O código do Javascript é alistado abaixo. O parágrafo abaixo do formulário contem um “txtHint chamado div”. } } function GetXmlHttpObject() { var xmlHttp=null. } var url="getcd.

ou em alguma outra língua do usuário. Safari xmlHttp=new XMLHttpRequest().text) response.// Firefox.nodename & ":</b> ") response.xml")) set nodes=xmlDoc.write("<br />") next next %> Exemplo de PHP e de AJAX XML AJAX pode ser usado para uma comunicação interativa com um arquivo de XML. O código funciona uma pergunta de encontro a um arquivo de XML e retorna o resultado como o HTML: <% response. Opera 8. é um arquivo simples do ASP chamada “getcd. } catch (e) { xmlHttp=new ActiveXObject("Microsoft.CreateObject("Microsoft.XMLDOM") xmlDoc.asp”.write(y.async="false" xmlDoc.XMLHTTP").0+.XMLHTTP"). } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2. Poderia fàcilmente ser reescrita em PHP.querystring("q") set xmlDoc=Server.childnodes response. } A página do usuário de AJAX A página do usuário chamada pelo Javascript.load(Server.MapPath("cd_catalog.expires=-1 q=request.write("<b>" & y. . A página é escrita em VBScript para um usuário de informação do Internet (IIS).selectNodes("CATALOG/CD[ARTIST='" & q & "']") for each x in nodes for each y in x. } } return xmlHttp.

Exemplo de AJAX XML No exemplo de AJAX abaixo nós demonstraremos como uma página web pode buscar a informação de um arquivo de XML usando a tecnologia de AJAX. O arquivo XML . Em outras palavras: Cada vez que o usuário muda o valor do campo select. Quando o usuário seleciona dados.</b></div> </p> </body> </html> Exemplo explicado Como você pode ver é justo um formulário simples do HTML com um select simples “chamados CD”. o showCD da função está chamado.js"></script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this. O div é usado como um placeholder para o info recuperado do web server. Este exemplo consiste em quatro páginas:     Um formulário simples do HTML Uma arquivo XML Um JavaScript Uma página em PHP O formulário do HTML O exemplo acima contem um formulário simples do HTML e uma ligação a um Javascript: <html> <head> <script src="selectcd. A execução da função é provocada pelo evento do “onchange”. O parágrafo abaixo do formulário contem um “txtHint chamado div”. uma função chamada “showCD” está executada.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </form> <p> <div id="txtHint"><b>CD info will be listed here.

com) --> CATALOG> CD> TITLE>Empire Burlesque</TITLE> ARTIST>Bob Dylan</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>Columbia</COMPANY> PRICE>10.20</PRICE> YEAR>1990</YEAR> </CD> CD> TITLE>Eros</TITLE> ARTIST>Eros Ramazzotti</ARTIST> COUNTRY>EU</COUNTRY> COMPANY>BMG</COMPANY> PRICE>9.90</PRICE> YEAR>1985</YEAR> </CD> CD> TITLE>Hide your heart</TITLE> ARTIST>Bonnie Tyler</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>CBS Records</COMPANY> PRICE>9.altova.10</PRICE> YEAR>1973</YEAR> </CD> CD> TITLE>Maggie May</TITLE> ARTIST>Rod Stewart</ARTIST> . <?xml version="1.Aqui está o código do arquivo XML de nome “cd_catalog.Hook</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>CBS</COMPANY> PRICE>8.xml”.90</PRICE> YEAR>1988</YEAR> </CD> CD> TITLE>Greatest Hits</TITLE> ARTIST>Dolly Parton</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>RCA</COMPANY> PRICE>9.0" encoding="ISO-8859-1" ?> <!-Edited with XML Spy v2007 (http://www.90</PRICE> YEAR>1982</YEAR> </CD> CD> TITLE>Still got the blues</TITLE> ARTIST>Gary Moore</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Virgin records</COMPANY> PRICE>10.90</PRICE> YEAR>1997</YEAR> </CD> CD> TITLE>One night only</TITLE> ARTIST>Bee Gees</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Polydor</COMPANY> PRICE>10.90</PRICE> YEAR>1998</YEAR> </CD> CD> TITLE>Sylvias Mother</TITLE> ARTIST>Dr.

COUNTRY>UK</COUNTRY> COMPANY>Pickwick</COMPANY> PRICE>8.50</PRICE> YEAR>1990</YEAR> </CD> CD> TITLE>Romanza</TITLE> ARTIST>Andrea Bocelli</ARTIST> COUNTRY>EU</COUNTRY> COMPANY>Polydor</COMPANY> PRICE>10.80</PRICE> YEAR>1996</YEAR> </CD> CD> TITLE>When a man loves a woman</TITLE> ARTIST>Percy Sledge</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>Atlantic</COMPANY> PRICE>8.70</PRICE> YEAR>1987</YEAR> </CD> CD> TITLE>Black angel</TITLE> ARTIST>Savage Rose</ARTIST> COUNTRY>EU</COUNTRY> COMPANY>Mega</COMPANY> PRICE>10.20</PRICE> YEAR>1971</YEAR> </CD> CD> TITLE>Soulsville</TITLE> ARTIST>Jorn Hoel</ARTIST> COUNTRY>Norway</COUNTRY> COMPANY>WEA</COMPANY> .90</PRICE> YEAR>1997</YEAR> </CD> CD> TITLE>Tupelo Honey</TITLE> ARTIST>Van Morrison</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Polydor</COMPANY> PRICE>8.20</PRICE> YEAR>1999</YEAR> </CD> CD> TITLE>For the good times</TITLE> ARTIST>Kenny Rogers</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Mucik Master</COMPANY> PRICE>8.70</PRICE> YEAR>1995</YEAR> </CD> CD> TITLE>Big Willie style</TITLE> ARTIST>Will Smith</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>Columbia</COMPANY> PRICE>9.90</PRICE> YEAR>1995</YEAR> </CD> CD> TITLE>1999 Grammy Nominees</TITLE> ARTIST>Many</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>Grammy</COMPANY> PRICE>10.

90</PRICE> YEAR>1991</YEAR> </CD> CD> TITLE>The dock of the bay</TITLE> ARTIST>Otis Redding</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>Atlantic</COMPANY> PRICE>7.90</PRICE> YEAR>1983</YEAR> </CD> CD> TITLE>Midt om natten</TITLE> ARTIST>Kim Larsen</ARTIST> COUNTRY>EU</COUNTRY> COMPANY>Medley</COMPANY> PRICE>7.80</PRICE> YEAR>1983</YEAR> </CD> CD> TITLE>Pavarotti Gala Concert</TITLE> ARTIST>Luciano Pavarotti</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>DECCA</COMPANY> PRICE>9.90</PRICE> YEAR>1987</YEAR> </CD> CD> TITLE>Picture book</TITLE> ARTIST>Simply Red</ARTIST> COUNTRY>EU</COUNTRY> COMPANY>Elektra</COMPANY> PRICE>7.90</PRICE> YEAR>1990</YEAR> </CD> CD> TITLE>Stop</TITLE> ARTIST>Sam Brown</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>A and M</COMPANY> PRICE>8.90</PRICE> YEAR>1987</YEAR> </CD> CD> TITLE>Private Dancer</TITLE> ARTIST>Tina Turner</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Capitol</COMPANY> PRICE>8.90</PRICE> YEAR>1988</YEAR> </CD> CD> TITLE>Bridge of Spies</TITLE> ARTIST>T'Pau</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Siren</COMPANY> PRICE>7.PRICE>7.20</PRICE> YEAR>1985</YEAR> .90</PRICE> YEAR>1996</YEAR> </CD> CD> TITLE>The very best of</TITLE> ARTIST>Cat Stevens</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>Island</COMPANY> PRICE>8.

Opera 8.innerHTML=xmlHttp.true) xmlHttp.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.20</PRICE> YEAR>1987</YEAR> </CD> </CATALOG> O JavaScript Aqui fica o código JavaScript no arquivo "selectcd.send(null) } function stateChanged() { if (xmlHttp.80</PRICE> YEAR>1987</YEAR> </CD> CD> TITLE>Unchain my heart</TITLE> ARTIST>Joe Cocker</ARTIST> COUNTRY>USA</COUNTRY> COMPANY>EMI</COMPANY> PRICE>8. try { // Firefox.</CD> CD> TITLE>Red</TITLE> ARTIST>The Communards</ARTIST> COUNTRY>UK</COUNTRY> COMPANY>London</COMPANY> PRICE>7.readyState=="complete") { document.url.js": var xmlHttp function showCD(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getcd.open("GET". } catch (e) { // Internet Explorer try .getElementById("txtHint").onreadystatechange=stateChanged xmlHttp.readyState==4 || xmlHttp. Safari xmlHttp=new XMLHttpRequest().0+.responseText } } function GetXmlHttpObject() { var xmlHttp=null.

é um arquivo simples de PHP chamada “getcd. $i++) { //Process only element nodes if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode).xml” de XML. } catch (e) { xmlHttp=new ActiveXObject("Microsoft. A página PHP O usuário paginou chamado pelo Javascript. 4. 3. A página é escrita em PHP usando o XML DOM carregar o original “cd_catalog. Abre o objeto de XMLHTTP com o URL dado.php”. A função showCD() Se um select for selecionado a função executar o seguinte: Convida a função de GetXmlHttpObject para criar um objeto de xmlHttp Define o URL (nome do arquivo) para emitir ao usuário Adiciona um parâmetro (q) ao URL com o índice do campo da entrada Adiciona um número aleatório para impedir que o usuário use um arquivo cached 5.XMLHTTP"). $xmlDoc = new DOMDocument(). for ($i=0. $x=$xmlDoc->getElementsByTagName('ARTIST'). } } return xmlHttp. 2. . $xmlDoc->load("cd_catalog. O código funciona uma pergunta de encontro ao arquivo XML e retorna o resultado como o HTML: <?php $q=$_GET["q"]. Emite um pedido do HTTP ao usuário 1. 7. $i<=$x->length-1.xml").{ xmlHttp=new ActiveXObject("Msxml2. } Exemplo explicado stateChanged() e as funções de GetXmlHttpObject são as mesmas que no último capítulo. A chamada stateChanged quando uma mudança é provocada 6.XMLHTTP").

for ($i=0. Exemplo de AJAX explicado O exemplo acima contem um formulário do HTML. echo("<br />"). e um link a um Javascript: <html> <head> <script src="selectcustomer_xml.} } } $cd=($y->childNodes). } } ?> Exemplo explicado Quando a pergunta é emitida do Javascript à página de PHP o seguinte acontece: 1.$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo($cd->item($i)->nodeName). A informação do album é emitida ao placeholder do “txtHint”.js"></script> </head> . que possa ser examinado e analisado gramaticalmente usando métodos e propriedades da árvore do nó de W3C DOM. o responseXML retorna a resposta como XML. e então nós usaremos o DOM extrair os valores a ser indicados. 3. 2. Exemplo de AJAX ResponseXML Quando o responseText retornar a resposta do HTTP como uma string. A propriedade de ResponseXML retorna um objeto do original de XML. Exemplo de AJAX ResponseXML No seguinte exemplo de AJAX nós demonstraremos como um Web page pode buscar a informação de uma base de dados usando a tecnologia de AJAX.$i<$cd->length. echo(": "). PHP cría um objeto de XML DOM do arquivo de “cd_catalog. Todos os elementos do “artista” (nodetypes = 1) são dados laços completamente para encontrar um nome combinar esse emitido do Javascript. diversos elementos do <span> para prender os dados retornados. O CD que contem o artista correto é encontrado. 4.xml”. Os dados selecionados da base de dados esta vez serão convertidos a um original de XML. echo($cd->item($i)->childNodes->item(0)->nodeValue).

url. document.getElementById("contactname"). document.responseXML. url=url+"&sid="+Math.innerHTML= xmlDoc.readyState==4) { var xmlDoc=xmlHttp.onreadystatechange=stateChanged.open("GET".getElementsByTagName("contname")[0].getElementsByTagName("compname")[0].random().js”: var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject().<body> <form action=""> Select a Customer: <select name="customers" onchange="showCustomer(this. url=url+"?q="+str. Em outras palavras: Cada vez que a mudança que do usuário o valor na gota encaixota para baixo.value)"> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <b><span id="companyname"></span></b><br /> <span id="contactname"></span><br /> <span id="address"></span> <span id="city"></span><br/> <span id="country"></span> </body> </html> O exemplo acima contem um formulário do HTML com uma gota encaixota para baixo “clientes chamados”.true).nodeValue. A execução da função é provocada pelo evento do “onchange”.childNodes[0].send(null). xmlHttp.getElementById("companyname"). return. xmlHttp. xmlHttp. o showCustomer() da função é chamado.childNodes[0]. O código do Javascript é alistado abaixo. } function stateChanged() { if (xmlHttp. uma função chamada “showCustomer()” está executada. } var url="getcustomer_xml. if (xmlHttp==null) { alert ("Your browser does not support AJAX!"). Quando o usuário seleciona um cliente na caixa dropdown. .documentElement.asp".nodeValue.innerHTML= xmlDoc. O AJAX JavaScript Este é o código do Javascript armazenado no arquivo “selectcustomer_xml.

getElementById("city").querystring("q") & "'" on error resume next set conn=Server. esta vez nós retornamos o resultado como um original de XML (com responseXML) e usos o DOM extrair os valores que nós queremos ser indicados. entretanto. } catch (e) { xmlHttp=new ActiveXObject("Microsoft.getElementsByTagName("city")[0]. try { // Firefox.innerHTML= xmlDoc. document.innerHTML= xmlDoc. A página é escrita em VBScript para um usuário de informação do Internet (IIS).nodeValue.getElementsByTagName("country")[0].childNodes[0]. } O showCustomer() e as funções de GetXmlHttpObject() acima estão o mesmo que em capítulos precedentes.childNodes[0]. é um arquivo simples do ASP chamada “getcustomer_xml. O código funciona uma pergunta do SQL de encontro a uma base de dados e retorna o resultado como um original de XML: <% response.asp”.CreateObject("ADODB.getElementById("country"). } } return xmlHttp. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.contenttype="text/xml" sql="SELECT * FROM CUSTOMERS " sql=sql & " WHERE CUSTOMERID='" & request.document. stateChanged() a função é usado também mais cedo neste tutorial. } } function GetXmlHttpObject() { var xmlHttp=null.innerHTML= xmlDoc. Safari xmlHttp=new XMLHttpRequest(). Opera 8.0+.getElementsByTagName("address")[0].XMLHTTP"). document.nodeValue.nodeValue. Poderia fàcilmente ser reescrita em PHP. A página do usuário de AJAX A página do usuário chamada pelo Javascript.expires=-1 response.Connection") . ou em alguma outra língua do usuário.getElementById("address").childNodes[0].XMLHTTP").

Base de dados de AJAX como o exemplo de XML No exemplo de AJAX abaixo nós demonstraremos como um página web pode buscar a informação de uma base de dados de MySQL.4.fields("country")& "</country>") response.mdb")) set rs=Server.0" conn. porém há uma diferença grande: neste exemplo nós começamos os dados da página de PHP enquanto XML que usam o responseXML funcionam.fields("city")& "</city>") response. Este exemplo consiste em quatro elementos:    Uma base de dados de MySQL Um Formulário simples em HTML Um JavaScript .CreateObject("ADODB. e configurações um original de XML com os dados. O valor de defeito para esta propriedade é o “texto/HTML”. A propriedade de ContentType ajusta o tipo satisfeito do HTTP para o objeto da resposta.fields("address")& "</address>") response. Exemplo do responseXML de PHP e de AJAX AJAX pode ser usado retornar a informação da base de dados como XML.OLEDB.write("<contname>" &rs.Mappath("/db/northwind.fields("companyname")& "</compname>") response.Open sql.0' encoding='ISO-8859-1'?>") response.write(err.recordset") rs. a converter a um original de XML.write("<?xml version='1.Open(Server.Provider="Microsoft.contenttype= " texto/xml ".write("<compname>" &rs.write("<address>" &rs. Esta vez nós queremos o tipo satisfeito ser XML.fields("contactname")& "</contname>") response. e a usar à informação de exposição em diversos lugares diferentes. em vez apenas de receber um PHP output e de indicá-lo. Este exemplo meu parece muito como “o exemplo da base de dados de AJAX PHP” no último capítulo. Receber a resposta como um original de XML permite que nós atualizemos esta página em diversos lugares.conn. conn if err <> 0 then response.description) set rs=nothing set conn=nothing else response.write("</company>") end if on error goto 0 %> Observar a segunda linha no código do ASP acima: response.Jet.write("<company>") response.write("<city>" &rs. Neste exemplo nós atualizaremos diversos elementos do <span> com a informação que nós recebemos da base de dados.write("<country>" &rs. Então nós selecionamos dados da base de dados.

Abaixo do formulário há diversos elementos diferentes do <span> a que são usados porque placeholders para os valores diferentes nós vontade retrive.o formulário do HTML    O formulário do HTML é um select “users” com nomes e a “identificação” da base de dados como valores da opção. Quando o usuário seleciona um objeto. Uma página em PHP A base de dados A base de dados que nós nos estaremos usando em olhares deste exemplo como este: id 1 2 3 4 FirstName Peter Lois Joseph Glenn LastName Griffin Griffin Swanson Quagmire Age 41 40 39 41 Hometown Quahog Newport Quahog Quahog Brewery Piano Teacher Police Officer Pilot Job O formulário do HTML O exemplo acima contem um formulário simples do HTML e uma ligação a um Javascript: <html> <head> <script src="responsexml.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <h2><span id="firstname"></span> &nbsp. uma função chamada “showUser()” está executada. A execução da função é provocada pelo evento do “onchange”.js"></script> </head> <body> <form> Select a User: <select name="users" onchange="showUser(this. .<span id="lastname"></span></h2> <span id="job"></span> <div style="text-align: right"> <span id="age_text"></span> <span id="age"></span> <span id="hometown_text"></span> <span id="hometown"></span> </div> </body> </html> Exemplo explicado .

onreadystatechange=stateChanged xmlHttp.getElementById("age"). document.nodeValue.innerHTML="Age: ".true) xmlHttp. document.getElementById("hometown_text").getElementsByTagName("hometown")[0].innerHTML="<br/>From: ".XMLHTTP") } return objXMLHttp } O exemplo explicou O showUser() e as funções de GetXmlHttpObject são o mesmo que no capítulo da base de dados de AJAX de PHP. document.getElementById("lastname"). O JavaScript Este é o código do Javascript armazenado no arquivo “responsexml.innerHTML= xmlDoc.getElementsByTagName("age")[0].innerHTML= xmlDoc.childNodes[0]. document.innerHTML= xmlDoc.innerHTML= xmlDoc.getElementsByTagName("firstname")[0].random() xmlHttp.js”: var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null){ alert ("Browser does not support HTTP Request") return } var url="responsexml.open("GET".url.childNodes[0].readyState==4 || xmlHttp.nodeValue.send(null) } function stateChanged() { if (xmlHttp.nodeValue.readyState=="complete") { xmlDoc=xmlHttp.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.nodeValue.getElementById("firstname").getElementById("job").getElementById("age_text").childNodes[0].childNodes[0]. o showUser() da função é chamado e outputs o resultado nos elementos especificados do <span>. document.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.childNodes[0].innerHTML= xmlDoc.getElementsByTagName("job")[0].nodeValue. A função stateChanged() Se um artigo no select selecionado a função executar o seguinte: .getElementsByTagName("lastname")[0].Em outras palavras: Cada vez que o usuário muda o valor no campo select.responseXML.php" url=url+"?q="+str url=url+"&sid="+Math. } } function GetXmlHttpObject() { var objXMLHttp=null if (window. document. document.getElementById("hometown").

$row['Job'] . 5. $row['FirstName'] . while($row = mysql_fetch_array($result)) { echo "<firstname>" . header("Cache-Control: no-cache. } echo "</person>". } mysql_select_db("ajax_demo". echo "<lastname>" . $result = mysql_query($sql). "</lastname>"."". 4. "</hometown>". 6. 'abc123'). if (!$con) { die('Could not connect: ' . $con). 2.$q. O código funciona uma pergunta do SQL de encontro a uma base de dados e retorna o resultado como um original de XML: <?php header('Content-Type: text/xml'). é um arquivo simples de PHP chamada “responsexml. $row['Age'] . echo "<age>" . "</age>". 'peter'. A página é escrita em PHP e usa um databse de MySQL. //A date in the past header("Expires: Mon. must-revalidate"). $sql="SELECT * FROM user WHERE id = ". echo '<?xml version="1. 2.1. O índice-tipo do original de PHP é ajustado para ser “texto/xml” O original de PHP é ajustado ao “nenhum-esconderijo” para impedir caching A variável de $q é ajustada para ser os dados emitidos do HTML page PHP abre uma conexão a um usuário de MySQL O “usuário” com a identificação especificada é encontrado Os dados são outputted como um original do xml AJAX AppML . Define a variável do “xmlDoc” como um original do xml usando a função do responseXML Recupera dados dos originais do xml e coloca-os nos elementos corretos do <span> A página de PHP A página do usuário chamou-se pelo Javascript.php”. mysql_close($con). $row['Hometown'] . $q=$_GET["q"]. 26 Jul 1997 05:00:00 GMT"). "</job>".0" encoding="ISO-8859-1"?> <person>'. $con = mysql_connect('localhost'. mysql_error()). echo "<job>" . ?> O exemplo explicou Quando a pergunta é emitida do Javascript à página de PHP o seguinte acontece: 1. "</firstname>". 3. $row['LastName'] . echo "<hometown>" .

. AppML usa a tecnologia de AJAX AppML usa a tecnologia de AJAX. AppML funcionará em todos os browsers. AppML é Independent do Browser Desde que AppML usa somente padrões da Internet como HTML (XHTML). Com o AppML você pode criar aplicações do Internet sem programar. AppML permite que o programador redefina dados e funções quando a aplicação funcionar. usada descrever aplicações. CSS. Desde que as aplicações de AppML são escritas em XML. um projeto do desenvolvimento para um cliente norueguês grande foi começado. com estruturas de dados e funções predefinidas. O objetivo do projeto era converter um sistema de informação enorme de uma aplicação desktop de Windows a uma aplicação moderna da Internet usando somente AppML.AppML é uma iniciativa aberta da fonte de W3Schools. e Javascript. Em setembro 2000. as aplicações de AppML são self-describing. Que é AppML?        AppML está para Application Markup Language AppML usa XML para descrever aplicações da Internet As aplicações de AppML são self-describing AppML é uma língua declarativa AppML é uma plataforma independente AppML usa a tecnologia de AJAX AppML é uma iniciativa open source(fonte aberta) da W3Schools AppML é uma língua declarativa AppML não é uma língua de programação. AppML usa a tecnologia de AJAX. a equipe de funcionários em W3Schools começou a desenvolver AppML. É uma língua declarativa. As aplicações tradicionais são escritas em uma língua de programação e compiladas. XML. Uma comunicação da Internet entre o web client e o web server é feita com os pedidos do HTTP. Historia Em 1999.

livre da carga. O projeto era um sucesso enorme.O sistema AppML-baseado novo foi lançado em 2001. e as tampas de AppML agora sobre 1000 aplicações running. diversos meses antes da programação. as centenas de aplicações novas têm sido adicionadas. como um produto de fonte aberta . com o tempo de desenvolvimento reduzido por 75% comparado ao desenvolvimento ordinário da web applications. . Em dezembro 2006. era uma das aplicações disponíveis de AJAX do primeiro comercial. Desde então. W3Schools decidiu oferecer AppML ao público.

Sign up to vote on this title
UsefulNot useful