PHP and AJAX help

Status
Not open for further replies.
tweak50

tweak50

.NET/PHP dabbler
Sep 12, 2007
404
1
0
Wisconsin
So I have a simple php message board that I would like to add AJAX too. Any gurus around here know how I would go about doing this?

PHP: 
<?php

include 'dbconnect.php';

function sanitize($input)
{
   $input = htmlentities($input);
   return $input;
}

$messages = @mysql_query("select * from messages");

while($row = @mysql_fetch_array($messages))
{
  print "Posted by ";
  print $row[Author];
  print " at ";
  print  $row[Posted];
  print "\n\n<br/><br/>";

  print $row[Message];
  print "<br/><br/>";
}

print <<<FORM

<form action="$_SERVER[PHP_SELF]">
<input type="hidden" value="true" name="submitted" />

<lable>Name:</lable><br/>
<input name="name" id="name"/><br/>
<label>Message:</label><br/>
<textarea name="message" id="message" rows="10" cols="40"></textarea>

<br/><br/>

<input type="submit" value="submit"/>
</form>

FORM;

if($_POST['submitted'] == "true")
{
  $name = sanitize($_POST['name']);
  $message = sanitize($_POST['message']);

  $sql = @mysql_query("insert into messages(Author,Posted,Message) values('".$name."','".date(time()). "','".$message."');");

  if(!sql)
     print "fail";

}

?>
 


Not to hard. But what specifically do you want to AJAX?

To do this you would:

1. Write a Javascript function to get trigger on the client side based on some action (mouseover, onclick, etc).

2. Have that Javascript call some server side PHP (getmydata.php)
3. Have getmydata.php return some data
4. Have the Javascript absorb/accept the return data
5. Update your data area with the freshly returned data

Take a look at mootools also. See if that helps.
 
Start with the following:

Code: 
var xmlHttp;

// this function is used to grab the typical ajax connections
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

// function used as the ajax body
function doStuff()
{
  // get the ajax object
  xmlHttp=GetXmlHttpObject();

  // Do whatever you need to do here

  xmlHttp.onreadystatechange = checkStuff;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

// This function is used to check the state of AJAX
function checkStuff() 
{ 
  if(xmlHttp.readyState == 4)
  { 
    // Do whatever you need to with the returned result
   xmlHttp.responseText;
  }
}
 
Aequitas said:
Start with the following:

Code: 
var xmlHttp;

// this function is used to grab the typical ajax connections
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

// function used as the ajax body
function doStuff()
{
  // get the ajax object
  xmlHttp=GetXmlHttpObject();

  // Do whatever you need to do here

  xmlHttp.onreadystatechange = checkStuff;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

// This function is used to check the state of AJAX
function checkStuff() 
{ 
  if(xmlHttp.readyState == 4)
  { 
    // Do whatever you need to with the returned result
   xmlHttp.responseText;
  }
}
Click to expand...

Thanks for the help so far, my noob ass appreciates it.

So I created a php file that connects to the database and returns everything in xml format. I would use that in the checkStuff() function right?
 
So this is what I have right now. How far off am I?

index.php
Code: 
<?php

print "<head>";
print "<script type=\"text/javascript\" src=\"messages.js\"></script>";
print "</head>";

print <<<FORM

<form action="$_SERVER[PHP_SELF]" method="POST">
<input type="hidden" value="true" name="submitted" />

<lable>Name:</lable><br/>
<input name="name" id="name"/><br/>
<label>Message:</label><br/>
<textarea name="message" id="message" rows="10" cols="40"></textarea>

<br/><br/>

<input type="submit" value="submit" onClick="doStuff()"/>
</form>

FORM;

?>
messages.js
Code: 
var xmlHttp;

// this function is used to grab the typical ajax connections
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

// function used as the ajax body
function doStuff()
{
  // get the ajax object
  xmlHttp=GetXmlHttpObject();
  
  input.php;

  xmlHttp.onreadystatechange = checkStuff;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

// This function is used to check the state of AJAX
function checkStuff() 
{ 
  if(xmlHttp.readyState == 4)
  { 
   data.php;
   xmlHttp.responseText;
  }
}
input.php
Code: 
<?php

function sanitize($input)
{
  $input = htmlentities($input);

  return $input;
}

  $name = sanitize($_POST['name']);
  $message = sanitize($_POST['message']);

  $sql = @mysql_query("insert into messages(Author,Posted,Message) values('".$name."','".date(time()). "','".$message."');");
  
  if(!sql)
     print "fail";

?>
data.php
Code: 
<?php
include 'dbconnect.php';

header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
// set an old date to flush cache
header("Expires: Mon, 10 Dec 2000 03:00:00 GMT");


$messages = @mysql_query("select * from messages");

echo '<?xml version="1.0" encoding="ISO-8859-1"?>' ;
echo "<board>";

while($row = @mysql_fetch_array($messages))
{
  echo "<Author>" . $row['Author'] . "</Author>";
  echo "<Posted>" . $row['Posted'] . "</Posted>";
  echo "<Message>" . $row['Message'] . "</Message>";
}

echo "</board>";

?>
 
Ok, I think I've made some progress, but I've ran into a error.

Code: 
xmlHttp.onreadystatechange = checkStuff;
  xmlHttp.open("GET",data.php,true);xmlHttp.send(null);


When it hits the xmlHttp.open it exits the js and reloads the page...
 
If you Google "simple ajax tutorial with php" or a similar query, you'll find a few good ones. It's pretty easy once you understand the limitations of AJAX and PHP interaction.
 
Status
Not open for further replies.
Top Bottom