Ajax + PHP Retornando HTML e JSON

Vou mostrar neste artigo como realizar chamada de uma função PHP via Ajax utilizando método GET através de um evento de clique de botão de uma maneira simples. Neste pequeno tutorial iniciante vou exemplificar uma página HTML contendo o JQuery que executará a chamada via Ajax, a função PHP que fará qualquer coisa retornando primeiramente o HTML a ser impresso e depois retornando um Array em JSON.   HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61   <html> <head> <!-- Incluindo a biblioteca JQuery na página--> <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <title>Este é um teste Ajax</title>   <!--Chamada Ajax para execução de nossa função php--> <script> $(document).ready(function() { //Declaração da minha função que retornará o HTML $("#btnGeraHtml").click(function () { var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto $.ajax({ type: "GET", //método escolhido url: "funcao.php", //arquivo php chamado data: "funcao=html&valor="+variavel, dataType: "html",//tipo de função a ser retornada error: function(){ $("#retorno").html("Erro ao carregar HTML! Tente de novo!"); }, success: function(html){ $("#retorno").html(html); } }); });   //Declaração da minha função que retornará o JSON $("#btnGeraJson").click(function () { var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto var conteudo = ""; $.ajax({ type: "GET", url: "funcao.php", data: "funcao=json&valor="+variavel, dataType: "json", error: function(){ $("#retorno").html("Erro ao carregar JSON! Tente de novo!"); }, success: function(dados){ for(j=0;j<dados.length;j++) { conteudo =...