Pozycjonowanie i Optymalizacja > [AJAX]Wczytywanie danych po kliknięciu w link

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX]Wczytywanie danych po kliknięciu w link

Pozycjonowanie i Optymalizacja > Projektowanie stron > PHP i MySQL

ExPloiT

20.01.10 - 22:35

mam taki kod:

KOD

<html>
<head>
<title>Ajax dla początkujących</title>
<script language="javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest ();
}else if (window.AtiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData (dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElemetById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function ()
{
if (XMLHttpRequestObject.readyState = = 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Przechwycenie danych z pliku</H1>
<form>
<input type = "button" value ="Załaduj dane"
onclick = "getData('data.txt',
'test')">
</form>
<div id="test">
<p> Przechwycone dane będą tu</p>
</div>
</body>

Mam taki kod i wszystko działa elegancko, tylko jak teraz to przerobić, aby zamiast buttona był link, i po jego kliknięciu wczytało dane? Jak zamiast onclick dam, onmouseover to się zmieni po najechaniu na link. A mi chodzi w wypadku gdy pobiorę dane z bazy i wybiore jeden program, to zamiast tych linków pojawią się dane o programie.

jachu

20.01.10 - 22:41

<input type = "button" value ="Załaduj dane"
onclick = "getData('data.txt',
'test')">

->

<a href="java script: void(0)" onclick = "getData('data.txt','test')" >kliknij</a>

Tak by było na logikę

Mar

20.01.10 - 22:41

KOD

?

Mar.

ExPloiT

20.01.10 - 22:43

Jedno i drugie działa

Dzięki Panowie za pomoc

Mar tego nie sprawdzałem, ale zostawiłem tylko puste pole i pewnie dlatego nie chodziło

To teraz zostało mi jeszcze przekazywanie id z php do ajax, a później ich wyświetlenie

jachu

20.01.10 - 22:48

Podstawa do testowania js-a to firebug ...

document.getElementById(divID);

Nie wiem czy tą literówkę widziałeś.

ExPloiT

20.01.10 - 22:53

Widziałem

Pobieranie danych z bazy i ich wyświetlanie opanowane

Teraz problem polega na tym jak wysyłać dane metodą post? Bo samo zmienienie z GET na POST podobno nic nie daje ;/

jachu

20.01.10 - 23:42

CYTAT

XMLHttpRequestObject.open("POST", "plik.php");

XMLHttpRequestObject.setRequestHeader('Content-Type', 'xxx');

za xxx np 'application/x-www-form-urlencoded'

CYTAT

XMLHttpRequestObject.send(parametry);

parametr1=x&parametr2=y itd

Mion

21.01.10 - 09:44

Zainteresuj się jquery która implementuje obsługę AJAX, oraz zdarzenia

ExPloiT

21.01.10 - 10:32

Ok dziękuje za pomoc

Mion

21.01.10 - 11:10

jquery @AJAX, oraz zdarzenia -> oraz wiele innych ciekawych efektów ...

ExPloiT

21.01.10 - 11:13

Właśnie czytam to: http://webhosting.pl/Kurs.jQuery.Czesc.3.D...ekty.interfejsu

Choć jeszcze nie mogę połapać o co chodzi. Rozumiem, że lepiej jest się nauczyć jquery, niż ajax od podstaw? Szybciej zaczaiłem wczoraj ajax niż jquery teraz

No ale nic od razu.

slawek22

21.01.10 - 13:23

Zainteresuj się mootools. Jquery zamienia funkcje js i sposób pisania kodu, musisz się bawić w "rzutowanie typów" żeby przełączać się między obiektem który obsługuje standardowe metody i metody jquery.

CYTAT

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

CYTAT

MooTools is a compact, modular, Object-Oriented JavaScript framework

MT rozszerza funkcjonalność obiektów zamiast ją zamieniać przez co odpada dużo niepotrzebnego kodu i cały skrypt jest lepiej zaprojektowany (nie musisz się zastanawiać czy dany obiekt ma metody jq czy standardowego DOM, trzymać 2 zmiennych dla jednego obiektu czy bez przerwy bawić się w bezsensowną zamianę typów).

$('.xx:checked').get(0).onclick=; -> DOM
$('.xx:checked').click(...); -> jquery

Dla mnie to po prostu zły design, w mootols masz 1 objekt z wszystkimi metodami DOM i rozszerzoną funkcjonalnością MT.
$$('.xx:checked');

pc3t

21.01.10 - 13:31

Jak już rzucamy kursami, to polecam:
http://ferrante.pl/page/3/?s=jquery

k3rn3l

21.01.10 - 21:40

a ja dla odmiany polecam prototype

Mion

21.01.10 - 22:12

I ponad 100KB zbędnych danych do załadowania

slawek22

22.01.10 - 19:42

CYTAT

I ponad 100KB zbędnych danych do załadowania

Załadujesz raz, po kompresji gzip ma ok 30kb a wszystkie pisane skrypty są o wiele mniejsze. Akurat wszystkie 3 (jq,pt,mt) się świetnie nadają na produkcję.

Możesz nawet załadować z lokalizacji hostowanej przez google (większe prawdopodobieństwo, że będzie już w cache).

optymalizator

23.01.10 - 22:26

CYTAT(slawek22 @ 22.01.10 - 19:42)

Możesz nawet załadować z lokalizacji hostowanej przez google (większe prawdopodobieństwo, że będzie już w cache).

Nie polecam, bo oni bez żadnego ostrzeżenia blokują strony z bardzo dużym ruchem.
Jak wstawiłem jQuery z ajax.googleapis.com na forum warezowe z ruchem 80k unikalnych użytkowników dziennie, to po kilku dniach zablokowali HTTP_REFERER.

Kukis

23.01.10 - 22:30

Może zbanowali Cię nie ze względu na ruch tylko ze względu na tematykę?

Mion

25.01.10 - 13:37

CYTAT(optymalizator @ 23.01.10 - 22:26)

Nie polecam, bo oni bez żadnego ostrzeżenia blokują strony z bardzo dużym ruchem.

PHP manual korzysta z plików jquery hostowanych przez gooogle

KOD

Mion

28.01.10 - 12:10

CYTAT(slawek22 @ 21.01.10 - 13:23)

Jquery zamienia funkcje js i sposób pisania kodu, musisz się bawić w "rzutowanie typów" żeby przełączać się między obiektem który obsługuje standardowe metody i metody jquery. Dla mnie to po prostu zły design,

Wracając do tematu jak widać te "niedogodności" o których piszesz nie przeszkadzają wielkim świata netu jak http://digg.com/, http://technorati.com/, http://www.nbc.com/ etc...

wojcio

11.02.10 - 23:15

Witam! Mam pytanie czy robił ktoś wczytanie danych nie z pliku tylko z bazy? Chodzi mi dokladnie o cos takiego iz mam galerie zdjec i chciałbym zrobic opcje modyfikacji a mianowicie z paska rozwijanego wybrac konkretna galerie a do pol wczytała sie nazwa galeri i jej opis nastepnie zmienic to co chcemy i zrobic update. Robił moze ktos cos takiego? Ja osobiscie nie mialem wogole stycznosci z ajaxem

Mion

11.02.10 - 23:24

@Ja osobiscie nie mialem wogole stycznosci z ajaxem
To widać po twoim bezsensownym pytaniu

AJAX służy do obsługi żądań GET i POST ... http://pl.wikipedia.org/wiki/AJAX cała logikę należy oprogramować w skrypcie który jest adresatem takowego żądania.

ExPloiT

12.02.10 - 11:54

CYTAT

Witam! Mam pytanie czy robił ktoś wczytanie danych nie z pliku tylko z bazy?

Ja robiłem i to jest bardzo proste

W necie jest multum przykładów

Mion

12.02.10 - 12:06

ExPloiT - wprowadzasz w błąd, bo nie ma fizycznej możliwości bezpośredniego "wczytania" danych z bazy przy użyciu technologi AJAX

wojcio

12.02.10 - 12:15

Mion - jeśli dla Ciebie jest to bezsensowne pytanie to trzeba było wogole na nie nie odpowiadac!

Mion

12.02.10 - 12:33

Wtedy być nie został byś poinformowany, że zadałeś bezsensowne pytane

mela

12.02.10 - 12:46

wojcio, dostałeś odpowiedź od Miona - Ajax obsłuży żądanie GET do pliku PHP który pobierze i odpowiednio sformatuje dane z MySQL, po czym możesz je wstrzyknąć gdzieś w treść strony. W Google, można znaleźć bardzo dużo kursów/opisów/instrukcji używania technologi Ajax.

http://pl.wikipedia.org/wiki/AJAX#Biblioteki_AJAX

Możesz również użyć jednej z bibliotek ułatwiających korzystanie z Ajax, choć z całą pewnością szukanie w Google, kombinowanie i myślenie, Cię w ten sposób nie ominie.

Mion

12.02.10 - 13:44

Dokładnie o to chodzi

AJAX wykonuje żądanie HTTP metodą GET, lub POSTt do skryptu np php którego zadaniem jest przetworzenie tego żądania i jeśli zachodzi taka potrzeba wygenerowanie danych jako zwykły tekst, kod html które można od razu wstawić do warstwy [coś ala iframe], lub skrypt możne zwrócić dane w formie XML, JONSON które następne są przetwarzane przez javascript do określonej prezentacji.

Format JONSON często wykorzystuje się do tworzenia drzewiastego menu którego gałęzie wczytywane AJAX & jonson.

Tak czy inaczej nie ma możliwości bezpośredniego połączenia z bazą danych, wykonania instrukcji SQL i odebrania rekordów w technologi AJAX.

ExPloiT

12.02.10 - 14:14

CYTAT(Mion @ 12.02.10 - 12:06)

ExPloiT - wprowadzasz w błąd, bo nie ma fizycznej możliwości bezpośredniego "wczytania" danych z bazy przy użyciu technologi AJAX

Wybacz, źle się wyraziłem. Chodziło mi o to, że piszemy sobie skrypt w php który pobierze nam dane z bazy MySQL, i np po kliknięciu w link ajax wczyta nam kod wynikowy z pliku php na stronę.

ExPloiT

16.02.10 - 11:29

Sorki za post pod postem, ale nie chciałem zakładać nowego tematu. Mam problem, dlaczego kod z 1 postu mi nie działa? Wcześniej działał, a teraz już lipa.

Mion

16.02.10 - 12:25

A skąd mamy wiedzieć dlaczego przestał nie znając historii zmian w danym pliku

ExPloiT

16.02.10 - 12:59

Nic się Mion nie zmieniło, stworzyłem nowy plik wkleiłem ten kod który wcześniej działał, ten z 1 posta i nic. Zero reakcji

Mion

16.02.10 - 13:30

Chyba się zgodzisz ExPloiT, że nie ma takiej możliwości, że działało i nic nie robiłeś i już nie działa. Chyba, że wolisz odpowiedz w stylu "zablokowali ci AJAX na hostingu"

ExPloiT

16.02.10 - 14:07

Poważnie Ci mówię

Zobacz sobie kod z pierwszego postu, a ten:

KOD

<html>
<head>
<title>Test Ajax</title>
<script language="javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest ();
}else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData (dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function ()
{
if (XMLHttpRequestObject.readyState = = 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Przechwytywanie danych z Ajax</H1>
<input type="button" onclick = "getData('data.txt', 'test')" value="Display Message">
<div id="test">
<p>Pobrany tekst</p>
</div>
</body>
</html>

Tutaj jest wrzucony: http://link-evolution.pl/ajax/ kod pliku jest taki jak wkleiłem, zresztą sam możesz zobaczyć źródło

W pliku data.txt jest:

CYTAT

test asd asdas das das d

mela

16.02.10 - 14:18

Odpal firefox`a wraz z wtyczką "FireBug".

ExPloiT

16.02.10 - 14:30

Już działa, tutaj:

CYTAT

po getData() dostawiłem ; wywaliło mi, że niema takiej funkcji, to w tej linijce

KOD

function getData (dataSource, divID)

usunąłem odstęp pomiędzy getData a resztą i działa normalnie ;/

Mion

16.02.10 - 14:44

Po co nadal męczysz ten XMLHttpRequestObject , a nie korzystasz z biblioteki jak jquery, mootols itd

ExPloiT

16.02.10 - 14:49

Bo jquery to zaczaić za chiny nie mogę

Mion

17.02.10 - 20:21

Zastosowanie AJAX z jquery jest tak proste, że .... Tak z ciekawości zapytam z czym masz ten problem, bo w sieci jest masa pomocy zresztą na samej witrynie jquery mamy przyklady.

ExPloiT

22.02.10 - 16:24

Chodzi o to, że dla mnie kod w jquery jest jakiś pokręcony i wygląda ciut skomplikowanie.

Mion

22.02.10 - 16:53

Wiec pytam się w jakim miejscu ten kod jest "pokręcony i wygląda ciut skomplikowanie."

ExPloiT

22.02.10 - 17:02

Zobacz, kod w jquery:

KOD

<html>
<head>
<title>Witaj, świecie</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
alert('Witaj, świecie!'); } );
});
</script>
</head>
<body>
<button>Kliknij</button>
</body>
</html>

A prościejsze jego wykonanie:

KOD

<html>
<head>
<title>Witaj, świecie</title>
<script type="text/javascript">
function test()
{
alert("Był sobie alert!");
}
</script>
</head>
<body>
<button onclick="test();">Kliknij</button>
</body>
</html>

Logiczne, że ten drugi jest łatwiejszy do realizacji

ale być może nie rozumiem ideologii jquery

Mion

22.02.10 - 17:48

Mowa o jquery i obsłudze żądań ajaxa, a nie funkcji alert do której faktycznie nie potrzeba całej biblioteki ajax .

ExPloiT

22.02.10 - 18:19

Muszę przyznać, że nie wiem co widziałem trudnego w jquery, a już tym bardziej skomplikowanego ;/ Najgorzej jak człowiek, zamiast poczytać podstawy, bierze się na gorsze rzeczy. W jQuery wyczarowałem taki kod na podmianę treści, gdzie w ajax jest więcej pisania.

KOD

Mion

22.02.10 - 19:33

Kolego Ty nadal NIE ROZUMIESZ na czym polega technologia AJAX!
Podany wyżej kod ma tyle samo wspólnego z AJAX co zamek od drzwi z zamkiem rycerzy

EOT

slawek22

22.02.10 - 19:47

@Mion:

CYTAT

AJAX służy do obsługi żądań GET i POST ... http://pl.wikipedia.org/wiki/AJAX cała logikę należy oprogramować w skrypcie który jest adresatem takowego żądania.

Możesz wczytywać dane "bezpośrednio z bazy" więc to nie było takie głupie pytanie. MS SQL ma XML Views (na przykład)

CYTAT

Wracając do tematu jak widać te "niedogodności" o których piszesz nie przeszkadzają wielkim świata netu jak http://digg.com/, http://technorati.com/, http://www.nbc.com/ etc...

Prosta odpowiedź - silne community promujące kiepski produkt

IE też ma >50% rynku przeglądarek, co nie znaczy, że to dobry browser

Poza tym jest prostsze do nauki, to pewnie też się liczy.

Tak jak zrobił Exploit to nie AJAX... ale tak lepiej. Obciążanie serwera REQ AJAXa po to, żeby pobrać 100 bajtów danych to największa głupota jaką można zrobić. Jeśli masz <50kb danych to lepiej to zrobić właśnie tak a dane skompresować gzipem.

ExPloiT

22.02.10 - 20:11

Mion wiem, że to co podałem nawet koło ajax nie stało. To był prosty przykład zmiany danych, bez przeładowywania, wiem ,że w jquery są takie metody obsługi zdarzeń ajax, jak: ajaxStart(), ajaxStop(), ajaxSend() aż taki głupi nie jestem.

Mion

22.02.10 - 20:23

@Możesz wczytywać dane "bezpośrednio z bazy" więc to nie było takie głupie pytanie. MS SQL ma XML Views (na przykład)
Rozumiem, że za pomocą technologi AJAX wykonasz też nawiązanie połączenia z bazą, a autoryzację usera bazy itd, a samo zapytanie SQL wyślesz POST;

@Prosta odpowiedź - silne community promujące kiepski produkt smile.gif IE też ma >50% rynku przeglądarek, co nie znaczy, że to dobry browser smile.gif Poza tym jest prostsze do nauki, to pewnie też się liczy.
Bardzo kiepska odpowiedz zwłaszcza jej druga cześć tycząca "Poza tym jest prostsze do nauki" chyba, ze w/w serwisy obsługują "programiści" z łapanki na zlecenie przez net.

slawek22

23.02.10 - 10:24

Niestety nie testowałem, wiem że teoretycznie dostęp do widoku XML po HTTP jest np. w MS SQL możliwy (i nie zawsze dla odczytu trzeba stosować autoryzację).

CYTAT

chyba, ze w/w serwisy obsługują "programiści" z łapanki na zlecenie przez net.

To, że ktoś tworzy coś w prostszej technologii nie znaczy, że jest z ZPN. Jeśli chodzi o to, czy ktoś DOBRZE zna prostą czy bardziej skomplikowaną technologię to nie ma różnicy. Zarówno w JQ jak i MT możesz napisać dokładnie to samo, tylko że w MT (kiedy już się nauczysz) zrobisz to szybciej a kod będzie łatwiejszy do rozbudowy.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.