Cargar Más
Lo Más Buscado!

Popular Posts

Tecnologia do Blogger.
ad
Menú Principal
Home Ajax Aplicativos Ajax Na Prática: Primeira Aplicação Ajax
Ajax Aplicativos

Ajax Na Prática: Primeira Aplicação Ajax

9/02/2018
Compartir:

Alguns companheiros tinham solicitado alguns tutoriais sobre a tecnología Ajax. Bom, para mim é um prazer abordar este tópico. Para as pessoas que estão começando peço que não tenham medo pois vou explicar tudo e vou aguardar suas perguntas em caso tenha deixado passar alguma coisa, ok? 

Preparando tudo  

  • Para começar, quero explicar a aplicação e o que vai fazer em nosso navegador, certo?
    • É uma aplicação simples que mostra ao usuário um texto e um botão na tela e
    • após pressionar esse botão, 
    • o texto muda e o botão desaparece.

Etapa 1: Criando Pasta do Projeto

La carpeta que he creado se llamará AjaxProjects (en español "Projectos Ajax"). Con el siguiente comando creamos la carpeta:

mkdir AjaxProjects
view raw gistfile1.txt hosted with ❤ by GitHub

Entramos a la carpeta creada ('AjaxProjects') que será considerada nuestro "directório raíz", esto con el siguiente comando:

cd AjaxProject
view raw gistfile1.txt hosted with ❤ by GitHub

Paso 2: Creando Mi Archivo En la Carpeta Raíz De Mi Proyecto

El Directório Raíz de mi Proyecto llamado AjaxProjects contiene un archivo que lo llamaré Project1.html. Este archivo lo crearé con el siguiente comando:

touch Project1.html
view raw gistfile1.txt hosted with ❤ by GitHub

Paso 3: Codificando Mi Archivo "Project1.html"

El Archivo que he creado, llamado Project1.html, va a tener el siguiente código; no se preocupen por el código que lo explicaré detalladamente:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Objeto llamado XMLHttpRequest</title>
</head>
<body>
<!--Elemento HTML5 'div' que crea divisiones y tiene como atributo "demo"-->
<div id="demo">
<h1>Mi Objeto XMLHttpRequest</h1>
<button type="button" onclick="CargaDocumento()">Cambie Contenido</button>
</div>
<!--Mi Script Ajax-->
<script>
function CargaDocumento() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200){
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET","texto.txt",true);
xhttp.send();
}
</script>
</body>
</html>
view raw Project1.html hosted with ❤ by GitHub

Paso 4: Creando y Codificando Mi Archivo "text.txt"

El Archivo "text.txt" lo crearé para introducir en él un texto que contendrá lo que quiero mostrar en pantalla a la hora de presionar en el botón "cambie contenido", ya verán!: 
Soy el contenido de text.txt
view raw text.txt hosted with ❤ by GitHub

    • Después de escribir el texto clicamos en la tecla "Esc" de nuestro teclado y despues el comando:
    • :wq
      view raw gistfile1.txt hosted with ❤ by GitHub

    • Después de Hacer todo lo anterior, ponemos a funcionar nuestro Aplicativo; con lo que tendremos el siguiente resultado!:


    • Hagan sus preguntas y claro tambien no dejen de hacer sus críticas por favor!    
    Tags: Ajax Aplicativos
    Compartir:

    Ajax

    Aplicativos

    Ajax

    Ajax Na Prática: Primeira Aplicação Ajax

    Sep 02 2018
    Aplicativos

    PHP: Tutorial CodeIgniter - Instalación y Configuración - Parte 1

    Feb 05 2017
    Aplicativos

    PHP: Tutorial CodeIgniter - Hola Mundo - Parte 7

    Dec 10 2016
    Aplicativos

    PHP: Tutorial CodeIgniter - Configuración - Parte 5

    Dec 04 2016
    Aplicativos

    PHP: Tutorial CodeIgniter - Configuración - Parte 4

    Dec 03 2016

    Déjenos su Comentário:

    0 commentários:

    Assinar: Postar comentários (Atom)

    También puede leer

    Aplicativo PHP : Formulário HTML Usando El Método POST De PHP

    Aquí comenzamos con nuestra primera aplicación usando la tecnologías PHP. Este primer proyecto posee el siguiente proces

    Miguel Gaspar