+CMS COntent Management Homepage

/ Indeks dokumentacji / Rozbudowa systemu / Rejestrowanie nowych klas w systemie / Wykorzystanie API / Korzystanie z Ajaxa w ramach systemu

Korzystanie z Ajaxa w ramach systemu

Ajaxowe zapytania do serwera są wykonywane na takiej samej zasadzie jak zwykłe zapytania, z tym że realizuje je trochę inny protokół transportowy.

Aby wykonać jakąś metodę na serwerze przesyłając zapytania Ajaxem należy skorzystać z klasy AjaxEvent.

Załóżmy że mamy następujący plik HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:cms="http://manual.pluscms.net">

  <head></head>
  <body>
        <div style="cursor:pointer" onClick="TU_BĘDZIE_WYWOŁANIE_AJAXA">

                Kliknij aby zobaczyć czerwony kwadrat z napisem Test

         </div>
  </body>

</html>

W miejsce napisu TU_BĘDZIE_WYWOŁANIE_AJAXA chcemy wstawić odwołanie do serwera które wykona jakąś metodę i zwróci dane. A najlepiej aby automatycznie zmodyfikowało elementy na stronie. W tym celu modyfikujemy nasz HTML aby wyglądał tak.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:cms="http://manual.pluscms.net">

  <head></head>
  <body>
       <div style="cursor:pointer"
               onClick="<?php
                  echo AjaxEvent::CallSync('MyAjaxClass','myAjaxMethod','Test');
               ?>">

               Kliknij aby zobaczyć czerwony kwadrat z napisem Test

        </div>

        <div id="RedBox" style="display:none"></div>
  </body>

</html>

Wywołanie AjaxEvent::CallSync('MyAjaxClass','myAjaxMethod','Test') spowoduje że gdy klikniemy w link wykona się na serwerze metoda myAjaxMethod w klasie MyAjaxClass.

Klasa MyAjaxClass powinna być umieszczona w katalogu cms/classes/Application/Action/Ajax, powinna być zarejestrowana w systemie i wyglądać tak:

class MyAjaxClass extends XmlAjaxDefaultEventAction {

    ////////////////////////////////////////////
    // Ajax events


    public function myAjaxMethod($oSender, $aParams) {
        // W $oSender jest obiekty typu AjaxSender
        // W $aParams są parametry wywołaniaw postaci macierzy, w tym przypadku napis Test

        // Aby zobaczyć jak wyglądają parametry wykonamy dump ze zmiennej

        var_dump($aParams);
    }
}

Teraz, gdy klikniemy na link powinno pojawić się okno a w nim wynik działania var_dump($aParams);

Załóżmy teraz że chcemy tak zmodyfikować metodę aby gdy klikniemy w link pojawił się element <div> i id RedBox. Modyfikujemy więc klasę aby wyglądała tak:

class MyAjaxClass extends XmlAjaxDefaultEventAction {

    ////////////////////////////////////////////
    // Ajax events


    public function myAjaxMethod($oSender, $aParams) {
        // W $oSender jest obiekty typu AjaxSender
        // W $aParams są parametry wywołaniaw postaci macierzy, w tym przypadku napis Test


        // W pozycji nr 3 znajduje się przesłany tekst.
        $sText = $aParams[3];

        // Z sendera pobieramy obiekty javascript document.
        $oDocument = $oSender->window->document;

        // Tak jak w javascripcie pobieramy element strony za pomocą getElementById.
        $oRedBox = $oDocument->getElementById('RedBox');

        // Ustawiamy jest innerHTML. Tak jak w javascripcie.
        $oRedBox->innerHTML = $sText;

        // Pobieramy pozycję elementu w jaki klikneliśmy
        $iX = $oDocument->this->x;
        $iY = $oDocument->this->y + $oSender->window->document->this->height;

        // Ustawiamy atrybut style w którym podajemy aby element RedBox był czerwony,
        // 100x100px i pojawił się w pozycji $iX i $iY.

        $oRedBox->setAttribute('style',
                                     'background:red;width:100px;height:100px;position:absolute;left:'.
                                     $iX.'px;top:'.$iY.'px; display: block');
    }
}

Takie wywołanie Ajaxowe jest chronione przed dostepem z zewnątrz, tj. aby metoda jakakolwiek metoda z klasy MyAjaxClass została uruchomona musi sprostać wymogą klasy SystemController. SystemController broni dostępu osobom które nie sa zalogowane do systemu. Łatwo to sprawdzić wystarczy stworzyć przykładowy element systemu który będzie korzystał z naszej klasy. Koda takiego elementu poniżej:

<?php
class ExampleStaticItem extends StaticItem {

    /**
     * Whatever you return from this method will be displayed on the page.
     * This method will not be cached. If you want to cache it write your own
     * cache.
     *
     * Pass parameters to render method. Define it in parser. If parameter do not exists as
     * attribute in static tag then NULL will be passed.
     *
     * @return string
     */

    public function render() {
        return    '<div style="cursor:pointer"
                       onClick="'.AjaxEvent::CallSync('MyAjaxClass','myAjaxMethod','\'Test\'').'">'.
                       'Kliknij aby zobaczyć czerwony kwadrat z napisem Test</div>
                      <div id="RedBox" style="display:none"></div>';
    }
}
?>

Umieszczamy do w szablonie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:cms="http://manual.pluscms.net">

  <head></head>
  <body>
       <cms:ExampleStatic id="AjaxTest" />
  </body>

</html>

Tworzymy na jego podstawie stronę. Publikujemy, wylogowujemy się z systemu i gdy klikniemy na link, który pojawi się na stronie otrzymamy komunikat, User not logged in!

Aby umożliwić dostęp do metody także innym publicznym użytkownikom trzeba nadpisać metodę, która zwraca kontroler, który broni dostępu do klasy. W naszym przypadku użyjemy kontrolera PublicController, który udostępnia wszystkim użytkownikom prawo do uruchamiania metod w danej klasie. Robimy to tak.

class MyAjaxClass extends XmlAjaxDefaultEventAction {

    ////////////////////////////////////////////
    // Ajax events


    public function myAjaxMethod($oSender, $aParams) {

        $sText = $aParams[3];

        $oDocument = $oSender->window->document;

        $oRedBox = $oDocument->getElementById('RedBox');

        $oRedBox->innerHTML = $sText;

        $iX = $oDocument->this->x;
        $iY = $oDocument->this->y + $oSender->window->document->this->height;

        $oRedBox->setAttribute('style',
                                                   'background:red;width:100px;height:100px;position:absolute;left:'.
                                                   $iX.'px;top:'.$iY.'px; display: block');
    }
   
    // Tu nadpisujemy metodę która zwraca kontroller klasy.
    public function getController($sMethod,$aParams) {
        return new PublicController();
    }

}

Teraz można swobodnie uruchamiać wszystkie metody z klasy MyAjaxClass nie będąc zalogowanym do systemu. Istnieją oczywiście jeszcze inne kontrolery. Sprawdzają one np, czy zalogowany użytkownik ma dostęp do danej strony itp.

Zobacz więcej...

Metryka dokumentu

Tytuł: Data not available! Please fill metadata!
Opis: Data not available! Please fill metadata!
Źródło: Data not available! Please fill metadata!
Prawa autorskie: Data not available! Please fill metadata!
Autor: root Zmodyfikowany przez: root
Data utworzenia: 2010-02-12 16:24:32 Data modyfikacji: 2010-02-12 16:35:07
Data publikacji: 2010-02-12 16:34:42
(c) +CMS Content Management Platform