request assincrono

Seite 1

index.php

<?php

ini_set( 'default_charset', 'utf-8');

?>

<!DOCTYPE html>

<html lang='pt-br'>

<head>

<meta charset='utf-8'>

<!-- Reset estilos. pode dar pau no bootstrap--><!--

<link rel='stylesheet' type='text/css' href='publico/idiossincrasias/css/resetstylesheet.css'>

--><!-- Reset estilos. pode dar pau no bootstrap-->

<!-- framework JQuery -->

<script type='text/javascript' src='publico/jquery/jquery.js'></script>

<!-- framework JQuery -->

<!-- estilo e script individual -->

<script type='text/javascript' src='publico/idiossincrasias/js/main.js'></script>

<link rel='stylesheet' type='text/css' href='publico/idiossincrasias/css/estilo.css'>

<!-- estilo e script individual -->

<!-- estilo e script bootstrap -->

<script type='text/javascript' src='publico/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js'></script>

<link rel='stylesheet' type='text/css' href='publico/bootstrap-4.4.1-dist/css/bootstrap.min.css'>

<!-- estilo e script bootstrap -->

<title>Cabeçalho Pagina</title>

<head>

<body>

<header id='cabecalho'>

<pre>cabecalho</pre>

<nav id='navcabecalho'>

<ul id='navbar'>

<li><a href='#'> Nav Bar1 </a></li> |

<li><a href='#'> Nav Bar2 </a></li> |

<li><a href='#'> Nav Bar3 </a></li>

</ul>

</nav>

</header>

<br>

<main id='containercorpo'>

<pre>Corpo</pre>

<table>

<tr>

<th>cab1</th>

<th>cab2</th>

</tr>

<tr>

<td>dado1 linha1</td>

<td>dado2 linha 1</td>

</tr>

<tr>

<td>dado1 linha2</td>

<td>dado2 linha2</td>

</tr>

</table>

<br>

<div>

<hr>

<input type='text' name='nome' id='nome'>

<input type='text' name='idade' id='idade'>

<input type='button' name='btn' id='btn' onclick='' value='Botao'>

<hr>

</div>

<br>

<div id=recebedados></div>

<br>

</main>

<br>

<footer id='rodape'>

<pre>Rodape</pre>

</footer>

</body>

</html>

Seite 2

servidor.php

<?php

ini_set( 'default_charset', 'utf-8');

if(!empty($_GET)){

if(isset($_GET['nome'])){

$nome = $_GET['nome'];

$idade = $_GET['idade'];

$ID = 1;

echo "<table class='table table-houver'>

<thead>

<tr>

<th>ID</th>

<th>Nome</th>

<th>Idade</th>

<tr>

</thead>

<tbody>

<tr>

<td>$ID</td>

<td>$nome</td>

<td>$idade</td>

</tr>

<tr>

<td>".++$ID."</td>

<td>$nome</td>

<td>$idade</td>

</tr>

<tr>

<td>".++$ID."</td>

<td>$nome</td>

<td>$idade</td>

</tr>

</tbody>

</table>";

}

}

?>

Seite 3

main.js

function enviarrequest(){

var nome = document.getElementById('nome').value;

var idade = document.getElementById('idade').value;

var Resultado = document.getElementById('recebedados');

var Request = new XMLHttpRequest();

Request.open("GET", 'servidor.php?nome='+nome+'&idade='+idade, true);

Request.onreadystatechange = function(){

if(Request.readyState == 4){

if (Request.status == 200){

//$('#recebedados').html(Request.responseText);

Resultado.innerHTML = Request.responseText;

}else{

alert('erro na conecao'+Request.statusText);

}

}

};

Request.send(null);

}

$(document).ready(function(){

$('#btn').click(function(){

enviarrequest();

});

});

Seite 4

estilo.css

#cabecalho{

background-color:grey;

border-style:dotted;

}

#navcabecalho{

border-style:dotted;

}

#containercorpo{

width:800px;

height:100%;

margin-left:auto;

margin-right:auto;

border-style:dotted;

}

#rodape{

background-color:grey;

border-style:dotted;

}

#navbar{

display:flex;

list-style-type: none;

}