Z topicu powstal artykuł
http://wortal.php.pl/phppl/wortal/artykuly/po_stronie_przegladarki/moje_pierwsze_starcie_z_ajaxem
topic przeznaczony na dyskusję na jego temat
----
nospor
Moje pierwsze starcie z AJAXem czyli przewodnik dla całkowicie zielonych.
Na podstawie klasy http://advajax.anakin.us/index-pl.htm Łukasza Lacha.
Zaskoczony sukcesem AJAXa w sieci, oraz problemami wielu użytkowników, postanowiłem zobaczyć z „czym to się je”, a moje doświadczenie przkazać innym. Zabieram się za googlowanie.
Zaczynam od tego czym właściwie jest AJAX. Jest, już przeczytałem - ale nie będę się tutaj rozpisywał, że jest to ble, ble, ble….tylko tak na mój chłopski rozumek. Jest to zaprzężenie JavaScriptu do ingerencji w kod HTML strony. JavaScript wysyła żądanie do serwera i otrzymuje odpowiedź, na jej podstawie modyfikuje cały czas otwartą stronę HTML.
Z technicznego punktu widzenia opiera się na „magicznej” właściwośći przeglądarki, która na zadane żądanie dostaje od serwera odpowiedź (XMLHttpRequest) w postaci tekstu (responseText) lub w postaci XML (responseXML). JavaScript „obrabia” odpowiedź i ingeruje w kod HTML (np. innerHTML lub window.write() ).
Googluję dalej, aby dowiedzieć się jak się z tego kożysta. W moje ręce wpada jedna z lepszych klas (i chyba jedyna polska klasa) advAJAX (http://advajax.anakin.us/index-pl.htm) autorstwa Łukasza Lacha. Klasa ta pozwala w prosty sposób kontrolować stan, w jakim jest nasze zapytanie. W skrócie polega to na tym, że wywołujemy metodę get() lub post() obiektu advAJAX i otrzymujemu odpowiedź (obj):
<? http://www.php.net/header("Content-type: text/xml; charset=UTF-8"); $query="SELECT count(*)AS total FROM zamowienia_old;"; $result = http://www.php.net/mysql_query($query); $row = http://www.php.net/mysql_fetch_assoc($result); $total = $row['total']; $query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10"; $result = http://www.php.net/mysql_query($query); http://www.php.net/echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'" max_per_page="'.$per_page.'" page="'.$page.'" count="'.http://www.php.net/mysql_affected_rows().'">'; while ($row = http://www.php.net/mysql_fetch_assoc($result)){ http://www.php.net/echo '<record>'; while(list($Index,$Value)=http://www.php.net/each($row)){ http://www.php.net/echo '<'.$Index.'>'.convert($Value).'</'.$Index.'>'; } http://www.php.net/echo '</record>'; } http://www.php.net/echo '</records>';?>
Boom
Wg. mnie nadaje sie to na artykul
Temat jest ostatnio popularny a ~TomASS napisał kilka ciekawych informacji.
Podpinam.
(ewenualne dyskusje o AJAXie, oraz ciekawe spostrzeżenia czy porady proszę zamieszczać tutaj)
A ja przeniosę z początkujący na poziom wyzej
---
nospor
to zdecydowanie nadaje się na artykuł, tutaj kompletnie nie pasuje.
Według mnie większość tych klas do ajaxa (a chodzi przecież o bardzo prosty w obsłudze, z raptem paroma metodami obiekt xmlHttp - szczerze nie lubię nazwy ajax) tylko zaciemnia i komplikuje całą idee.. a początkującym użytkownikom utrudnia zrozumienie jakie naprawdę ma możliwości obiekt xmlHttp i robi z całego obiektu jakiś trudny do ogarnięcia moloch.
Bardzo dobry artykuł o xmlHttp (po angielsku) jest też http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/?ca=dgr-lnxw07AJAX-Request
Tak czy inaczej artykuł bardzo dobry i pomocny dla osób zaczynających z AJAX'em. mariuszn3: Gdyby wszystkiego używało się łatwo i przyjemnie to nie powstawałyby takie rzeczy jak AJAX, ADoDB czy połowa PEAR'a. A z innej beczki: poprawiłem pare literówek w kodzie JS, żeby nie było, że coś nie działa.
Nic z tego nie zrozumialem. Pozaym co ten Ajax robi wogole?
Najprostrzy przykład użycia, na chłopski rozum: AJAX pozwala na zmianę treści części strony bez przeładowywania całej strony dając także dodatkowe możliwości jak np. wyświetlenie informacji o trwaniu przeładowywania danych etc.
Aha. Pożyteczne ;P
---
Nabijanie postów.!
Kolejne takie posty będą karane.
~mike_mech
Witam. Aby jeszcze bardziej przybliżyć technologię AJAX, przedstawie jeszcze jeden przykład. Jest to ulepszona walidacja formularza do rejestracji użytkownika. Potrzebny będzie nam jak zwykle plik klasy advAJAX.js, plik z funkcjami js (register.js), oraz pliki: register.php oraz register2.php…… troszkę dużo się nazbierało, ale już wyjaśniam.
Ogólna idea jest taka:
Wczytujemy formularz z pliku register.php, po wypełnieniu pól zaczyna się magia……ekhm, no nie zupełnie, zaczyna się AJAX, wywołuje odpowiednią funkcję JS, która przesyła odpowiednie dane (z formularza) do pliku register2.php, on daje odpowiedź i ajax na podstawie otrzymanej odpowiedzi wysyła bądź nie formularz. Ktoś może powiedzieć, że to można zrobić bez ajaxa – fakt, można, ale nie zamierzam nikogo do tego przekonywać, potraktujmy to jako ćwiczenie.
Zaczniemy od pliku register.php. Równie dobrze, mógłby być to register.html, to bez różnicy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <http://december.com/html/4/element/head.html> <http://december.com/html/4/element/title.html>rejestracja nowego użytkownika</http://december.com/html/4/element/title.html> <http://december.com/html/4/element/script.html type="text/javascript" src="register.js"></http://december.com/html/4/element/script.html> <http://december.com/html/4/element/script.html type="text/javascript" src="advajax.js"></http://december.com/html/4/element/script.html> <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=utf-8" /> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <http://december.com/html/4/element/form.html action="register3.php" method="POST" id="registerForm" name="registerForm"> <http://december.com/html/4/element/table.html> <http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Login:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="text" name="login" id="login"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Hasło:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="password" name="Haslo"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Powtórz hasło:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="password" name="Haslo2"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">E-mail:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="text" name="email" id="email"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html colspan="2" style="text-align: center;"><http://december.com/html/4/element/button.html onclick="sprawdz_dane();">Zarejestruj mnie...</http://december.com/html/4/element/button.html></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> </http://december.com/html/4/element/form.html> </http://december.com/html/4/element/table.html> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
function $(id) { return document.getElementById(id); } function sprawdz_dane() { var login = $("login").value; var email = $("email").value; var zapytanie = "register2.php?login="+login+"&email="+email; advAJAX.get({ url : zapytanie, onSuccess : function(obj) { if(obj.responseText == "login"){ alert("Użytkownik o takim loginie jest już w bazie danych"); $("login").style.border='1px solid red'; $("email").style.border='1px solid #7F9DB9'; } if(obj.responseText == "email"){ alert("Ten e-mail isntieje już w bazie danych"); $("login").style.border='1px solid #7F9DB9'; $("email").style.border='1px solid red'; } if(obj.responseText == "OK") $("registerForm").submit(); } }); }
<? $dbhost = localhost; $dblogin = root; $dbhaslo = ''; $db = uop; http://www.php.net/session_start(); http://www.php.net/mysql_connect ($dbhost,$dblogin,$dbhaslo) or http://www.php.net/die ("Nie masz uprawnien"); http://www.php.net/mysql_select_db ("$db"); $login = http://www.php.net/mysql_escape_string($_GET['login']); $email = http://www.php.net/mysql_escape_string($_GET['email']); $query = "SELECT count(*)AS Ile FROM uop_users WHERE Login='".$login."';"; $result = http://www.php.net/mysql_query($query); $row = http://www.php.net/mysql_fetch_array($result); if($row['Ile']) http://www.php.net/echo 'login'; else{ $query = "SELECT count(*)AS Ile FROM uop_users WHERE e_mail='$email';"; $result = http://www.php.net/mysql_query($query); $row = http://www.php.net/mysql_fetch_array($result); if($row['Ile']) http://www.php.net/echo 'email'; else http://www.php.net/echo 'OK'; } ?>
advAJAX.assign($(“registerForm”))
Nie jestem ekspertem od js ale takie cus widze po raz pierwszy.
Ta... Tutaj $ to po prostu nazwa funkcji.
No to szyd niezly . Nie dziwie sie wiec, ze powstaja artykuly o takim tytule :
http://www.crockford.com/javascript/javascript.html .
TomASS, jest juz pozno wiec bede sie streszal:
Marusz
pragnę tylko przypomnieć że używanie COUNT jest szybsze i to o wiele od mysql_num_rows , a zwlaszcza gdy rodzaj tabeli to MyIsam .
Zwróć uwagę że select * a pozniej mysql_num_rows oznacza tyle co zwrocenie przez query calego select * itd. , a count (*) zwraca ci tylko jeden wiersz.
Pozdrawiam
z tego co wywnioskowalem, to ajax sluzy do dynamicznego zmieniania zawartosci strony bez przeladowania, czyli np. te reklamy na onecie co sie zmieniaja tez sa zrobione ajaxem??
Hmm.. a co mają zrobić osoby, które wyłączają JS, albo są zmuszone wejść na stronę np. linksem? Czy takie ślepe zauroczenie AJAX-em nie wpłynie zgubnie na, już i tak olewaną, kwestię dostępności witryn (WCAG i te sprawy)?
I tu wlasnie wychodzi, jak to moj kolega z grupy ladnie ujal, "Najbardziej czasochłonny, skomplikowany, redundantny i niezauważany mechanizm, jaki można zaimplementować.". Chodzi oczywiscie o interfejs dla przegladarek bez takich "cudow" jak JS itp. Zobacz sobie serwisy google korzystajace z AJAXA jak dzialaja z wylaczonym JS.. nie jest to juz tak user friendly, ale jest w pelni uzyteczne. Boli jedynie to, ze trzeba to w porzadnej aplikacji zaimplementowac, a wiekszosc ludzi nawet tego nie zauwazy.
Ja to robię wpierw jedną stronę - dla której nie potrzeba JS, oraz przygotowuję zmodyfikowaną wersję z JS i AJAXem. Cos na styl poczty na interii - do wyboru
Natomiast zawsze staram się klienta pytać jaki sprzęt używa.
Lynksa chyba nie używa nawet 0,0001% ludzi
Jasne. Wszystko przecież zależy od charakteru witryny.
Nie chciałbym mieć po prostu takiej sytuacji, że wchodzę na shella, próbuję ściągnąć nowe php a tu kicha, bo linksem się do tego nie dostanę.
Podobnie ze sprawdzeniem poczty – jasne, że raczej nie będę dokonywał zmiany konfiguracji profilu, nawet nie będę maila wysyłał – ale blokowanie możliwości sprawdzenia, czy ktoś coś mi przysłał byłoby IMHO nie na miejscu.
O to mi mniej więcej chodziło .
Witam ponownie wszystkich forumowiczów
Postanowiłem opisać jeszcze jeden przykład na wykorzystanie AJAXa oraz na rozwiązanie popularnego problemu od czasu do czasu poruszanego na tym forum.
Chodzi tutaj o dwa selecty <span style="font-style: italic;">"sprzężone"</span> ze sobą w ten sposób, że wybór odpowiedniej pozycji na <span style="font-weight: bold;">selekcie1</span> wpływa na zawartość <span style="font-weight: bold;">selecta2</span> - np. mamy wybrać ze spisu jedną wieś w Polsce. Przeszukując selectem cały spis wszystkich miejscowości moglibyśmy się zaszukać na śmierć . Wygodniej byłoby wybierać po kolei: Województwo -> Powiat -> Gmina -> Miejscowość.
Przedstawie tuta tylko pierwszy etap (Województwo -> Powiat) - dorobienie reszty jest już dziecinnie proste.
Noto zaczynamy.
Na początek podam definicję bazy danych abyście nie musieli się trudzić - oczywiście ktoś może ją wypełnić swoimi danymi:
# # Struktura tabeli dla `powiaty` # CREATE TABLE `powiaty` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `ID_wojewodztwo` int(10) DEFAULT NULL, `Powiat` varchar(20) DEFAULT NULL, UNIQUE KEY `ID` (`ID`) ) TYPE=MyISAM AUTO_INCREMENT=15 ; # # Zrzut danych tabeli `powiaty` # INSERT INTO `powiaty` VALUES (1, 1, 'Wroclawski'); INSERT INTO `powiaty` VALUES (2, 1, 'Sroda Slaska'); INSERT INTO `powiaty` VALUES (3, 1, 'Miekinia'); INSERT INTO `powiaty` VALUES (4, 1, 'Legnica'); INSERT INTO `powiaty` VALUES (5, 1, 'Lubin'); INSERT INTO `powiaty` VALUES (6, 2, 'Opole'); INSERT INTO `powiaty` VALUES (7, 2, 'Brzezie'); INSERT INTO `powiaty` VALUES (8, 2, 'Grodkow'); INSERT INTO `powiaty` VALUES (9, 2, 'Brzeg'); INSERT INTO `powiaty` VALUES (10, 2, 'Nysa'); INSERT INTO `powiaty` VALUES (11, 3, 'Szczecin'); INSERT INTO `powiaty` VALUES (12, 3, 'Szczecinek'); INSERT INTO `powiaty` VALUES (13, 3, 'Gryfow'); INSERT INTO `powiaty` VALUES (14, 3, 'Miedzyzdroje');
<http://december.com/html/4/element/html.html> <http://december.com/html/4/element/head.html> <http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=utf-8" /> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <http://december.com/html/4/element/select.html name="wojewodztwa" id="wojewodztwa" onchange="getRecords();"> <http://december.com/html/4/element/option.html></http://december.com/html/4/element/option.html> <http://december.com/html/4/element/option.html value="1">Dolnośląskie</http://december.com/html/4/element/option.html> <http://december.com/html/4/element/option.html value="2">Opolskie</http://december.com/html/4/element/option.html> <http://december.com/html/4/element/option.html value="3">Zachodnio Pomorskie</http://december.com/html/4/element/option.html> </http://december.com/html/4/element/select.html> <http://december.com/html/4/element/select.html name="gminy" id="gminy" style="width: 200px;"> </http://december.com/html/4/element/select.html> <http://december.com/html/4/element/script.html type="text/javascript" src="advajax.js"></http://december.com/html/4/element/script.html> <http://december.com/html/4/element/script.html type="text/javascript" src="function.js"></http://december.com/html/4/element/script.html> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
<? http://www.php.net/header("Content-type: text/xml; charset=UTF-8"); http://www.php.net/echo '<?xml version="1.0" encoding="UTF-8"?>'; $dbhost = localhost; $dblogin = root; $dbhaslo = ''; $db = uop; http://www.php.net/mysql_connect (localhost,root,'') or http://www.php.net/die ("Nie masz uprawnien"); http://www.php.net/mysql_select_db (uop); $wojewodztwo = (int)$_GET['wojewodztwo']; if(!$wojewodztwo) $wojewodztwo = 1; http://www.php.net/echo '<records>'; $query = "SELECT ID, Powiat FROM powiaty WHERE ID_wojewodztwo='$wojewodztwo'"; $result = http://www.php.net/mysql_query($query); http://www.php.net/echo http://www.php.net/mysql_error(); while ($row = http://www.php.net/mysql_fetch_array($result)){ http://www.php.net/echo '<record>'; http://www.php.net/echo '<ID>'.$row['ID'].'</ID>'; http://www.php.net/echo '<nazwa>'.$row['Powiat'].'</nazwa></record>'; } http://www.php.net/echo '</records>'; ?>
header("Content-type: text/xml; charset=UTF-8"); echo '<?xml version="1.0" encoding="UTF-8"?>';
function $(id){ return document.getElementById(id); } function parseRecords(xml) { var opttypes = document.getElementById("gminy"); record = xml.getElementsByTagName("record"); ID = new Array(); nazwa = new Array(); for (i = 0; i < record.length; i++) { nazwa[i] = record[i].childNodes[1].childNodes[0].nodeValue; ID[i] = record[i].childNodes[0].childNodes[0].nodeValue; } for (i = opttypes.options.length-1; i >= 0; i--) { opttypes.remove(i); } for(var i = 0; i < nazwa.length; i++) { opttypes.options[i] = new Option(nazwa[i],ID[i]); } } function getRecords() { var wojewodztwo = $("wojewodztwa").value; advAJAX.get({ url : "odpowiedz.php?wojewodztwo="+wojewodztwo, onInitialization : function(obj) { $("gminy").disabled="true"; }, onSuccess : function(obj) { parseRecords(obj.responseXML); $("gminy").disabled=""; } }); }
record[i].childNodes[0].childNodes[0].nodeValue; record[i].childNodes[1].childNodes[0].nodeValue;
@TomASS - pierwszy post, z wyjatkiem sparafrazowania definicji AJAXa i kilku linków na końcu, jest zwyklym streszczeniem dokumentacji advAJAXa napisanej przez Łukasza Lacha. Nie wnosi wiele nowego, nic nie upraszcza i z pewnoscia nie nadaje sie na artykul. Moze po malych przerobkach daloby sie z tego stworzyc haslo w wikipedi.
Twoje kolejne posty przedstawiajace przyklady zastosowania advAJAX sa juz o wiele bardziej interesujące. Mam jednak mala uwagę. Czy mógłbyś w js stosowac wcięcia? Odpowiednio sformatowany kod łatwiej się czyta.
Witam.
Zainteresowałem sie przykładem autora advajax, "stronnicowanie danych"...
kod źódłowy wziełem z płytki "php solutions" i napotkałem pare problemów, które nie potrafie obejśc...
pierwszym, który napotkałem to wstawienie styli do tabelki generowanej przes skrypt js oto kod autora advajax:
Tabelka jest już gotowa - zobacz do źródła http://advajax.anakin.us/phpsolutions/2.html:
<http://december.com/html/4/element/table.html> <http://december.com/html/4/element/thead.html> </http://december.com/html/4/element/thead.html> <http://december.com/html/4/element/tbody.html id="dataTable"> </http://december.com/html/4/element/tbody.html> <http://december.com/html/4/element/tfoot.html> </http://december.com/html/4/element/tfoot.html> </http://december.com/html/4/element/table.html>
Dzieki TomASS, Twoja odpowiedź była pomocna.
jednak dalej nie moge "podpiąć" całego styla z pliku .css pod tabele. próbowałem tak:
z tego co się orientuje w javascripcie to zamiast:
Dzieki chlopaki za pomoc.. teraz już dużo mi sie rozjaśniło...
Przeglądałem przykłady zastosowania AJAX'a, bardzo dobry jest przykład menu z możliwością ręcznego sortowania. http://demo.script.aculo.us/ajax/sortable_elements ...
jest to chyba zbudowane na innym "silniku" AJAX. potrafił by ktoś zrobić coś takiego na AdvAJAX?
P.S. TomASS Twój przykład z formularzem rejestrującym nie działa.. (domyślam sie, że chyba nie jest on dokończony...)
Bardzo ładnie, panowie
Dzisiaj przeczesując czeluścia internetu natrafiłem na http://labs.revision10.com/experiments/dat/dat_example.php - świetna sprawa oparta na AJAXie.
Siedze już kurde drugi dzień nad tym ajaxem i albo jestem jakis ciemny, albo nie wiem... Już nie napisze, że nie potrafie przerobić przykładu "stronnicowanie danych" tak, zeby kożystał z tabeli o innej strukturze... no ale pokolei...
Pierwsze, przez co nie moge przebrnąc to wstawieniue danych z bazy do formularza...w tym przypadku kożystałem z '.value', nie kożystałem z '.innerHTML' ponieważ w formularzu nic sie nie działo.. '.innerHTML' bez problemu wstawia dane do np <DIV id="xxx">...</DIV> ale do <INPUT type="text" name="xxx" id="xxx"> już nie wstawia, wyskakuje błąd..
plik zaladuj.js:
<?php $mysql_link = http://www.php.net/mysql_connect('host', 'login', 'haslo'); http://www.php.net/mysql_select_db('db'); $mysql_result = http://www.php.net/mysql_query('SELECT '.$wartosc.' FROM tbl_news WHERE id_news=3 LIMIT 0,1'); $row = http://www.php.net/mysql_fetch_assoc($mysql_result); http://www.php.net/print($row[$wartosc]); ?>
A jak zrobic cos w stylu loadingu ale z procentami?
Np. chodzi mi, ze mam liste mailingowa i 300 maili do rozesłania.
Wpisuje tresc i naglowek, klikam Rozeslij, i chciałbym dowiadywac sie w jakim stopniu maile zostały juz rozesłane, czy to 30 maili (10%) czy tez 99% maili ?
Mam jeszcze taką sprawę...
Czytałem troche na stronie advAJAX o wysyłaniu formularzy no i sa tam dwa sposoby wysyłania formularzy.. jeden to
Może coś wyjaśnię.
Rzeczywiście mike_mech - nie ma wpływu na SMARTY.
Inn sprawa, że advAJAX może wysłać żądanie do serwera, który dzięki SMARTY wygeneruje jakiś HTML i później dzięki innerHTML można ten kod umieścić na stronie. Ale na sposób generacji AJAX może wpływać tylko poprzez żądanie do serwera.
Hmm.. ja właściwie dopiero zainteresowałem sie AJAXem, ale mam pewien problem, a mianowicie póki co mam taki prosty kodzik:
test.php
<?php include '../config.inc.php'; $zapytanie = "SELECT * FROM `arkaProdukty` WHERE `ProductId`='".$_GET['id']."' LIMIT 1"; $odp=http://www.php.net/mysql_query($zapytanie); while($row=http://www.php.net/mysql_fetch_array($odp)) { http://www.php.net/echo $row['Symbol']; } ?>
<http://december.com/html/4/element/div.html id="e3_div1" class="e3_div"></http://december.com/html/4/element/div.html><http://december.com/html/4/element/br.html/><http://december.com/html/4/element/br.html/>
Używam do wysyłania fomrularza AJAX'a .. wszystko jest ok, ale co zrobic, jeżeli na jednej stronie są dwa różne formularze...
Mam w <BODY ... onload="updateObjects();">
Nie latwiej zrobic osobne funckje dla obslugi kazdego formularza updateObjects1() i updateObjects2()?
Mam takie pytanie co do advAJAX.assign()...
Chodzi mi konkretnie o wysyłanie tablicy...
mam taki form:
<http://december.com/html/4/element/form.html ...> <http://december.com/html/4/element/input.html type=checkbox name=zaznacz_mnie[] value=1> <http://december.com/html/4/element/input.html type=checkbox name=zaznacz_mnie[] value=2> <http://december.com/html/4/element/input.html type=checkbox name=zaznacz_mnie[] value=3> </http://december.com/html/4/element/form.html>
<?php if(http://www.php.net/count($zaznacz_mnie)>0) { foreach($zaznacz_mnie as $id_pozycji) { sql("DELETE FROM news WHERE id = '".$id_pozycji."' LIMIT 1"); } } ?>
Hmm.. ja mam pytanko dot. tego czego lepiej użyć, które rozwiązanie jest bardziej optymalne:
1.
advAJAX.get({ url: "look.php?symbol="+p, tag: "symbol" }); advAJAX.get({ url: "look.php?rozmiar="+p, tag: "rozmiar" }); advAJAX.get({ url: "look.php?skora="+p, tag: "skora" }); advAJAX.get({ url: "look.php?fotoD="+p, tag: "fotoD" });
Mozesz wyslac jedno zapytanie do serwera i odbierac wynik w postaci pliku XML. Po napisaniu parsera wyciagajacego z pliku XML poszczegolne elementy mozesz aktualizowac drzewo DOM dokumentu w kilku miejscach za jednym zamachem.
a kiedy mozna spodziewać się wersji 1.1??
AdvancedAJAX 1.1
http://anakin.us/blog/advancedajax-11/
Szkoda, że onProgress działa tylko na Mozili Bardzo fajna sprawa.
jak jest z tym "url:"
czy mozna pobierac tez dane nie z lokalnego serwera ( url: "jakislokalnyplik.php", .. ) tylko odwolujac sie url: "http://.."
bo cos mi to nie dziala jak pobieram z innego
Mozesz pobierac tylko dane z serwera, z ktorego zostal wywolany skrypt (np. php). Wzgledy bezpieczenstwa .
Fakt. Poprawione:
http://advajax.anakin.us/opera/test4.html
OK.. teraz tablice śmigają elegancko ...
Szkoda, że onProgress działa tylko na Mozili i Operze.. w sumie to większość internautów dalej korzysta z IE...
W Operze to działa połowicznie...
Wybacz Łukaszu moje niedoinformowanie. Otóż testowałem onProgress w ten sam dzień co się ukazała werska 1.1 i działało tylko na FF, w Operze było 4% i odrazu 100% - także napisałem, że działa 'połowicznie'. Teraz jest wszystko w prządku i działa bez zarzutu. Sorki za wprowadzenie lekkiej nutki haosu
A co z polskimi literami?
Wysyłając formularz funkcją advAJAX.assign() polskie litery zmieniają sie na jakieś znaczki, kwadraciki... sprawdzałem w phpmyadminie też nie wyświetlają sie polskie litery...
No ale z drugiej strony znaczki dobrze wyświetlają sie przez advAJAX.get()... co z tym zrobić...?
Na forum http://forum.skryptoteka.pl/6_2862_0.html byl ten sam problem, ale coś nie moge tego rozwiązac..
Dałem do pliku w którym zapisuje dane z formularza ajaxa:
Gdzieś wyczytałem, w tej chwili nie pamiętam źródła, że przekazując dane z php do JS należy używać UTF, aby te dane były poprawnie przekazane.
O już znalazłem:
artykuł pt.: "ĄŚŹ czyli polskie ogonki w internecie" zamieszczony w magazynie INTERNET z listopada 2005r., zdaniem autora jedynym sposobem na rozwiązanie tego problemu jest UTF-16.
z moich zabaw z komunikacją Flash <-> JS <-> HTML wynika ze to mozwe byc prawda. Jak na razie tylko z kodowaniem w Operze nie mialem klopotow, ale Firefox i MSIE maja ogromna "dziure" w kodowaniu znakow na linii komunikacji z JS (w samym JS jest ok, ale przesylanie danych do JS sie krzaczylo) :-/
polowicznym rozwiazaniem bylo wprowadzenie przeze mnie "translatora" (zmieniamy polskie czcionki na jakies zdefiniowane prez nas ciagi, przesylamy tresc do JS a JS wprowadza nam PL znaczki w miejscu wprowadzonych przez nas znacznikow). Sęk w tym że ta ostatnia częśc (przetwarzanie w JS) może w widoczny sposob spowalniać wyświetlenie załadowanej treści, zwłaszcza gdy mamy do czynienia z długimi tekstami.
Do przesyłania różnych dziwnych znaczków (w tym polskich znaków diaktrycznych) przez url jest w js taka funkcja jak encodeURIcomponent()
nie wiem czy to jest błąd czy przemyślana sytuajcja ale czemu przy wysyłniu formularza w advAjax (za pomocą ajax.assign) nie wysyła pola <input type="submit" /> ?
btw. co do polskich znaków wysłanych za pomocą ajaxa to poradziłem sobie w następujący sposób:
poźniej za pomocą Creole wstawiam dane do postgresa, bez mb_convert_encoding nie wstawiał mi danych, wywalał błędy o złych znakach. dziwna jest tylko ta zmiana z UTF-8 na UTF-8
<?php foreach($_POST as $k => $v) { $_POST[$k] = mb_convert_encoding($_POST[$k], "UTF-8","UTF-8"); } ?>
a ja właśnie sprawdziłem kwestie kodowania i nie trzeba stosować UTF-16, wystarczy UTF-8, plik w którym używam AJAXa jest kodowany UTF-8, plik towrzący XMLa jest kodowany w UTD-8 oraz sam wygenerowany XML jest zakodowany w UTF-8 i nie ma żadnych problemów
<?php foreach($_POST as $k => $v) { $_POST[$k] = mb_convert_encoding($_POST[$k], "UTF-8","UTF-8"); } ?>
Hej. Może by tak kolejny przykładzik kogoś zainteresował ?
Bardzo często przy moich projektach spotykam się z proźbą klienta o możliwość 'kolorowania' poszczególnych wierszy w tabeli (rekordów). Fajna sprawa - klient np. zaznacza jakieś ważna dla drugiej strony rekordy na czerwono i już jest wiadomo o co chodzi. Jednak jest (był) mały problem - po każdorazowym pokolorowaniu wiersza trzeba było odświeżyć stronę. Naszczęście z pomocą mi przyszedł mi AJAX Oto co wykombinowałem:
Potrzebujemy oczywiście http://advajax.anakin.us/advajax.js.
Struktura bazy danych:
CREATE TABLE `kolory` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `Kolor` varchar(7) DEFAULT NULL, `ID_rekord` int(10) DEFAULT NULL, UNIQUE KEY `ID` (`ID`) );
<html> <head> </head> <script> function $(id){ return document.getElementById(id); } function okienko(strona){ window.open(strona, '', 'menubar=yes,toolbar=yes,location=yes,directories=yes,status=yes,scrollbars=yes,r
esizable=yes,fullscreen=no,channelmode=no,width=200,height=300,left=150,top=100'); } </script> <body> <table border="1"> <? $dbhost = 'localhost'; $dblogin = root; $dbhaslo = ''; $db = test; http://www.php.net/mysql_connect ("$dbhost","$dblogin","$dbhaslo") or http://www.php.net/die ("Nie masz uprawnien"); http://www.php.net/mysql_select_db ("$db"); for($i=1;$i<10;$i++){ $query = "SELECT Kolor FROM kolory WHERE ID_rekord=$i LIMIT 1"; $result = http://www.php.net/mysql_query($query); $row = http://www.php.net/mysql_fetch_array($result); $kolor = $row['Kolor']?$row['Kolor']:'#723F42'; http://www.php.net/echo "<tr id=\"tr$i\" style='background: $kolor'>"; http://www.php.net/echo '<td>'.$i.'</td>'; http://www.php.net/echo '<td>'.($i*2).'</td>'; http://www.php.net/echo '<td>'.($i*3).'</td>'; http://www.php.net/echo "<td><button onclick=\"okienko('paleta.php?id=".$i."');\"></button></td>"; http://www.php.net/echo '</tr>'; } ?> </table> </body> </html>
<table width="50px;"> <http://december.com/html/4/element/tr.html><td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;"> </http://december.com/html/4/element/td.html><td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;"> </http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;"> </http://december.com/html/4/element/td.html><td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;"> </http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> </http://december.com/html/4/element/table.html>
opener.$('tr<?echo $_GET['id'];>').style.background=kolor;
Cały plik wygląda następująco:
advAJAX.post({ url : "zapisz_kolor.php", parameters:{ kolor: kolor, id: '<?echo $_GET['id'];?>' }, onSuccess : function(obj) { } });
<http://december.com/html/4/element/html.html> <http://december.com/html/4/element/head.html> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <script type="text/javascript" src="advajax.js"></http://december.com/html/4/element/script.html> <http://december.com/html/4/element/script.html> function wybierz_kolor(kolor){ opener.$('tr<?echo $_GET['id'];?>').style.background=kolor; advAJAX.post({ url : "zapisz_kolor.php", parameters:{ kolor: kolor, id: '<?echo $_GET['id'];?>' }, onSuccess : function(obj) { } }); } </http://december.com/html/4/element/script.html> <table width="50px;"> <http://december.com/html/4/element/tr.html><td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;"> </http://december.com/html/4/element/td.html><td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;"> </http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> <http://december.com/html/4/element/tr.html><td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;"> </http://december.com/html/4/element/td.html><td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;"> </http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html> </http://december.com/html/4/element/table.html> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
Jestem pewnien, że dla Was to pestka
<? $dbhost = 'localhost'; $dblogin = root; $dbhaslo = ''; $db = test; http://www.php.net/mysql_connect ("$dbhost","$dblogin","$dbhaslo") or http://www.php.net/die ("Nie masz uprawnien"); http://www.php.net/mysql_select_db ("$db"); $kolor = http://www.php.net/mysql_escape_string($_POST['kolor']); $rekord = (int)$_POST['id']; $query = "SELECT * FROM kolory WHERE ID_rekord=$rekord LIMIT 1;"; $result = http://www.php.net/mysql_query($query); if(http://www.php.net/mysql_affected_rows()>0){ $query = "UPDATE kolory SET Kolor='$kolor' WHERE ID_rekord=$rekord;"; } else{ $query = "INSERT INTO kolory (Kolor, ID_rekord) VALUES ('$kolor',$rekord);"; } $result = http://www.php.net/mysql_query($query); http://www.php.net/mysql_close(); ?>
@TomASS -> ciekawy przyklad - lubie zabawy z kolorami - tylko, co Ty zrobiles, ze sie Twoj post tak rozjechal?
Z racji faktu, iż powstał artykuł na podstawie topicu, topic zostaje przeniesiony na właściwe forum.
Dodatkowo, zaraz utworzę topic na XML, AJAX , w którym będą zbierane linki do artykułów, by mieć wszystko pod ręką
Witam!
Muszę przyznać, iż idea AJAXu bardzo mnie zainteresowała. W ogóle postanowiłem nie stać w miejscu, a zrobić krok do przodu i mała przesiadkę technologii. Czas odejść od schematu prosty HTML (tabelki) + prosty JS (używany właściwie symbolicznie) + PHP4 + MySQL.
Postanowiłem zacząć porządnie się edukować w celu wykorzystania technologii XHTML + AJAX + PHP5 (+ MySQL oczywiście). Mam jednakże kilka pytań bardziej ideologicznych niż technicznych (te pewnie będą później ). A mianowicie:
2. Troszeczkę nie rozumiem idei przedstawionej w przykładzie "php Solutions - Przykład 2. - Stronicowanie danych". O ile dobrze wywnioskowałem, to jest wysyłane zapytanie o odpowiednie dane, następnie są one pobierane z bazy i formowane w ładny i zgrabny XML, przesyłane na stronę i prezentowane w postaci tabelki. Dlaczego więc na poziomie pobierania danych z bazy nie upakować ich od razu w tabelkę, przesłać na stronę wyświetlić? Dlaczego stosujemy fazę pośrednią w postaci XMLa?
Z góry dziękuję za wytłumaczenie mi tych kwestii, będę wdzięczny .
Wycialem elementy nie majace nic wspolnego z tematem - NuLL
Cześć
ad 2 skor pyt 1 zostało wycięte
Załóżmy, że chcesz wykorzsytać plik generujący XML nie tylko do wstawiania danych do tabelek, ale ten sam plik chcesz wykorzystac gdzieś indziej - po co robić dwa razy tan sam plik tylko z różnym sposobem wyświetlania plików?
Jeśli chciałbyś zmienić wygląd tabelki to po co ingerować w sposób przesyłu tych danych?
XML jest jednym ze standardów do konwersji i przesyłania danych (tak chyba to można w skrócie napisać). Zarówno php jak i JavaScript posiadają mechanizmy do 'obróbki' takich danych.
Powodzenia i wytrwania w postanowieniach
dzięki za odpowiedź
Witam. Tak ostatnio próbowałem udoskonalić mój skrypt z ajax'em...
mam taki kawałek kodu:
<?php function getRecordsOdp(id_ankieta) { if(id_ankieta==null)id_ankieta="0"; advAJAX.get({ url : "plik.php", parameters : { "id_ankieta" : ""+id_ankieta+"", "var2" : "value2" }, ....... } ?>
<?php function getRecords() { advAJAX.get({ url : "2.php?p="+currentPage+"&s="+currentSort+"%20"+currentSortOrder, .... ?>
1. pytanie:
ja to robię tak:
<?php advAJAX.get({ url : "plik.php", parameters : { id_ankieta: id_ankieta, var2: value2 }, ....... } ?>
Powiem szczerze ten artykuł tak naprawdę zaciemnia sprawę AJAX'a niż ją rozjaśnia ja się właśnie uczę programowania z wykorzystaniem tej technologii (zgodnie z tym co wyżej napisane jest to JS rozszerzony o parę możliwości). Co AJAX potrafi, ano wiele potrafii . Może zacznę od tego, że gdy zaczynałem przygodę z WWW uważałem aplikacje internetowe za zwykłe ścierwo i nic interesującego, sprawa zmieniła się gdy spotkałem się z AJAX'em. Dla mnie rewela, programista aplikacji okienkowych pod Linuxa i pod Windows programujący w JAVA i C++ czuje się jak w domu. Oczywiście AJAX nie zapewnia takich samych możliwosci jak język C++. Chodzi oto iż technologia AJAX pozwala na zrealizowanie takiej aplikacji w pełni pod przeglądarkę, która będzie działać podobnie jak ta windowsowa "zwykła" aplikacja. AJAX zapewnia Drag'n'Drop (przeciągnij i upuść) co pozwala tworzyć bardziej intujcyjne apliakcje, pozwala na tworzenie aplikacji wielowątkowych... Można by powiedzieć że AJAX to rozwiązanie wielu problemów związanych z aplikacjami internetowymi. Oczywiście AJAX ma i swoje wady i zalety. Źle użyty raczej skomplikuje działanie strony... AJAX ze względu na swoje działanie stwarza problem z przyciskiem wstecz w przeglądarce, gdyż raz dokonana zmiana na stronie nie zostanie naprawiona poprzez kliknięcie wstecz. Więc programista w przypadku AJAX'a musi dodatkowo obsłużyć błędy z tym związane... pokazywanie artykułu o AJAX'ie który ma rozświetlić do czego służy AJAX i oprzeć go na klasach mija się z celem...
<?php advAJAX.get({ url : "plik.php", parameters : { id_ankieta: id_ankieta, var2: value2 }, ....... } ?>
xmlHttp.open("GET", "plik.php?name=" + id,true);
Dzięki za uwagi!
<?php advAJAX.get({ url : "plik.php", parameters : { id_ankieta: id_ankieta, var2: value2 }, ....... } ?>
<?php advAJAX.get({ url : "plik.php", parameters : { id_ankieta: id_ankieta, var2: value2 }, ....... } ?>
jak dla mnie to artykul napisany malo zrozumiale, gdybym nie przeczytal w nastronach developer.mozilla o ajax to bym praktycznie nic nie zrozumial o co chodzi z XMLHttpRequest()
Jakie zdziwienie wszystkich ogarnęło... Jakby AJAX powstał wczoraj...
Dobry artykuł. Na pewno się przyda, nie którym osobą. Z tego co mi wiadomo to naprawdę bardzo mało osób zna ten język. Bardziej jest popularny JS, ale moim skromnym zdaniem lepszy jest AJAX.
Zanim coś powiesz, zastanów się 3 razy...
A to to się zgodzę.
Swoją drogą - ad. tematu - to z AJAX robi się ostatnio technologię od wszystkiego - DHTML = AJAX, zmiana przez JS = AJAX... Wśród tzw. szarych owieczek JS = AJAX...
No dobrze mogę się zgodzić, ale jednak AJAX się trochę różni. Może źle się wyraziłem.
Czym się różni?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)