Ajax

<< Click to Display Table of Contents >>

Navigation:  Passo-a-Passo >

Ajax

Previous pageReturn to chapter overviewNext page

Forma mais simples de ajax.

 

Index.html

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<script>

    function mostraMensagem() {

        var div = document.getElementById("mostraMsg");

        div.innerHTML = "Mensagem!!!!";

        return false; // isso impede o "refresh"

    }

</script>

<body>

    <a href="page2.html" onclick="return mostraMensagem()">Clique aqui para ver a mensagem</a>

    <form id="form1">

        <input id="Text1" type="text" />

        <br />

        <input id="Button1" type="submit" value="Enviar" />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <div id="mostraMsg"></div>

    </form>

</body>

</html>

 

page2.html

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

<a href="page2.html">Clique aqui para ver a mensagem</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    Mensagem 2

</body>

</html>