Hoe AJAX toevoegen aan mijn site?

Status
Niet open voor verdere reacties.

annuh

Gebruiker
Lid geworden
15 sep 2006
Berichten
40
Hallo,
Ik ben bezig met een website voor mijn (toekomstige :rolleyes:) clan.
Hier heb ik ook een berichtenbalk aan toegevoegd.
Deze balk staat gewoon in een cel van een grote tabel, waar de hele layout in verwerkt zit.
Daarnaast zit een knop om zelf berichten toe te voegen (in een popup moet je dan het bericht intikken.

Ik kan de berichtenbalk in een iframe zetten en die om de 30 seconden laten verversen zodat gasten ook nieuwe berichten zien.
Maar hier wil ik nu graag AJAX/javascript aan toevoegen. Hoe kan ik dit doen?
De berichtenbalk ziet er als volgt ongeveer uit:

De berichten:
PHP:
<?php include ('config.php') ?> 
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
		<td width="39" align="left">
		<img border="0" src="../bg4l.gif" width="39" height="56"></td>
		<td width="398">
<marquee onmouseover = 'this.stop()' onmouseout = 'this.start()' loop = 'infinite' width = '100%' direction = 'left' scrollamount = '6' behavior = 'scroll'> 
<?php 
  $query="SELECT * FROM berichten ORDER BY id DESC LIMIT $aantal";  

  $sql=mysql_query($query) or die (mysql_error());  

while ($obj=mysql_fetch_object($sql)) {  

  $id = $obj->id; 
  $naam = $obj->naam;  
  $bericht = $obj->bericht;  
   
echo "<b>".$naam."</b>"; 
echo $scheidingsteken; 
echo ubb($bericht); 
echo $scheidingstekenbericht; 

} 
?> 
</marquee> 
</td>
		<td width="15%" align="center">
&nbsp;<a href="javascript:void(0)">V</a><a href="javascript:void(0)" 
onclick="open('voegtoe.php','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=500,height=150')">oeg een bericht toe!</a></td>
		<td width="39" align="right">
		<img border="0" src="../bg4r.gif" width="39" height="56"></td>
	</tr>
</table>

Voeg toe:
PHP:
if (isset($_POST['Submit'])) {  
   if ($_POST['bericht'] == '' )  
   die ("<script>alert('Er is geen bericht ingevuld.');document.location='javascript:history.back(1)';</script>"); 
   if ($_POST['naam'] == '' )  
      die ("<script>alert('Je hebt geen naam ingevuld.');document.location='javascript:history.back(1)';</script>"); 
   else 
   $naam=clean($_POST['naam']); 
   $bericht=clean($_POST['bericht']); 
   { $query="INSERT INTO berichten (naam, bericht) VALUES ('".$naam."', '".$bericht."')";  
  mysql_query($query) or die (mysql_error());  
      echo "<SCRIPT LANGUAGE=JAVASCRIPT><!-- \n"; 
       echo "setTimeout('self.close()',10)\n;"; 
     echo "window.opener.location.reload(0) \n;"; 
      echo "//--></SCRIPT>\n"; } 
} 
?>


Ik heb al heel veel tutorials gelezen maar ik snap er nog niet veel van. Maar dat komt waarschijnlijk omdat er weinig praktijkvoorbeelden (zoiets al bovengenoemd) bij staan!

Ik hoop dat jullie me kunnen helpen! Ik hoef geen kant-en-klare scripts maar weet je een manier hoe ik dit kan doen of een goede tutorial hierover, alvast bedankt!
Ik wil het namelijk ook zelf leren :cool:

Alvast bedankt!
 
Hallo,
Ik ben bezig met een website voor mijn (toekomstige :rolleyes:) clan.
Hier heb ik ook een berichtenbalk aan toegevoegd.
Deze balk staat gewoon in een cel van een grote tabel, waar de hele layout in verwerkt zit.
Daarnaast zit een knop om zelf berichten toe te voegen (in een popup moet je dan het bericht intikken.

Ik kan de berichtenbalk in een iframe zetten en die om de 30 seconden laten verversen zodat gasten ook nieuwe berichten zien.
Maar hier wil ik nu graag AJAX/javascript aan toevoegen. Hoe kan ik dit doen?
De berichtenbalk ziet er als volgt ongeveer uit:
/QUOTE]


Kijk eens naar het Prototype framework... dat wijst zich vanzelf (vooral met de manual)
 
Hallo,
Ik ben bezig met een website voor mijn (toekomstige :rolleyes:) clan.
Hier heb ik ook een berichtenbalk aan toegevoegd.
Deze balk staat gewoon in een cel van een grote tabel, waar de hele layout in verwerkt zit.
Daarnaast zit een knop om zelf berichten toe te voegen (in een popup moet je dan het bericht intikken.

Ik kan de berichtenbalk in een iframe zetten en die om de 30 seconden laten verversen zodat gasten ook nieuwe berichten zien.
Maar hier wil ik nu graag AJAX/javascript aan toevoegen. Hoe kan ik dit doen?
De berichtenbalk ziet er als volgt ongeveer uit:


Kijk eens naar het Prototype framework... dat wijst zich vanzelf (vooral met de manual)
 
Bedankt!
Zou het dan zoiets worden?

PHP:
<?php include ('config.php') ?> 
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1"> 
    <tr> 
        <td width="39" align="left"> 
        <img border="0" src="../bg4l.gif" width="39" height="56"></td> 
        <td width="398"> 

new Ajax.PeriodicalUpdater('berichtenbalk', '/some_url',   {     method: 'get',     insertion: Insertion.Top,     frequency: 1,     decay: 2   }); 

<div id="berichtenbalk">
<marquee onmouseover = 'this.stop()' onmouseout = 'this.start()' loop = 'infinite' width = '100%' direction = 'left' scrollamount = '6' behavior = 'scroll'> 
<?php 
  $query="SELECT * FROM berichten ORDER BY id DESC LIMIT $aantal";   

  $sql=mysql_query($query) or die (mysql_error());   

while ($obj=mysql_fetch_object($sql)) {   

  $id = $obj->id; 
  $naam = $obj->naam;   
  $bericht = $obj->bericht;   
    
echo "<b>".$naam."</b>"; 
echo $scheidingsteken; 
echo ubb($bericht); 
echo $scheidingstekenbericht; 

} 
?> 
</marquee> 
</div>
</td> 
        <td width="15%" align="center"> 
&nbsp;<a href="javascript:void(0)">V</a><a href="javascript:void(0)" 
onclick="open('voegtoe.php','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=500,height=150')">oeg een bericht toe!</a></td> 
        <td width="39" align="right"> 
        <img border="0" src="../bg4r.gif" width="39" height="56"></td> 
    </tr> 
</table>


Wat moet er dan staan bij '/some_url', ? Is het verder wel goed zo?
 
Laatst bewerkt:
Best Annuh,

Het principe van AJAX is dat je de browser een pagina op laat vragen en die in het geheugen van je huidige site laat laden:

[pagina1] -> vraag via AJAX pagina op -> doet wat met die pagina

De code die je hebt gebruikt moet dus bij /some_url de pagina bevatten die je op wilt halen. Je hebt een PeriodUpd. gebruikt wat inhoud dat hij eens in de zoveel tijd de pagina opvraagt en die op een 'container' (bijv een <div> op je pagina) toepast. Daarnaast kijkt hij heel slim naar of de pagina is aangepast en als dat niet het geval is dan wacht hij steeds iets langer met refreshments. Jij hebt nu de waarde insertion: Insertion.Top gebruikt. Je zult nu dus telkens die nieuwe pagina bovenaan je berichtenbalk plaatsen. Is dat wat je wilt? (laadt je telkens dezelfde pagina dan krijg je dus allemaal dezelfde waarden onder elkaar staan).

Maargoed, je vraag beantwoorden dus: /some_url is de pagina die je opvraagt.

Wout
 
Kijk voor een goede AJAX handleiding op w3schools.com.

Ik heb het daar ook mee 'geleerd' en werkt echt fijn op de manier waarop zij het doen.
 
Bedankt voor jullie reacties!
Maar alles wat ik heb gevonden gaat over 'ajax-request' na een handeling (bv tekst typen in een input field)
maar ik wil gewoon dat automatisch gebeurd!

Met Ajax.PeriodicalUpdater is het wel aardig gelukt, ALLEEN update hij nu berichten.php (in dat bestand worden de berichten ge-echod' maar hij update alleen als ik handmatig berichten.php herlaad (gewoon rechtsstreeks naar die url gaan)

is er geen oplossing om dit automatisch te laten gebeuren?
 
Kan je in de onload van je body niet een javascript-functie aanroept, die dan het ajax-gebeuren doet?
 
Dat gebeurd toch al in de head?
Ik heb al een manier gevonden waarmee het wel werkt..
berichten.php elke seconde te herladen:

Berichten.php
PHP:
<?php 
echo '<head><META NAME="refresh" CONTENT="1"></head>'; 
include ('config.php'); 
  $query="SELECT * FROM berichten ORDER BY id DESC LIMIT 20";   

  $sql=mysql_query($query) or die (mysql_error());   

while ($obj=mysql_fetch_object($sql)) {   

  $id = $obj->id; 
  $naam = $obj->naam;   
  $bericht = $obj->bericht;   
    
echo "<b>".$naam."</b>"; 
echo $scheidingsteken; 
echo ubb($bericht); 
echo $scheidingstekenbericht; 

} 
?>

Zou hier geen andere oplossing voor zijn?

EDIT: Dit werkt eigenlijk ook niet...


Dit is voor de voledigheid:
HTML:
<html>
<head>
<meta http-equiv="Content-Language" content="nl">
<title>dms</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<LINK HREF="dms.css" REL="stylesheet" TYPE="text/css">
<script language="JavaScript" type="text/javascript" src="prototype.js"></script> 
<script> 
        
var url = 'berichtenbalk/berichten.php'; 

        
new Ajax.PeriodicalUpdater("berichtenbalk", url, { method: 'get', onFailure: reportError, frequency: 1, decay: 1 }); 

    function reportError(request) 
    { 
        alert('Excuses, er zijn fouten opgetreden..'); 
    } 
    
</script> 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- ImageReady Slices (dms.psd) -->
<table id="Table_01" width="873" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="31" class="border_left">
			&nbsp;</td>
		<td colspan="9">
			<img src="images/dms_02.jpg" width="838" height="137" alt=""></td>
		<td rowspan="31" class="border_right"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="137" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="images/dms_04.jpg" width="191" height="61" alt=""></td>
		<td background="dms_05.jpg" width="498" height="28">
			<marquee onmouseover = 'this.stop()' onmouseout = 'this.start()' width = '100%' height="19">
			<font class="berichtenbalk"><div id="berichtenbalk"></div></font></marquee></td>
		<td>
			<img src="images/dms_06.jpg" width="17" height="28" alt=""></td>
		<td colspan="2">
			<a href="javascript:void(0)" 
onclick="open('voegtoe.php','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=500,height=150')">
<img src="images/dms_07.jpg" width="95" height="28" alt="Voeg een bericht toe!" border="0"></a></td>
		<td colspan="2">
			<img src="images/dms_08.jpg" width="37" height="28" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="images/dms_09.jpg" width="526" height="36" alt=""></td>
		<td colspan="3">
			<img src="images/dms_10.jpg" width="121" height="30" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="6" class="menu_r_bg" align="center" valign="top" height="0">
		<form method="post" name="inlog" action="login.php" target="main">
			<font face="Courier New" style="font-size: 8pt">Welkom gast<br>
			</font><font face="Courier New" size="1">
			<span style="font-size: 8pt"><input type="text" name="username" size="13"></span></font><font face="Courier New"><font style="font-size: 8pt"><br>
			</font><font size="2"><span style="font-size: 8pt">
			<input type="password" name="wachtwoord" size="13"></span><font style="font-size: 8pt"><br>
			</font><span style="font-size: 8pt">
			<input type="checkbox" name="C1" value="ON"></span><font style="font-size: 8pt">Onthouden<br>
			</font><span style="font-size: 8pt">
			<input type="submit" value="Inloggen!" name="login"></span><font style="font-size: 8pt"><br>
			<a target="main" href="registeren.html">Registeren</a><br>
			Wachtwoord kwijt</font></font></font></form></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" background="dms_12.gif" valign="top">
			<p align="center"><font class="font_menu_head">Het is nu: 5:46:23</font></td>
		<td>
			<img src="images/dms_13.jpg" width="72" height="3" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="26">
			<iframe name="main" width="100%" height="100%" frameborder="0" src="home.html"></iframe></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">Algemeen</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_16.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_17.gif" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_19.jpg" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="5" class="menu_r_bg">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">De Clan</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_22.gif" width="119" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_23.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_24.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_26.gif" width="119" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="9" class="menu_r_bg">&nbsp;<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>dss</p>
		<p>&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_28.gif" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_29.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_30.jpg" width="119" height="26" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">Community</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_32.gif" width="119" height="26" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_33.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_34.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_35.gif" width="119" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" class="menu_l_head">
			<font class="font_menu_head">Stats</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_bg">
			&nbsp;<p>&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_stats">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="99" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="border_bottom_l">
			</td>
		<td colspan="7" class="border_bottom">
			</td>
		<td colspan="2" class="border_bottom_r">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="98" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="498" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="84" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="33" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</center>
</body>
</html>

berichten.php
PHP:
<?php 
include ('config.php'); 

  $query="SELECT * FROM berichten ORDER BY id DESC LIMIT $aantal";  

  $sql=mysql_query($query) or die (mysql_error());  

while ($obj=mysql_fetch_object($sql)) {  

  $id = $obj->id; 
  $naam = $obj->naam;  
  $bericht = $obj->bericht;  
   
echo "<b>".$naam."</b>"; 
echo $scheidingsteken; 
echo ubb($bericht); 
echo $scheidingstekenbericht; 

} 
?>

En hij ververst het dus niet...
 
Laatst bewerkt:
Ik heb nog een vraag.
Ik heb de volgende situatie:
In het rechtermenu kunnen mensen inloggen, dit form verwijst naar login.php die het verder afhandeld. Hoe kan ik ervoor zeggen dat het rechtermenu zich aanpast als er dus in het middenframe mensen inloggen.
Nu probeer ik het met ajax te doen. Om de seconden word gekeken if $login = 1.
Is dit 'slim' of 'dom'?
Kan dit anders?

ps. Ik vraag dit hier maar ff , ik vind het ook zo raar om voor zo'n vraagje een nieuw topic te openen.

EDIT: Ik heb nog een manier bedacht, willen jullie ff zeggen welke manier de beste is? :P

1) Bovenstaande manier, met ajax,
2) Dit login-formuliertje in een iframe (met name="iframe_login") zetten en als user succesvol inlogt "echo "<meta HTTP-EQUIV="REFRESH" CONTENT="0; URL=javascript:window.open('iframelogin.html','iframe_login');">"
of
<script>

function redirect()
{
iframe_login.location="iframelogin.php";
}
</script>

Welke manier zou het snelste gaan en de minste serverbelasting kosten?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan