Getting started with AJAX Começando com AJAX

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Este guia fornece algumas informações sobre os antecedentes Ajax, e então saltou na direita e faz com que você começou com exemplos.

JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. O JavaScript tem sido a principal utilização de objetos XMLHttpRequest para um bom número de anos que passaram, mas só recentemente é que tudo começou a ganhar alguma "fama". A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. Um lote do distúrbio tem a ver com as muitas aplicações web avançadas com desenvolvedores web que o vejo, baba e querem ter seu próprio site a essas mesmas aplicações avançadas exato / features. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Mas alguns dos que também tem a ver com o grupo de pessoas em AdaptivePath que têm chamado esta aplicação Ajax

Ajax Beginners: What in the world is Ajax? Ajax Iniciantes: Que no mundo é Ajax?

In a nutshell? Em poucas palavras? Well Ajax is a solution to web interfaces. Bem Ajax é uma solução que web interfaces.

Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. Comumente, o usuário digita alguns dados da web ou faz uma simples escolha, e clica em um botão finalizar essa escolha ou a entrada dos dados e envia os dados de volta para o servidor. The server hastily observes the data and sends back an entire new web page. O servidor apressadamente observa os dados e envia de volta uma nova página da Web inteira. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. Após a recarregar a página toda vez que você quer fazer algo é muito chato, disjuntiva e extremamente morosas para o usuário. XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! XMLHttpRequest ressurge o navegador-servidor para interação nos bastidores, assim o usuário pode simplesmente continuar a jogar com a mesma página, mesmo enquanto elementos da página estão conversando com o servidor!

With JavaScript we’ve always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves. Com o JavaScript semper temos sido capazes de script do lado do servidor sem que nada aconteça no navegador, usando alguns truques na nossa mangas clássico.

Caching form data to a file with JavaScript on a server is good, but this usually doesn’t return any useful information to the JavaScript that calls it, so its effectiveness is very limited. Cache de dados para formar um arquivo com o JavaScript em um servidor é bom, mas isso geralmente não retorna qualquer informação útil para o JavaScript que ele pede, por isso a sua eficácia é muito limitada. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, no entanto, pode obter uma parcela de dados completo de volta a partir do script que chama. Hence the “XML” part of the name - which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn’t your preferred choice. Daí o "XML" parte do nome - o que é realmente pouco para olha lá das sortes, como o tipo de "Java" parte de JavaScript, porque os dados podem ser devolvidos texto simples ou o que quer que você gosta, se o XML não é sua escolha preferida.

This alone opens up so many exciting possibilities. Isto por si só abre tantas possibilidades empolgantes. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Cada formulário submetido, a cada evento JavaScript, e tudo aquilo que o pedido, agora pode interagir com o servidor de bases de dados e processamento do lado do poder! Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. Obtenção de dados, autenticação senha, imagem geração - que acabou nome dele, Ajax pode ativá-la.

Putting Ajax Into Practice Pôr em prática Ajax

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. A única coisa que limita Ajax-reforçada aplicação web é a sua imaginação e pelo apoio navegador. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Navegadores Mozilla-based pode fazê-lo, Safari, e versões mais recentes do Internet Explorer, Opera e 8, mas não Opera 7. It’s best to slot in an alternative way of doing things for users who aren’t as witty as you’d hope for them to be. É melhor slot em uma forma alternativa de fazer as coisas para os usuários que não são tão engraçado como você poderia esperar para que ela seja. Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it’s pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer. Além disso, o Internet Explorer faz as coisas um pouco diferente (mais definitivamente) de todos os outros navegadores, por isso é essencial trabalhar bastante o código para dar conta das custoso de 80% da população, que contam com Explorer.

Now to the exciting part! Agora para o lado emocionante! Let’s generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. Vamos gerar uma simples aplicação que pode aceitar entrada do usuário, passa-lo para algumas PHP no servidor que verifica-la contra um banco de dados, e retorna o resultado para o browser em uso. We assimilate it in three parts. Nós assimilá-lo em três partes.

First, we need an HTML form. Em primeiro lugar, precisamos de um formulário HTML. As you’ can see below: Como vocês podem ver abaixo:

 <html> 
  <head> 
  <title>Report</title> <title> relatório </ title> 
  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <script type='text/javascript' src='xhr.js'> </ script> </ head> <body> <form action="fallbackpage.php" method="post"> 
  <p>Welcome, student. <p> Bem-vindo, estudante. Please enter your essay here:<textarea name="essay" id="essay"> Digite aqui a sua redação: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <input type = "submit" name = "submit" value = "Submit" onClick = "regresso 
  grade(this.form.essay.value);"> grau (this.form.essay.value); "> 
  </p> </ p> 
  </form> </ form> 
  </body> </ body> 
  </html </ html 

Note: For users without proper support for our script ( named xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Nota: Para os usuários sem o devido apoio para o nosso script (chamado xhr.js), o formulário estará simplesmente apresentar ao recuo no fallbackpage.php página. Ok, é aqui que surge o JavaScript nos, nós vamos levá-lo lentamente.

 function grade(essay) { função grau (ensaio) ( 

The first thing we have to do is initialize the object. A primeira coisa que temos a fazer é inicializar o objeto. There are two ways we must do this, for different browsers. Há duas maneiras que temos de fazer, para diferentes browsers.

 // Mozilla version / / Mozilla versão 
     if (window.XMLHttpRequest) { if (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest (); 
     } ) 
     // IE version / / IE versão 
     else if (window.ActiveXObject) { else if (window.ActiveXObject) ( 
         xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr = new ActiveXObject ( "Microsoft.XMLHTTP"); 
     } ) 

We then escape the user input to make it URL-safe: Nós então escapar à entrada de usuário para torná-la segura de URL:

     essay=encodeURIComponent(essay); essay = encodeURIComponent (redação); 

and use the open method of the object to open a new connection to the PHP script: e utilização do método aberto de opor-se a abrir uma nova conexão para o script PHP:

     xhr.open("POST","grade.php"); xhr.open ( "POST", "grade.php"); 

The method requires two arguments: first, the HTTP method (GET or POST) ; second, the URL of the script. A quick HTTP header asserts the script for what it’s getting, and then the send method conveys the actual request: O método requer dois argumentos: o primeiro, o método HTTP (GET ou POST), em segundo lugar, o URL do script. Uma rápida cabeçalho HTTP afirma o script para o que está recebendo e, em seguida, enviar o método conduz o real pedido:

  xhr.setRequestHeader( xhr.setRequestHeader ( 
       'Content-Type', "Content-Type", 
       'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); 'application / x-www-form-urlencoded; charset = UTF-8'); xhr.send (redação); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. Esta última etapa não é necessária para solicitações GET, onde todos os dados possam estar contidas na query string do URL.

Obtaining Final Results Obtendo resultados finais

We’re finally ready to see if the HTTP request we made worked. Estamos finalmente pronto para ver se a solicitação HTTP que fizemos funcionou. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. A propriedade readyState contagens acima de zero durante o pedido, e quando o servidor demonstra 4 página foi carregado com sucesso.

  xhr.onreadystatechange=function() { Xhr.onreadystatechange = função () ( 
       if (xhr.readyState==4) { if (xhr.readyState == 4) ( 

If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. Se, de facto, o real pedido trabalhou, então, podemos obter a saída do script do lado do servidor por responseText questionando a propriedade, que contém uma corda. For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible. Para mais de um servidor de script complexo de saída, uma responseXML propriedade, o que pode segurar um documento completo do objeto dados XML, é também uma opção acessível.

      grade = xhr.responseText; = Xhr.responseText grau; 
       alert ("Nice essay. Your grade is " + grade); Alerta ( "Nice redação. Seu grau é" + grau); 
     } ) 
     return false; retornar false; 
  } ) 

In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. Em conclusão, o terceiro componente consistem de script PHP, que vive basicamente do servidor e aguarda pacientemente para o JavaScript para passá-la por isso alguns suculento dados possam prosperar. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. Este exemplo usa alguns PHP, mas qualquer linguagem que você gosta - Ruby, Perl, C, ASP - fazer suas necessidades também. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. O núcleo desse script é um exemplo singular de língua função chamada grade_essay () que o aluno redações graus de 1 a 100, mas vou rever essa parte para economizar espaço.

  <?php <? php 
  function grade_essay($essay) { função grade_essay ($ redação) ( 
       return strlen($essay); retorno strlen ($ redação); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); = $ essay urldecode (implodir (file ( 'php: / / input'))); 
  $grade = grade_essay($essay); grade_essay $ grau = ($ redação); 
  echo $grade; echo $ grau; 
  ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. O php: / / input agarra os dados POST, que é colocado em uma seqüência, para os decodificados e passou classificação algoritmo inteligente. The algorithm returns a numeric grade. O algoritmo retorna uma grade numérica. Lastly, we just output the grade with echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Por fim, acabamos de saída com o grau echo - normalmente, esta iria exibir no navegador, mas, uma vez que o script PHP está sendo executado "nos bastidores", a seqüência de saída é simplesmente retornou para o JavaScript que lhe chamava. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml . Se você precisar de dados estruturados, seria um documento XML de saída com uma declaração em ecoar exatamente o mesmo caminho, mas o do tipo de conteúdo da página basicamente saída deve ser definida para text / xml.

What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay. O que o usuário vê é esta: Ela / Ele tipos de redação em sua área de texto no browser, clica Submeter, e dentro de instantes uma caixa de alerta aparece dando-lhe uma nota final sobre o ensaio. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. Invisível, a redação tem sido enviado para o servidor, ler e avaliadas por uma equipe de PHP elfos, e inevitavelmente devolvidos com uma grade, sem nunca recarregar a página. The user can modify her essay and resubmit it continuously. O usuário pode modificar a sua composição e reenviá-lo continuamente.

And that’s the general substance of the almost magical XMLHttpRequest object! E esse é o grande mérito do objeto XMLHttpRequest quase mágica! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . O exemplo é bem simples e para a frente, mas os usos do objeto pode ser altamente, multi inteligente.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit Para mais inspiração e grandes exemplos de aplicações Ajax engenhoso pode momentaneamente SimpleHelp.Net e abster-se de visita iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Netflix and e Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. No entanto, os dados e as funções que lhe Ajax envia e atos é simplesmente fora de si.