AJAX pode ser usado para comunicação interativa com um banco de dados.
Instância de banco de dados AJAX
O exemplo a seguir demonstrará como uma página web lê informações do banco de dados por meio de AJAX:
O arquivo SQL da tabela Websites usado neste tutorial: websites.sql.
Explicação de exemplo - banco de dados MySQL
No exemplo acima, a tabela do banco de dados que usamos é semelhante a esta:
mysql> selecione * em sites;+----+-------------+---------------------- -----+-------+-----+| nome | alexa |+----+--------- -----+---------------------------+-------+-------- -+| 1 | https://www.google.cm/ || Tutorial do codificador || http://www.codercto.com/ || CN || |+----+--------------+------------- - -+-------+-------------+5 linhas no conjunto (0,01 seg)
Explicação de exemplo - página HTML
Quando o usuário seleciona um usuário na lista suspensa acima, uma função chamada "showSite()" é executada. Esta função é acionada pelo evento "onchange":
código do arquivo test.html:
< ! HTML > <html> <cabeça> < meta conjunto de caracteres = " utf-8 " > <title> Tutorial do codificador ( codercto.com ) </title> função <script> mostrarSite ( str ) { se ( str == " " ) { documento.getElementById ( " txtHint " ) . innerHTML = " " ; se ( janela.XMLHttpRequest ) { // Código de execução do navegador IE7+, Firefox, Chrome, Opera, Safari xmlhttp = novo XMLHttpRequest ( ) ; outro { // Código de execução do navegador IE6, IE5 xmlhttp = novo ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = função ( ) { se ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { documento.getElementById ( " txtHint " ) . } xmlhttp.open ( " GET " , " getsite_mysql.php ? q = " + str , true ) ;</ cabeça > <corpo> <formulário> < selecione nome = " usuários " onchange = " showSite(this.value) " > < opção value = " " > Selecione um site: </ option > < opção valor = " 1 " > Google </ opção > < opção valor = " 2 " > Taobao </ opção > < opção value = " 3 " > Tutorial do codificador </ opção > < opção valor = " 4 " > Weibo </ opção > < opção valor = " 5 " > Facebook </ opção > </select> </form> <br> < div id = " txtHint " > < b > As informações do site são exibidas aqui... </ b > </ div > </corpo> </html> A função showSite() executa as seguintes etapas:
Verifique se um site está selecionado
Criar objeto XMLHttpRequest
Crie uma função que seja executada quando a resposta do servidor estiver pronta
Envie uma solicitação para um arquivo no servidor
Observe o parâmetro (q) adicionado ao final da URL (contendo o conteúdo da lista suspensa)
Arquivos PHP
A página do servidor chamada acima através de JavaScript é um arquivo PHP chamado "getsite_mysql.php".
O código fonte em "getsite_mysql.php" executa uma consulta no banco de dados MySQL e retorna os resultados em uma tabela HTML:
Código do arquivo getsite_mysql.php:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $_GET [ " q " ] ) : ' ' ; se ( vazio ( $q ) ) { eco ' Por favor selecione um site ' ; sair } $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $con ) { die ( ' Não foi possível conectar: ' .mysqli_error ( $ con ) ) } ; // Seleciona o banco de dados mysqli_select_db ( $con , " test " ) ; // Define a codificação para evitar caracteres chineses ilegíveis mysqli_set_charset ( $ con , " utf8 " ) ; $ sql = " SELECT * FROM Sites WHERE id = ' " . $ q " ' " ; " <table border='1'><tr><th>ID</th><th>Nome do site</th><th>URL do site</th><th>Classificação Alexa</th><th> País</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { eco " <tr> " ; eco " <td> " . $ row [ ' id ' ] </td> " ; " <td> " . $ row [ ' nome ' ] . " <td> " . $ row [ ' url ' ] " </td> " ; " <td> " . $ row [ ' alexa ' ] " </td> " ; " <td> " . $ row [ ' país ' ] " </td> " ; " </tr> " ; eco " </table> " ; mysqli_close ( $con ) ? > Explicação: Quando uma consulta é enviada de JavaScript para um arquivo PHP, o que acontece:
PHP abre uma conexão com um banco de dados MySQL
Encontre o usuário selecionado
Crie uma tabela HTML, preencha-a com dados e envie de volta o espaço reservado "txtHint"
