AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) to technologia, która w ciągu ostatnich lat stała się bardzo popularna – głównie za sprawą firm Google i Facebook, które stosują je na swoich stronach. Polega ona na asynchronicznym wczytywaniu wybranych elementów strony bez przeładowywania całości. Dzięki temu zyskujemy większą elastyczność oraz możliwość wykonywania pewnych czynności wymagających udziału serwera bez przerywania użytkownikowi jego poczynań na stronie.
Biblioteka jQuery umożliwia wykonanie zapytania AJAX na kilka sposobów. Jednym z nich jest funkcja $.ajax() będąca najbardziej rozbudowaną funkcją AJAX’ową dostępną w ramach tej biblioteki. Na prostym przykładzie postaram się przedstawić jej działanie i opisać podstawowe atrybuty dzięki, którym każdy będzie mógł z niej skorzystać.
Przykład
Celem jest stworzenie funkcji, która będzie wysyłała wartość uzupełnioną przez użytkownika do skryptu na serwerze, który następnie sprawdzi czy występuje ona w odpowiedniej tabeli w bazie danych i ewentualnie doda ją do niej. Zatem przykład będzie składał się z trzech części: bazy danych, skryptu na serwerze i skryptu jQuery wykonującego zapytanie.
Baza danych
Nasza tabela jest bardzo prosta i składa się jedynie z dwóch pól:
- id – identyfikator rekordu. Dla poszczególnych słów będą to kolejne liczby naturalne.
- word – słowo, które będziemy przesyłać. Zakładamy, że w tabeli musi być unikatowe.
Zapytanie SQL generujące tą tabelę wygląda następująco:
[sql]
CREATE TABLE `words` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`word` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `word` (`word`)
) ENGINE=InnoDB DEFAULT CHARSET=latin2 AUTO_INCREMENT=1 ;
[/sql]
Skrypt PHP na serwerze
Do napisania skryptu wykorzystałem framework Codeigniter w wersji 2.1.3. Można oczywiście skorzystać z innego Framework’a lub stworzyć skrypt od podstaw – to jednak zajęłoby znacznie więcej czasu. Kontroler tego skryptu wygląda następująco:
[php]
class Ajax extends CI_Controller {
//konstruktor klasy
public function __construct() {
parent::__construct();
}
//funkcja wczytująca widok strony
//na której znajduje się formularz i skrypt AJAX
public function index() {
$this->load->view(’index’);
}
//funkcja odbierająca zapytanie AJAX
public function check_word()
{
//wczytanie modelu zawierjącego funkcje
//do obsługi tabeli 'words’
$this->load->model(’words’);
//definicja tablicy, którą będziemy
//zwracać w odpowiedzi na zapytanie
$response = array(
'status’ => 'ok’,
'message’ => array(),
);
//pobranie słowa przesłanego POST’em
$word = $this->input->post(’word’,true);
//walidacja
if (empty($word)) {
$response[’status’] = 'errors’;
$response[’message’][’empty’] = 'Uzupełnij słowo’;
}
if (strlen($word) > 255) {
$response[’status’] = 'errors’;
$response[’message’][’too_long’] = 'Słowo jest za długie’;
}
//sprawdzenie czy słowo istnieje w bazie danych
if ($this->words->check($word)) {
$response[’status’] = 'errors’;
$response[’message’][’word_exist’] = 'Słowo znajduje się już w bazie danych’;
}
//jeżeli do tej pory nie wystąpiły błędy
//to możemy zapisać słowo w bazie danych
if ($response[’status’]==’ok’) {
//dodajemy słowo do bazy i otrzymujemy
//id jakie zostało mu nadane
$id = $this->words->add($word);
if ($id > 0) {
//ID jest liczbą naturalną większą od 0
//co oznacza, że wszystko poszło dobrze
$response[’message’][’ok’] = 'Słowo zostało zapisane w bazie danych i otrzymało ID ’.$id;
} else {
//w przypadku niepowodzenia funkcja add
//może zwrocić wartość false
//np. gdy nie uda się połączyć z bazą danych
$response[’status’] = 'errors’;
$response[’message’][’database’] = 'Wystąpił błąd bazy danych – nie udało się dodać słowa’;
}
}
//w odpowiedzi zwracamy obiekt typu JSON
//i kończymy działanie skryptu
die(json_encode($response));
}
}
[/php]
W modelu znajdują się dwie funkcje. Pierwsza tworzy zapytanie SQL do sprawdzenia czy w bazie istnieje wskazane słowo, a druga dodaje wybrane słowo do bazy danych.
[php]
class Words extends CI_Model {
public function __construct() {
parent::__construct();
}
//funkcja sprawdza czy dane słowo
//jest już zapisane w bazie danych
public function check($word = ”)
{
$this->db->where(array(’word’ => $word));
$query = $this->db->get(’words’);
$res = $query->result_array();
return empty($res)?false:true;
}
//funkcja dodaje słowo do bazy danych
public function add($word = ”) {
$this->db->insert(’words’,array(’word’ => $word));
return $this->db->insert_id();
}
}
[/php]
Skrypt jQuery AJAX
Wymaga on oczywiście załączenia biblioteki jQuery, którą można pobrać z tej strony. Skrypt ten będzie działał po stronie użytkownika. Wykorzystamy do tego wspomnianą wcześniej funkcję $.ajax() w jej podstawowej postaci. Będzie ona wywoływana po naciśnięciu przycisku formularza, a otrzymaną odpowiedź zapisywać będziemy w wybranym tagu. Kod HTML przedstawia się następująco:
[html]
<div id=”info”></div>
<p>
<input id=”word” type=”text” name=”word” />
<button onclick=”ajax_check_word();”>sprawdź »</button>
</p>
[/html]
Funkcja, która realizuje zapytanie ma postać:
[js]
function ajax_check_word() {
var url = '/samples/codeigniter/index.php/ajax/check_word’;
var word = $(’#word’).val();
$.ajax({
url: url,
dataType: 'json’,
type: 'POST’,
data: {
word: word
},
success: function(response) {
console.log(response);
$(’#info’).html(”);
if (response.status == 'ok’) {
$(’#info’).css(’color’,’green’);
} else {
$(’#info’).css(’color’,’red’);
}
$.map(response.message, function(value, index) {
$(’#info’).append(value + '<br/>’);
});
}
});
}
[/js]
Wykorzystane w przykładzie parametry $.ajax to:
- url – adres skryptu po stronie serwera do, którego wysyłamy zapytanie
- dataType – format danych jaki otrzymamy od serwera. Do wyboru są XML, JSON, SCRIPT lub HTML. W naszym przykładzie skorzystamy z JSON’a, który zostanie zwrócony do skryptu jako obiekt
- type – typ zapytania – POST lub GET
- data – dane przesyłane w zapytaniu, obiekt składający się z kluczy i przypisanych do nich wartości
- success – funkcja wywołana po udanym wykonaniu zapytania do serwera
Po udanym wykonaniu zapytania do serwera odpowiedź odbieramy jako obiekt. Pierwszy element to funkcja console.log(), nie jest ona wymagana i w finalnej wersji skryptu można ją zakomentować – jednak z punktu widzenia programisty jest bardzo ważna. Pozwala na wyświetlenie w konsoli zmiennej, która jest do niej przekazana jako parametr, a dzięki temu umożliwia debugowanie. Następnym krokiem jest wyczyszczenie tagu zawierającego informacje
[js]
$('#info').html('');
[/js]
W kolejnym kroku sprawdzamy jaki jest status odpowiedzi wygenerowanej przez skrypt na serwerze i w zależności od niego ustawiamy kolor w jakim będą wyświetlane informacje – dla błędów czerwony, a dla komunikatu o poprawnym dodaniu do bazy zielony. Dalej korzystając z funkcji $.map(), która działa analogicznie do PHP’owej pętli foreach, uzupełniamy dane w tagu informacyjnym.
Działający przykład można znaleźć na tej stronie. Przy niewielkich przeróbkach można go wykorzystać np. do sprawdzania dostępności loginów w bazie.
Przejdź do działającego przykładu
Podsumowując jQuery jest dobrym narzędziem umożliwiającym korzystanie w prosty sposób z technologii AJAX. O innych funkcjach i aspektach tej technologii napiszę niebawem.
Zobacz także: