XMLHttpRequest

<< Click to Display Table of Contents >>

Navigation:  Passo-a-Passo >

XMLHttpRequest

Previous pageReturn to chapter overviewNext page

Tela

 

js_8

 

 

Index.html

 

<!DOCTYPE html>

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

<head>

</head>

<script>

    function getPaginaDinamicamente() {

 

        // verifica se é IE

        if (window.ActiveXObject) {

            // no caso de IE é assim:

            ajax = new ActiveXObject("Microsoft.XMLHTTP");

        }

        else if (window.XMLHttpRequest) {

            // outros browsers

            ajax = new XMLHttpRequest();

        }

 

        // 1=página não encontrada, 4=pagina finalizada (2,3 = em partes)

        ajax.onreadystatechange = function () {

            // aqui entra quando terminar o processo iniciado por "ajax.send"

            if (ajax.readyState == 4) {

                //alert(ajax.responseText);

                var div_conteudo = document.getElementById("div_conteudo");

                div_conteudo.innerHTML = ajax.responseText;

            }

        }

 

        // open = abrir uma conexao com uma pagina 

        ajax.open("GET", "page2.html", true);

        // executa a chamada e ainda envia variaveis para a pagina

        ajax.send(null);

    }

</script>

<body>

    <form id="form1">

        <input id="Button1" type="button" value="Obter conteúdo do page2.html" onclick="getPaginaDinamicamente()" />

        <br />

        <div id="div_conteudo"></div>

    </form>

</body>

</html>

 

page2.html

 

<!DOCTYPE html>

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

<head>

    <title></title>

</head>

<body>

    <h1>Conteudo o page2.html</h1>

    <p>Parágrafo 1</p>

    <a href="http://www.google.com.br">Google!</a>

</body>

</html>

 

js_7