Unconfigured Ad Widget

**marcelono** · 11-02-2012, 06:28

Postado Originalmente por 0KaL Ver Post

Geralmente, quando eu baixo scripts de chat, sempre vejo terríveis códigos HTML ou JavaScript, para poder atualizar a página e obter as novas mensagens. Isso é totalmente inútil.
Além de ser cansativo para o usuário, gasta banda do servidor e até torra o limite de download do usuário (quando ele usa internet limitada).
Vou mostrar que isso é totalmente inútil, e que podemos atualizar apenas determinado conteúdo da página, sem que a página carregue por inteira novamente.
Para isso, vamos criar um simples script que de tempos em tempos, exibe um número randômico qualquer.
Teremos dois arquivos: index.html e numero.php.
A lógica é a seguinte: o arquivo index.html terá uma Div que será atualizada semantica e dinamicamente, obtendo novos conteúdos da página em numero.php. Muito simples, não? O código é ainda mais simples. Vamos usar AJAX!

numero.php

Código PHP:


<?php 
echo rand(); 
?>

Não há mistério neste arquivo. Ele apenas exibe um novo número qualquer a cada nova requisição à página.

index.html

Código HTML:

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
        try{    
                xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
        }
        catch (e){
                try{
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
                }
                catch (e){
                    try{
                                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e){
                                alert("No AJAX!?");
                                return false;
                        }
                }
        }

xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
                document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
                setTimeout('Ajax()',10);
        }
}
xmlHttp.open("GET","numero.php",true); // aqui configuramos o arquivo
xmlHttp.send(null);
}

window.onload=function(){
        setTimeout('Ajax()',10); // aqui o tempo entre uma atualização e outra
}
</script>

<div id="ReloadThis"></div>

</body>
</html>

Configurado o que indico por comentários, vamos atualizar apenas a div de identificação "ReloadThis".

Simples, não é mesmo?

Caramaba amigo vc nem imagina o quanto queria saber como fazer isso ai... Super show muito bom mesmo...

Só que não funfa no IE9 teria como vc dar uma forcinha?

**5Y5T3M** · 14-02-2012, 19:01

Muito legal, utilizei este mesmo codigo ( digo um codigo semelhante, não o mesmo ) , que tem em um livro de aqui quando precisa de referencias, e funciona perfeitamente. Apesar que jQuery té da uma forma mais facil de fazer o mesmo processo.

Só que uma coisa não que você falou eu tenho que comentar, isso vai utilizar banda sim dos dois lados, pois a cada X segundos o script faz uma requisição, o unico modo que evita perda de banda , é usando node.js , no meu caso onde a revenda que possuo não tem suporte a node.js , fiz uma adpatação um tanto quanto simples, criei um script que entra em uma pagina que retorna 0 se não tiver novas mensagens e 1 caso tiver novas mensagens , dessa forma economizo banda dos dois lados, e armazeno este retorno em uma variavel, e ao mesmo tempo faço um botão para atuazaliar a pagina ( sim poderia fazer de forma automatica, mas caso o usuario esteja lendo algo e a pagina recarregar do nada ira ser chato ) , e o botão tem a função de atualizar a pagina, bem simples , e atendeu meu problema.

**0KaL** · 28-02-2012, 00:27

O 5Y5T3M lembrou bem: jQuery torna o processo muito simples. marcelono, tente usando jQuery:

Código:

setInterval(function() {
$("#DIV").load(location.href+" #DIV");
}, 5000);

No exemplo acima, usamos a função setInterval() pra repetir a função definida a cada 5 segundos (5000 milissegundos). Atualizamos apenas uma DIV na página, cuja ID é DIV.
Vamos atualizar agora, buscando dados de outro arquivo:

Código:

setInterval(function() {
$("#DIV").load("conteudo.php");
}, 5000);

Agora, buscamos os dados de um arquivo externo, de nome "conteudo.php".
Devemos definir a DIV:

Código HTML:

<div id="DIV"></div>

**marcelono** · 28-02-2012, 16:42

VLW amigo vou tentar... Obrigado...

em vc pode me dizer tambem como passo valores pela url usando GET?

obrigado

**5Y5T3M** · 29-02-2012, 09:56

Isso você pode fazer com o jQuery , de varias formas, a mais legal ( pelo menos para mim que uso muito JSON e JSONP ) é com o $.get mas é perfeitamente possivel com o load bastar fazer

load(URL, {parametro: "valor", outroparametro: "outrovalor"});

e assim por diante, ( repare que você está passando um objeto logo depois da url e cada parametro do objeto é separado por virgula, então não tem limites,

mas eu faço de um outro modo muito mais facil
acredito que é o mais facil de todos.

load("http://www.site.com.br/?parametro=valor");

isso quando quero por get, dessa forma sempre funciona , já que o jquery ira fazer a conversão
caso seja por post ae sim tem que ser os 2 métodos mostrados acima.
Se quiser usar mais parâmetros faça

load("http://www.site.com.br/?parametro=valor&outroparametro=outrovalor");

pretty good han ?

**lostdarkangel** · 29-02-2012, 14:44

Postado Originalmente por 0KaL Ver Post

O 5Y5T3M lembrou bem: jQuery torna o processo muito simples. marcelono, tente usando jQuery:

Código:

setInterval(function() {
$("#DIV").load(location.href+" #DIV");
}, 5000);

No exemplo acima, usamos a função setInterval() pra repetir a função definida a cada 5 segundos (5000 milissegundos). Atualizamos apenas uma DIV na página, cuja ID é DIV.
Vamos atualizar agora, buscando dados de outro arquivo:

Código:

setInterval(function() {
$("#DIV").load("conteudo.php");
}, 5000);

Agora, buscamos os dados de um arquivo externo, de nome "conteudo.php".
Devemos definir a DIV:

Código HTML:

<div id="DIV"></div>

eu to desenvolvendo meu gerenciador e me quebrei esses dias pra fazer essa atualização de div. valeu mesmo, em jquery isso é easy de mais.

**Alikarbam** · 01-03-2012, 10:13

sim jquery auxilia muito mas o procedimento correto para se fazer uma requesição ajax é diferente :P
faca assim no php para evitar que os outros acessem e veja exeute o php de forma errada:

Código:

<?php
$ac=$_POST['ac'];
if(isset($ac)){
echo rand(); 
}
?>

Assim podera inserir filtros quando quiser utilizar pesquisa via SQL ou coisas do tipo, para evitar SQL injection e afins.

Código:

	<script> 
        function checkChar(name){
            $.ajax({
              url: "rand.php",
              data: "ac=num",
              type: "POST",
              success: function(data) {
                    $("#DIV").html(data);
              }
            });
        }
    </script>

mais informações: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

**5Y5T3M** · 01-03-2012, 14:31

Postado Originalmente por Alikarbam Ver Post

sim jquery auxilia muito mas o procedimento correto para se fazer uma requesição ajax é diferente :P
faca assim no php para evitar que os outros acessem e veja exeute o php de forma errada:

Código:

<?php
$ac=$_POST['ac'];
if(isset($ac)){
echo rand(); 
}
?>

Assim podera inserir filtros quando quiser utilizar pesquisa via SQL ou coisas do tipo, para evitar SQL injection e afins.

Código:

	<script> 
        function checkChar(name){
            $.ajax({
              url: "rand.php",
              data: "ac=num",
              type: "POST",
              success: function(data) {
                    $("#DIV").html(data);
              }
            });
        }
    </script>

mais informações: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

Isso não serve de muito não amigo, pois a parte que seria PROTEGIDA ou escondida sera a palavra para passar os dados neste caso AC , mas como tera que mecher com javasript que é cliente side ( sim eu sei tem server side tmb ), o usuário tem controle total do que roda no seu lado.

e comparado a segurança neste caso é impossivel, porque este metodo é similar a um iframe , que funciona da mesma forma .

E mais um detalhe, o javascript bloqueia acesso via AJAX de dominio diferente , então para quer se preocupar com isso ?

( caso queira ter acesso em dominios diferentes use JSONP como resposta que JSONP aceita uma função anonima de callback )

**Alikarbam** · 01-03-2012, 22:46

Postado Originalmente por 5Y5T3M Ver Post

Isso não serve de muito não amigo, pois a parte que seria PROTEGIDA ou escondida sera a palavra para passar os dados neste caso AC , mas como tera que mecher com javasript que é cliente side ( sim eu sei tem server side tmb ), o usuário tem controle total do que roda no seu lado.

e comparado a segurança neste caso é impossivel, porque este metodo é similar a um iframe , que funciona da mesma forma .

E mais um detalhe, o javascript bloqueia acesso via AJAX de dominio diferente , então para quer se preocupar com isso ?

( caso queira ter acesso em dominios diferentes use JSONP como resposta que JSONP aceita uma função anonima de callback )

Apenas a carater demosntrativou vou fazer um exemplo aqui, apesar de ano ter muito haver com o topico =)

Salve este arquivo como ajax.php

Código:

<?php
$servidor='localhost';
$usuario='root'; //altere
$senha='senha'; //altere
$database='database'; //altere
if(!($conexao = mysql_connect($servidor, $usuario, $senha))) {
   echo "Erro de conexao MySQL";
   exit;
} 

if(!($con=mysql_select_db($database,$conexao))) {
   echo "Erro de conexao no Database";
   exit;
}
$ok = "/[^a-zA-Z0-9 ]/i";
$nome=$_POST['name'];
if(empty($nome))
{
	echo "<strong><label class=\"FormFieldError\">Nome invalido</label></strong>";
	exit;
}

if(strlen($nome) <= 4)
{
	echo "<strong><label class=\"FormFieldError\">Nome muito curto.</label></strong>";
	exit;
}

if(preg_match($ok, $nome)){
	echo "<strong><label class=\"FormFieldError\">Caracteres invalidos.</label></strong>";
	exit;
}

$SQL="SELECT * FROM `players` WHERE `name` LIKE '$nome'";
$RES=mysql_query($SQL);
if($INFO=mysql_num_rows($RES) == 0){
	echo "<strong><label class=\"FormFieldSucess\">Nome disponivel.</label></strong>";
}else{
	echo "<strong><label class=\"FormFieldError\">Nome ja utilizado.</label></strong>";
}
?>

Esta é a função ajax:

Código:

function checkAccount(nome){
	$.ajax({
	  url: "ajax.php",
	  data: "nome="+nome,
	  type: "POST",
	  success: function(data) {
		$("#acc_name_check").html(data); 
		}
	});		
}

Obvio que adaptei todo o script, uso ele completamente diferente, as configurações vem por um include =)

**5Y5T3M** · 02-03-2012, 08:36

Postado Originalmente por Alikarbam Ver Post

Apenas a carater demosntrativou vou fazer um exemplo aqui, apesar de ano ter muito haver com o topico =)

Salve este arquivo como ajax.php

Código:

<?php
$servidor='localhost';
$usuario='root'; //altere
$senha='senha'; //altere
$database='database'; //altere
if(!($conexao = mysql_connect($servidor, $usuario, $senha))) {
   echo "Erro de conexao MySQL";
   exit;
} 

if(!($con=mysql_select_db($database,$conexao))) {
   echo "Erro de conexao no Database";
   exit;
}
$ok = "/[^a-zA-Z0-9 ]/i";
$nome=$_POST['name'];
if(empty($nome))
{
	echo "<strong><label class=\"FormFieldError\">Nome invalido</label></strong>";
	exit;
}

if(strlen($nome) <= 4)
{
	echo "<strong><label class=\"FormFieldError\">Nome muito curto.</label></strong>";
	exit;
}

if(preg_match($ok, $nome)){
	echo "<strong><label class=\"FormFieldError\">Caracteres invalidos.</label></strong>";
	exit;
}

$SQL="SELECT * FROM `players` WHERE `name` LIKE '$nome'";
$RES=mysql_query($SQL);
if($INFO=mysql_num_rows($RES) == 0){
	echo "<strong><label class=\"FormFieldSucess\">Nome disponivel.</label></strong>";
}else{
	echo "<strong><label class=\"FormFieldError\">Nome ja utilizado.</label></strong>";
}
?>

Esta é a função ajax:

Código:

function checkAccount(nome){
	$.ajax({
	  url: "ajax.php",
	  data: "nome="+nome,
	  type: "POST",
	  success: function(data) {
		$("#acc_name_check").html(data); 
		}
	});		
}

Obvio que adaptei todo o script, uso ele completamente diferente, as configurações vem por um include =)

Desculpa em perguntar , mas qual o seu ponto de vista, isso não ficou claro para mim , o que você está tentado passar.

Porque a principio o codigo acima deve funcionar perfeitamente, já o codigo do topo também.
Então nao entedi muito bem o você tentou falar.

heheh

**marcelono** · 02-03-2012, 12:45

Postado Originalmente por 5Y5T3M Ver Post

Isso você pode fazer com o jQuery , de varias formas, a mais legal ( pelo menos para mim que uso muito JSON e JSONP ) é com o $.get mas é perfeitamente possivel com o load bastar fazer

load(URL, {parametro: "valor", outroparametro: "outrovalor"});

e assim por diante, ( repare que você está passando um objeto logo depois da url e cada parametro do objeto é separado por virgula, então não tem limites,

mas eu faço de um outro modo muito mais facil
acredito que é o mais facil de todos.

load("http://www.site.com.br/?parametro=valor");

isso quando quero por get, dessa forma sempre funciona , já que o jquery ira fazer a conversão
caso seja por post ae sim tem que ser os 2 métodos mostrados acima.
Se quiser usar mais parâmetros faça

load("http://www.site.com.br/?parametro=valor&outroparametro=outrovalor");

pretty good han ?

Vlw amigão vou tentar aqui não entendo de jquery e nem ajax ai fica dificil mas vou tentar aqi se eu não conseguir vou te pertubar

**Alikarbam** · 02-03-2012, 18:56

Postado Originalmente por 5Y5T3M Ver Post

Desculpa em perguntar , mas qual o seu ponto de vista, isso não ficou claro para mim , o que você está tentado passar.

Porque a principio o codigo acima deve funcionar perfeitamente, já o codigo do topo também.
Então nao entedi muito bem o você tentou falar.

heheh

Bom voce disse que não via funconalidade em utilizar ajax em requisições esternas e ainda garante que é inseguro ja que o usuario pode controlar a variavel... segue o texto de suas alegações:

Postado Originalmente por 5Y5T3M Ver Post

Isso não serve de muito não amigo, pois a parte que seria PROTEGIDA ou escondida sera a palavra para passar os dados neste caso AC , mas como tera que mecher com javasript que é cliente side ( sim eu sei tem server side tmb ), o usuário tem controle total do que roda no seu lado.

So quis elucidar que utilizando ajax pode-se fazer consultas seguras e precisas integrando javascript+ajax+php. So isso.
No mesmo post vc informou que JSON seria superior ao ajax... Nao vejo pq, ambos sao frameworks diferentes e ambos tem suas particularidades... e ambos sao essencialmente JAVASCRIPT, nenhum deles podera fazer masi que a propria linguagem ja proporciona, portanto ambos são bons igualmente.

Por favor me entenda, nao estou dizendo que vc esta certo, ou errado, so quis esclarecer as coisas para que possiveis leitores deste topico, futuramente, não fiquem com uma fixação de que algo e melhor que outro, ou de que algo é necessariamente inseguro de ser feito com determinada ferramenta. A Insegurança esta nos dedos do programador e não na linguagem em si.

Espero que depois deste topico eu tenha sido claro o suficiente para compreenderem o que de fato tentei fazer rsrs...

**5Y5T3M** · 03-03-2012, 10:12

Postado Originalmente por Alikarbam Ver Post

Bom voce disse que não via funconalidade em utilizar ajax em requisições esternas e ainda garante que é inseguro ja que o usuario pode controlar a variavel... segue o texto de suas alegações:

So quis elucidar que utilizando ajax pode-se fazer consultas seguras e precisas integrando javascript+ajax+php. So isso.
No mesmo post vc informou que JSON seria superior ao ajax... Nao vejo pq, ambos sao frameworks diferentes e ambos tem suas particularidades... e ambos sao essencialmente JAVASCRIPT, nenhum deles podera fazer masi que a propria linguagem ja proporciona, portanto ambos são bons igualmente.

Por favor me entenda, nao estou dizendo que vc esta certo, ou errado, so quis esclarecer as coisas para que possiveis leitores deste topico, futuramente, não fiquem com uma fixação de que algo e melhor que outro, ou de que algo é necessariamente inseguro de ser feito com determinada ferramenta. A Insegurança esta nos dedos do programador e não na linguagem em si.

Espero que depois deste topico eu tenha sido claro o suficiente para compreenderem o que de fato tentei fazer rsrs...

Amigo sobre funcionar em aplicação externa isso não funciona mesmo, Não é permitido cross dominio em javascript , sobre segurança , é complicado falar, porque javascript é transparente para o usuário.

A única coisa que quero comentar mais detalhando é que JSON não é framework , ele é alternativa para XML

O X do Ajax do vem de XML ( Asynchronous Javascript and XML = AJAX ) , JSON é um tipo de dados que vem ganhando muito mercado já que bancos NOSQL utilizão a mesma estrutura,
e AJAX se tornou uma forma de protocolo que consegue dados, com ajax você consegue HTML XML e JSON ,
então se for comparar a conseguir dados JSON é melhor mesmo , já que XML é dificil de trabalhar com seus NODES , json por ser Estilo de Objeto basta trabalhar assim

NOME.NODE

muito similar a jQuery.

[]s

**Alikarbam** · 03-03-2012, 17:07

Talvez estejamos falando de coisas completamente diferentes...
Mas espero que mude este seu modo de pensar ai...
Enfim JQuery e JSON trabalahm de formas diferentes cada um para sua aplicação... Mas nenhum e melhor do que o outro... se nao 1 dos dois ja teria sido descontinuado.

Quanto a questão do framework de uma lida Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar... , talves de uma esclarecida na sua ideia deste tipo de metodo.

E volto a repetir... nao disse que esta errado, so digo que não esta de todo certo

Tudo e muito conceitual neste area... as pessoas nao fazem ideia das ferramentas que criam a cada dia aparece uma nova utilização para as mesmas que ninguem fazia ideia que era possivel.
Portanto nao siga a linha inflexivel... ela tende a nao ser muito agradavel ou produtiva.

Abraços.

Unconfigured Ad Widget

Anúncio

Atualizando a página sem refresh

Tutorial Atualizando a página sem refresh

Similar Threads

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment