Ajax-esimerkki

Ezku 25.09.05 12:24

Haluttiin esimerkkiä aiemmin julkaisemieni luokkien käytöstä. Tässä on. Käyttää Ajaxia varten hyväkseen Prototype- ja FAT-kirjastoja, jotka ovat mukana zipissä (ks. kommentit). PHP 5.0.

 Tekstiversio  Arvo: 2 (4 ääntä)  Äänestä: +  -
<?php
/**
 * @package          Ajax demonstration
 * @author            Ezku (dmnEe0@gmail.com)
 * @since              24.9.2005
 * @version          1.1
 */
require_once('framework/main.php');

$events = new EventNotifier;
$events->foo = new Delegate(new Handle('FooController'), 'execute');
$events->bar = new Delegate(new Handle('BarController'), 'execute');

$results = NULL;

if(!empty($_GET['action']))
{
        $action = strtolower($_GET['action']);
        if($events->has($action))
        {
                $results = $events->$action();
        }
        else
        {
                $results = 'Requested unknown action!';
        }
       
        if(!empty($_GET['xhr']))
        {
                echo $results;
                die();
        }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
        <title>Presentation on unobtrusive Javascript</title>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="fat.js"></script>
        <script type="text/javascript">
        <!--
        function ajaxify() {
                $('form').onsubmit = function() { return false; }
                Event.observe('post-foo', 'click', function() { request('foo') });
                Event.observe('post-bar', 'click', function() { request('bar') });
        }
        function request(action) {
                var url  = "<?php echo $_SERVER['SCRIPT_NAME'] ?>";
                var pars        = 'xhr=true&action=' + action;
                var Request = new Ajax.Request(url, {method: 'get', parameters: pars, onSuccess: update});
        }
        function update(request) {
                $('results').innerHTML = request.responseText;
                Fat.fade_element('results');
        }
        -->
        </script>
</head>
<body onload="ajaxify()">
        <h1>Presentation on unobtrusive Javascript</h1>
        <form id="form" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" method="get">
                <p>Here, press a button. If your browser supports XmlHttpRequest, you should
                get a message without a page refresh. If not, the fallback should still work.</p>
                <input id="post-foo" name="action" type="submit" value="Foo" />
                <input id="post-bar" name="action" type="submit" value="Bar" />
        </form>
        <div id="results"><?php echo $results ?></div>
</body>
</html>

editoitu: 12:29 25.9.05
Ezku 12:28 25.9.05 
Paketti on saatavissa täältä. Toivon tämän selittävän itse itsensä, mutta kysykää toki jos on kysyttävää.

Käsittääkseni ei toimi IE:llä - syyttäkää huonoja Javascript-taitojani. Jos joku tietää fiksin niin kertokaa toki (jotain tekemistä inputin type-attribuutin kanssa).
eis 12:41 25.9.05 
$action = strtolower($_GET['action']);

Tuohon isset()? Aina pitää ensin tarkistaa onko asetettu. Noticea pukkaa muuten.


Ja tuota.. formin submittaushan lähettää sen formin serverille ja lataa sivun uusiksi, joten "you should get a message without a page refresh" on kyllä väärää informaatiota. Olisit ennemmin peruuttanut formin lähetyksen onsubmitissa, jolloin uutta sivun hakemista ei olisi tapahtunut?
eis 12:47 25.9.05 
Eikun ei, jälkimmäisen otan takaisin, eipä tuo tosiaan lähetä.
editoitu: 14:03 25.9.05
Ezku 13:06 25.9.05 
Huppista, tosiaan, ei ollut error reporting päällä joten pääsi livahtamaan. Edit: Korjataan asia myöhemmin.
eis 13:56 25.9.05 
Koodisi toimii iellä jos otat pois nämä:
$('post-foo').type = 'button';
$('post-bar').type = 'button';

Ja muutat nämä
<input id="post-foo" name="action" type="submit" value="Foo" />
<input id="post-bar" name="action" type="submit" value="Bar" />

suoraan muotoon

<input id="post-foo" name="action" type="button" value="Foo" />
<input id="post-bar" name="action" type="button" value="Bar" />

Koska IE ei tue tuota tyypin vaihtoa lennosta. Koodi säilyy validina ja nyt
esimerkkisi toimii tuossakin :)
editoitu: 14:32 25.9.05
Ezku 13:59 25.9.05 
eis kirjoitti:
Koodisi toimii iellä jos otat pois nämä (...)Koska IE ei tue tuota tyypin vaihtoa lennosta. Koodi säilyy validina ja nyt esimerkkisi toimii tuossakin :)
Pahoittelen, taisin ilmaista tarkoituksen hieman epäselvästi: härdellin tulisi toimia XmlHttpRequestilla jos se on tuettu ja Javascript on päällä, ja Javascriptin poissaollessa "normaalisti" submitilla. Ratkaisusi ei siis oikein sovellu.

Päivitän tämän tosiaan myöhemmin kun kerkeän, nyt kun sain tuon lähetyksen estämisen toimimaan.
editoitu: 15:30 25.9.05
eis 15:28 25.9.05 
Joo, tajusin vasta jälkeenpäin.
Jäin tuota ongelmaa puurtamaan, ja sain sen ymmärtääkseni toimimaan niinkuin pitää. Voi olla et ollaan nyt tehty tuplatyötä, mutta laitanpa silti tämän oman muunnokseni tähän. Tuota voisi varmaan vielä säätää paremmin valmiita kirjastoja hyödyntäväksi. Testattu gecko/opera/ie, jokaisessa oma pikku kikkansa, joten ehkä tästä on apua miten sitten teetkään.

<?php
/**
 * @package      Ajax demonstration
 * @author      Ezku (dmnEe0@gmail.com)
 * @since      24.9.2005
 */
require_once('framework/main.php');

$events = new EventNotifier;
$events->foo = new Delegate(new Handle('FooController'), 'execute');
$events->bar = new Delegate(new Handle('BarController'), 'execute');

$action = isset($_GET['action']) ? strtolower($_GET['action']) : '';
$results = NULL;

if(!empty($action))
{
   if($events->has($action))
   {
      $results = $events->$action();
   }
   else
   {
      $results = 'Requested unknown action!';
   }

   if(isset($_GET['xhr']) && $_GET['xhr'] == 'true')
   {
      echo $results;
      die();
   }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
   <title>Presentation on unobtrusive Javascript</title>
   <script type="text/javascript" src="prototype.js"></script>
   <script type="text/javascript" src="fat.js"></script>
   <script type="text/javascript">
   <!--
   function ajaxify() {
      Event.observe('post-foo', 'click', function() { request('foo') });
      Event.observe('post-bar', 'click', function() { request('bar') });
      init();
   }
   function request(action) {
      var url      = "<?php echo $_SERVER['SCRIPT_NAME'] ?>";
      var pars   = 'xhr=true&action=' + action;
      var Request = new Ajax.Request(url, {method: 'get', parameters: pars, onSuccess: update});
   }
   function update(request) {
      $('results').innerHTML = request.responseText;
      Fat.fade_element('results');
   }

   function FrmPage_submit_ie() {
       return false;
    }
   function FrmPage_submit(e) {
       e.preventDefault();
   }

   function init(){
      // testit näin päin, koska esim opera tukee molempia mut ei
      // toimi oikein jälkimmäisen kanssa
           if($('form').addEventListener)
           $('form').addEventListener("submit",FrmPage_submit,false);
      else if($('form').attachEvent)
          $('form').attachEvent("onsubmit",FrmPage_submit_ie);
   }

   -->
   </script>
</head>
<body onload="ajaxify()">
   <h1>Presentation on unobtrusive Javascript</h1>
   <form id="form" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" method="get">
      <p>Here, press a button. If your browser supports XmlHttpRequest, you should get a message without a page refresh. If not, the fallback should still work.</p>
      <input id="post-foo" name="action" type="submit" value="Foo" />
      <input id="post-bar" name="action" type="submit" value="Bar" />
   </form>
   <div id="results"><?php echo $results ?></div>
</body>
</html>
editoitu: 22:54 25.9.05
Ezku 22:37 25.9.05 
eis kirjoitti:
Jäin tuota ongelmaa puurtamaan, ja sain sen ymmärtääkseni toimimaan niinkuin pitää. Voi olla et ollaan nyt tehty tuplatyötä, mutta laitanpa silti tämän oman muunnokseni tähän. Tuota voisi varmaan vielä säätää paremmin valmiita kirjastoja hyödyntäväksi. Testattu gecko/opera/ie, jokaisessa oma pikku kikkansa, joten ehkä tästä on apua miten sitten teetkään.
Juu, kiitoksia. Kohtuu monimutkaisesti lähestyit - todennäköisesti tuosta on joissakin tilanteissa hyötyä, mutta itse tein näinkin yksinkertaisesti:
$('form').onsubmit = function() { return false; }
Tämäkin toimii nähdäkseni kaikilla selaimilla.

Tästä päivitetty paketti.
eis 00:11 26.9.05 
Strict Standards: Only variables should be assigned by reference in C:\Server\Site\Ajax\framework\Delegate.class.php on line 22
Ezku 11:40 26.9.05 
eis kirjoitti:
Strict Standards: Only variables should be assigned by reference in C:\Server\Site\Ajax\framework\Delegate.class.php on line 22
Kummallista. Itse en tuollaista ole saanut. PHP:n versio?
lahtis 19:07 29.9.05 
Fatal error: Cannot instantiate non-existent class: eventnotifier in /var/www/html/Ajax/index.php on line 9
editoitu: 01:21 30.9.05
Ezku 01:05 30.9.05 
lahtis kirjoitti:
Fatal error: Cannot instantiate non-existent class: eventnotifier in /var/www/html/Ajax/index.php on line 9
Kuulostaa siltä ettet ole purkanut muita tiedostoja paketista :) ... Niin, tai sitten ajat PHP:n versiota 4.
eis 15:49 2.10.05 
PHP 5.05, strict päällä
eis 19:12 3.10.05 
$this->subordinate =& Handle::resolve(&$this->subordinate);

Tuon kun muuttaa muotoon

$this->subordinate = Handle::resolve(&$this->subordinate);

Niin esimerkki toimii ilman ongelmia, vaan minen tuota mallia tajua tarpeeksi selittääkseni että mitä siinä oikein tapahtuu ja onko moinen 'korjaus' sitten koko systeemin rampauttava muutos :)
Ezku 20:51 3.10.05 
eis kirjoitti:
mitä siinä oikein tapahtuu
Käsitellään objektia mutta silti sijoitetaan referenssioperaattorilla; ei tarpeellista, koska objektit passataan aina viittauksena. Tuo on itse asiassa yhden debuggauksen jäljiltä kun ängin &-merkkejä vimmalla joka paikkaan - ongelma ratkesi mutten jaksanut poistaa kaikkia ;)
ja onko moinen 'korjaus' sitten koko systeemin rampauttava muutos :)
Ei ole, tuo ei muuta käytöstä mitenkään :)