[+] Ajax podajcie prosty przykład

Shakez - 02-07-2009 14:12
Witam, szukam ciągle kursów przez Google i ciągle coś nie działa. Ajax jest nadal dla mnie czarną magią.
Może poda mi ktoś prosty przykład skryptu ajaxa tak żebym to w końcu zatrybił.
Te kursy tak są napisane że nic z nich nie rozumiem a mnie jest potrzebny przykład tak na chłopski rozum.
W przyszłości chciałbym wykorzystać ajax do wymiany części strony bez przeładowania strony.

bagsiur - 02-07-2009 16:44
Ja chętnie pomogę :) Przykład działania takiego skryptu:
<html>
<head>
<title>ajax</title>
<script type="text/javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest){
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function dane(){
if(XMLHttpRequestObject){
var p=document.getElementById("aaa");
XMLHttpRequestObject.open("GET", "skrypt.php");
XMLHttpRequestObject.onreadystatechange = function(){
if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status ==200){
p.innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<h1>ajax jest fajny</h1>
<input type="submit" value="kliknij" onclick="dane()" />
<div id="aaa">to sie zmieni jak klikniesz</div>

</body>
</html> Skrypt wygląda brzydko, no ale jest dość przejrzysty. Nie będę za bardzo go tłumaczył (bo chyba stworzenie obiektu w zależności od przeglądarki, i wczytanie wyniku wykonania jakiegoś skryptu tego nie wymaga). Pozdrawiam :)

genobis - 02-07-2009 16:44
Przede wszystkim trudno mówić o jakimkolwiek sensownym kursie AJAX. Sprawa jest tak naprawdę bardzo prosta (nie w sensie łatwości, chociaż to nie jest najgorsza rzecz pod słońcem, ale po prostu nie jest to jakoś strasznie rozbudowana technika).

Przede wszystkim - nie warto pisać tego typu kodu z ręki. Jest nieelegancki, ponieważ siłą rzeczy trzeba odwoływać się do różnych przeglądarek i dość kłopotliwy (jeśli w przypadku JS można mówić o działaniu niskopoziomowym, to tak właśnie jest ;) ). Jedyne, czym dysponujesz, gdy chcesz przetworzyć lub wykorzystać zdobyte dane, to DOM z zestawem standardowych metod. Rozwiązanie wszechstronne i potężne, ale znowu - niewygodne.

Dlatego polecam raczej gotowe biblioteki JavaScript. Są to np. dojo, jquery, mootols, prototype, scriptaculous i całe mnóstwo innych. Z wymienionych korzystałem z dojo i jquery. Dojo sobie nie chwalę, bo w moim odczuciu jest marnie udokumentowane, a jego API zmienia się jak chorągiewka na wietrze i ciężko znaleźć dobre i działające przykłady. Dla odmiany jquery bardzo sobie chwalę i bardzo, bardzo mocno polecam.

Tu jest wprowadzenie od podstaw:
http://docs.jquery.com/How_jQuery_Works

A tu już konkrety - AJAX (dokumentacja + przykłady):
http://docs.jquery.com/Ajax/jQuery.ajax

edit:
bagsiur mnie uprzedził, ale bardzo dobrze, od razu poparł dowodem moją tezę, że ten kod jest paskudny i niewygodny w jakiejkolwiek obsłudze :P

bagsiur - 02-07-2009 16:55

Przede wszystkim trudno mówić o jakimkolwiek sensownym kursie AJAX Dokładnie. W zasadzie ajax to nic innego jak kod javascript, który wczytuje wynik działania skryptu php (najczęściej), więc czego tu się uczyć.

Shakez - 02-07-2009 20:28
Wiecie co - ja mam chyba innego kompa :-) bo u mnie nie działa :-/
bagsiur, dzięki za skrypt ale to nijak nie działa choć w całości żywcem wklejone.
Sprawdzałem na localhoście i na www.ofertka.pl/ajax.html
Co jest nie tak ?

bagsiur - 02-07-2009 20:30
XMLHttpRequestObject.open("GET", "skrypt.php"); A masz w tym samym folderze "skrypt.php"? Odpaliłem to u siebie na lokalnej maszynie i wszystko jest ok :)

Shakez - 02-07-2009 20:35
O kurde działa dzięki :mrgreen: