Lendo um arquivo de texto com AJAX

Inicio mostrando como realizar uma requisição de arquivos de texto com AJAX. Em tempos de Web 2.0, não podemos pensar mais em sites que usem requisições síncronas para rotinas de interação com o usuário. Uma das técnicas mais utilizadas para esse fim é o AJAX – Assynchronous Javascript and XML. De uma forma resumida e

Inicio mostrando como realizar uma requisição de arquivos de texto com AJAX.

Em tempos de Web 2.0, não podemos pensar mais em sites que usem requisições síncronas para rotinas de interação com o usuário.

Uma das técnicas mais utilizadas para esse fim é o AJAX – Assynchronous Javascript and XML.

De uma forma resumida e sem muito “tecniquês”, AJAX é a captura de informações sem a necessidade de recarregamento da estrutura do documento HTML a cada requisição ao servidor web.

E para poder fazer conexão assíncrona com o servidor web temos que criar um objeto com as propriedades e métodos AJAX .

Porém, como a web não é um ambiente perfeito, temos que criar um objeto AJAX para os browsers Firefox, Chrome, Opera, Safari, chamado de XMLHttpRequest. E para o IE um objeto ActiveX que faça referencia ao objeto XMLHTTP.

Como padrão de desenvolvimento, vamos criar um arquivo que faça essa identificação e criação chamado de xhr.js.

Para a criação desse arquivo, abra o editor de código de sua preferência e digite o seguinte código:

Arquivo xhr.js

Em seguida, vamos criar o arquivo HTML e fazer referência ao objeto AJAX criado pelo arquivo xhr.js.

Para isso use a  tag script no head da página html. Exemplo:

Arquivo ajax_txt.html

Aplicando um estilo CSS na div Box

Montamos agora o HTML com o combo dos textos.

Para que a chamada AJAX funcione, temos que criar os arquivos de textos com os respectivos nomes: texto1.txt,texto2.txt e texto3.txt.

Em seguida salve os arquivos na mesma pasta onde se encontram os arquivos xhr.js e ajax_txt.html.

Agora é so testar!

Lembrando que para uma requisição AJAX funcionar, ela tem que passar por um servidor. No nosso caso o localhost.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *