Começando com ajax

Video: MUNIÇÃO INFINITA!! - Nova 'R70 Ajax' - BLACK OPS 3 Multiplayer Gameplay

Este guia fornece algumas informações de fundo no Ajax, e depois salta para a direita e se você começou com exemplos.

javascript tem sido o principal uso para objetos XMLHttpRequest para um bom número de anos, mas só recentemente é que começou a ganhar alguma “fama”. Uma grande parte do tumulto tem a ver com as muitas aplicações web avançadas com os desenvolvedores web que a vêem, babar e querem seu próprio site para ter essas mesmas exatas avançadas aplicações / recursos. Mas alguns de que também tem a ver com o grupo de pessoas em AdaptivePath que têm chamado esta aplicação Ajax

Ajax iniciantes: O que no mundo é Ajax?

Em poucas palavras? Bem Ajax é uma solução para interfaces web.

Comumente, o usuário web entra alguns dados ou faz uma escolha simples, e clica em um botão de finalizar essa escolha ou entrada de dados e envia os dados para o servidor. O servidor apressadamente observa os dados e envia de volta toda uma página web novo. Ter que recarregar uma página de cada vez que você quiser fazer algo é muito chato, disjuntiva e extremamente demorado para o usuário. XMLHttpRequest ressurge a interação do navegador-servidor para os bastidores, para que o usuário pode simplesmente continuar a jogar com a mesma página, mesmo quando elementos da página estão falando com o servidor!

Com javascript sempre fomos capazes de script do lado do servidor sem que nada aconteça no navegador usando alguns truques clássicos as mangas.

formulário cache de dados para um arquivo com javascript no servidor é bom, mas isso geralmente não retorna qualquer informação útil para o javascript que chama-lo, pelo que a sua eficácia é muito limitada. Ajax, no entanto, pode obter um pacote completo de dados de volta a partir do script que chama. Daí a parte “XML” do nome - o que realmente está ali apenas para olhares de tipos, como o tipo de parte “Java” de javascript, porque os dados retornados pode ser texto simples ou o que quiser, se XML não é sua escolha preferida.

Isso por si só abre tantas possibilidades emocionantes. Cada envio do formulário, cada evento javascript, e qualquer que seja a aplicação mais, agora pode interagir com os bancos de dados do lado do servidor e poder de processamento! recuperação de dados, autenticação de senha, geração de imagem - você apenas nome, Ajax pode ativá-lo.

Colocando Ajax em Prática

A única coisa que limita a aplicação web Ajax-reforçada é a sua imaginação e pelo apoio browser. navegadores baseados no Mozilla pode fazê-lo, Safari e versões mais recentes do Internet Explorer e Opera 8, mas não Opera 7. É melhor slot em uma forma alternativa de fazer as coisas para os usuários que não são tão espirituoso como seria de esperar que eles sejam. Além disso, Internet Explorer faz as coisas um pouco diferente (mais definitivamente) de todos os outros navegadores, por isso é muito essencial para trabalhar o código para explicar o irksome 80% da população que dependem Explorer.

Agora, para a parte emocionante! Vamos gerar um aplicativo simples que pode aceitar a entrada do usuário, passa-lo para algum PHP no servidor que verifica-lo contra um banco de dados, e retorna o resultado para o navegador em uso. Nós assimilá-la em três partes.

Em primeiro lugar, precisamos de um formulário HTML. Como você` pode ver abaixo:

Nota: Para os usuários sem o suporte adequado para o nosso roteiro (nomeado xhr.js), O formulário irá simplesmente enviar para a página de fallback no fallbackpage.php. Ok, este é o lugar onde o javascript vem, nós vamos levá-la lenta.

grau de função (ensaio) {

A primeira coisa que temos a fazer é inicializar o objeto. Há duas maneiras temos de fazer isso, por diferentes navegadores.

Video: Spring MVC & Ajax JQuery - Parte 7

// Mozilla versionif (window.XMLHttpRequest) {xhr = new XMLHttpRequest () -} // IE versionelse if (window.ActiveXObject) {xhr = new ActiveXObject ("Microsoft.XMLHTTP") -}

Em seguida, escapar a entrada do usuário para torná-lo URL-safe:

 ensaio = encodeURIComponent (ensaio) -

e usar o aberto método do objeto para abrir uma nova conexão para o script PHP:

 xhr.open ("POSTAR","grade.php") -

O método requer dois argumentos: primeiro, o método HTTP (GET ou POST)- segundo, a URL do script. Um cabeçalho HTTP rápida afirma o script para o que está chegando, e então o enviar método transmite o pedido real:

xhr.setRequestHeader ( `Content-Type`, `application / x-www-form-urlencoded- charset = UTF-8`) - xhr.send (ensaio) -

Este último passo não é necessário para solicitações GET, no qual todos os dados podem ser contidos na cadeia de consulta do URL.

Obtenção de Resultados Finais

Nós estamos finalmente prontos para ver se a solicitação HTTP que fizemos funcionou. o readyState propriedade conta-se a partir de zero durante o pedido, e mostra 4 quando a página do servidor foi carregado com êxito.

Video: Популярные видео – CodeIgniter и Форма

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

Se de fato a solicitação real funcionou, então podemos obter a saída do script do lado do servidor, consultando o responseText propriedade, que contém uma string. Para mais de um complexo de saída do script do servidor, uma responseXML propriedade, que pode conter um objeto de documento cheio de dados XML, é uma opção também acessível.

 grau = xhr.responseText-alert ("Bom ensaio. Sua nota é " + Grade) -} retornar falso-}

Em conclusão, o terceiro componente consistem de script PHP, que vive basicamente no servidor e aguarda pacientemente que o javascript para passá-lo alguns dados suculentos para que ele possa prosperar. Este exemplo usa alguns PHP, mas qualquer linguagem que você gosta - Ruby, Perl, C, ASP - podem atender às suas necessidades também. O núcleo deste script de exemplo é uma função de linguagem natural chamado grade_essay () que ensaios notas de alunos de 1 a 100, mas vou redigir essa parte para economizar espaço.

Video: RAGNAROK - COMEÇANDO A JOGAR

? Lt; phpfunction grade_essay ($ ensaio) {return strlen ($ ensaio) -} $ ensaio = urldecode (implode (arquivo ( `php: // input`))) - $ grau = grade_essay ($ ensaio) $ grau -echo - gt;

o php: // input agarra os dados POST, que é colocado em uma string, decodificados e passados ​​para o algoritmo de classificação inteligente. O algoritmo retorna uma série numérica. Por fim, apenas saída da nota com eco - Normalmente, isso seria exibido no navegador, mas desde que o script PHP está sendo executado “nos bastidores”, a saída string é simplesmente voltou para o javascript que o chamou. Se você precisa de dados estruturados, um documento XML seria de saída com um eco declaração exatamente da mesma maneira, mas o tipo de conteúdo da página de saída, basicamente, deve ser definido como text / xml.

O que o usuário vê é este: tipos ela / ele seu ensaio na área de texto no navegador, clica em Enviar, e dentro de instantes uma caixa de alerta aparece dando a ele / ela uma nota final sobre o ensaio. Invisivelmente, o ensaio foi enviada para o servidor, lidos e avaliados por uma equipe de elfos PHP, e, inevitavelmente, voltou com uma nota, sem ter que recarregar a página. O usuário pode modificar seu ensaio e reenviá-lo continuamente.

E essa é a substância geral do objeto XMLHttpRequest quase mágico! O exemplo é bastante simples e direto, mas os usos do objeto pode ser altamente, multi inteligente.

Para mais inspiração e grandes exemplos de aplicações Ajax engenhosas você pode momentaneamente abster-se de SimpleHelp.Net e visitar iGoogle, Pageflakes, Netflix e Netvibes.

No entanto, os dados e as funções que o Ajax envia e atua fora é simplesmente até você.