Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]Menu bez przeładowania strony
Forum PHP.pl > Forum > XML, AJAX > AJAX
Zyggmunt
30.05.2009, 17:29:03
Witam. Chciałem zrobić stronę, która po wciśnięciu jakiegoś linka z menu wczyta jakiś dokument bez przeładowania całego dokumentu. Użyłem w tym celu AJAX'a, lecz nie mam pojęciu czemu skrypt, który napisałem nie działa:

[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" dir="ltr">
  3.  <head>
  4.  <title>Moja pierwsza strona w XHTML</title>
  5.  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
  6.  <meta http-equiv="Content-Language" content="pl"/>
  7.  
  8.  <style type="text/css">
  9.  #container 
  10.  {
  11.  width: 804px;
  12.  height: 600px;
  13.  margin: 1em auto;
  14.  border: 1px solid red;
  15.  overflow: hidden;
  16.  }
  17.  #menu
  18.  {
  19.  float: left;
  20.  width: 300px;
  21.  border: 1px solid red;
  22.  height: 600px;
  23.  }
  24.  
  25.  #content
  26.  {
  27.  float: right;
  28.  width: 500px;
  29.  height: 600px;
  30.  border: 1px solid red;
  31.  }
  32.  
  33.  </style>
  34.  
  35.  <script type="text/javascript">
  36.  var r;
  37.  var e;
  38.  
  39.  function onClickFunction(link,id)
  40.  {
  41.  if (r = getXMLHttpRequest()) {
  42.  e = document.getElementById(id);
  43.  r = new HMLHttpRequest();
  44.  r.open('GET',link);
  45.  r.onreadystatechange = odbierzDane;
  46.  r.send(null);
  47.  }
  48.  }
  49.  
  50.  function odbierzDane()
  51.  {
  52.  if(r.readyState == 4){
  53.  if(r.status == 200 || r.status == 304){
  54.  e.innerHTML = r.responseText;
  55.  }
  56.  }
  57.  }
  58.  </script>
  59.  
  60.  </head>
  61.  <body>
  62.  <div id="container">
  63.  
  64.  <div id="menu">
  65.  <ul>
  66.  <li><a onclick="onClickFunction('text.xhtml','content');" href="#">Link1</a></li>
  67.  <li><a onclick="" href="#">Link2</a></li>
  68.  </ul>
  69.  </div>
  70.  
  71.  <div id="content">
  72.  
  73.  </div>
  74.  
  75.  </div>
  76.  </body>
  77.  </html>
[XML] pobierz, plaintext


Dokument, który ma się wczytać to:

[XML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2.  
  3.  <p>Jakis text</p>
[XML] pobierz, plaintext



Proszę o pomoc.
skowron-line
30.05.2009, 17:32:40
Ostatnio dla kogoś z forum napisałem
http://skowronline.pl/j/b.php
zobacz w źródło i sobie skopiuj jak będzie Ci pasować.
Zyggmunt
30.05.2009, 21:42:26
Chodzi mi raczej o to aby się nauczyć po części AJAX'a, dlatego pytam co jest źle w kodzie, który sam napisałem, ponieważ nie mam pojęcia dlaczego to nie działa.

P.s. A może trzeba zaimplementować bibliotekę ajax.js ? Nie wiem już w końcu jak to jest.
luniak
1.06.2009, 12:13:07
Ja osobiście polecam bibliotekę AdvAjax smile.gif

tą samą której użył poprzednik w swoim przykładzie
kamil4u
1.06.2009, 14:39:26
a) po co chcesz tak zrobić? Rozwiązanie to ma same wady - zalet nie widzę...
b ) Jak już chcesz się nauczyć AJAX-a to: http://www.xul.fr/en-xml-ajax.html
c) IMO jak Ajax będzie Ci potrzebny tylko w tym wypadku nie używaj biblioteki smile.gif
skowron-line
1.06.2009, 14:50:27
Wyższość korzystania z bibliotek jest taka że odchodzi Ci testowanie swojego kodu w rożnych przeglądarkach ktoś już zadbało to.
A biblioteka advAJAX jest na tyle lekka że nie obciąży działania aplikacji nie to co jQuery lub inne.
kamil4u
1.06.2009, 14:57:21
Cytat
Wyższość korzystania z bibliotek jest taka że odchodzi Ci testowanie swojego kodu w rożnych przeglądarkach ktoś już zadbało to.
A biblioteka advAJAX jest na tyle lekka że nie obciąży działania aplikacji nie to co jQuery lub inne.
Tak, ale kod jest dłuższy i wolniejszy(wykonywanie operacji, które w wielu przypadkach są niepotrzebne) (oczywiście jak ktoś umie już dobrze programować, dla początkujących to też dobra nauka tongue.gif ) - ale jest dział już na ten temat gdzieś to nie róbmy OT smile.gif ja wyrażam tylko swoją opinię
Zyggmunt
1.06.2009, 16:05:25
Roumiem, ale tak właściwie to co jest źle w tym przykładzie ? Czemu całość nie działa ?
kamil4u
1.06.2009, 16:50:02
Dałem Ci kurs - przeczytaj go smile.gif :
Kod
if (r = getXMLHttpRequest()) {

Nie ma czegoś takiego jak getXMLHttpRequest() - a jak jest to nie w FF - dalej nie sprawdzałem smile.gif
Naucz się debugować:
- powstawiaj alerty i sprawdzaj, który się nie wyświetla (pomiędzy 2 alertami(ostatnim wyświetlonym, a niewyświetlonym) najprawdopodobniej jest błąd)
- korzystaj z konsoli błędów

Aha Twój kod nie będzie działał pod IE - przeczytaj kurs
Zyggmunt
6.06.2009, 19:46:24
Witam. Mam skrypt:

[XML] pobierz, plaintext 
  1. function submitForm(ktora,naw1,naw2)
  2.     { 
  3.         var req = null; 
  4.  
  5.         
  6.         if(window.XMLHttpRequest)
  7.             req = new XMLHttpRequest(); 
  8.         else if (window.ActiveXObject)
  9.             req  = new ActiveXObject(Microsoft.XMLHTTP); 
  10.                 
  11.                 var e,n;
  12.                 
  13.                 n1 = document.getElementById("nawigacja1");
  14.                 n2 = document.getElementById("nawigacja2");
  15.                 
  16.                 if(naw1 == "none")
  17.                 n1.style.display = "none";
  18.                 if(naw1 == "block")
  19.                 n1.style.display = "block";
  20.                 
  21.                 if(naw2 == "none")
  22.                 n2.style.display = "none";
  23.                 if(naw2 == "block")
  24.                 n2.style.display = "block";
  25.                 
  26.                 e = document.getElementById("szablony");
  27.                 e.innerHTML = "<img id='ladowanie' alt='ladowanie' src='pliki/images/loading.gif' />";
  28.         req.onreadystatechange = function()
  29.         { 
  30.             
  31.             if(req.readyState == 4)
  32.             {
  33.                 if(req.status == 200)
  34.                 {
  35.                     e.innerHTML = req.responseText;    
  36.                 }    
  37.                 else    
  38.                 {
  39.                     e.innerHTML="Error I can't get more galery";
  40.                 }    
  41.             } 
  42.         }; 
  43.         req.open("GET", "pliki/"+ktora, true); 
  44.         
  45.         req.send(null); 
  46.     }
[XML] pobierz, plaintext


Wszystko działa poprawnie, lecz po kliknięciu przycisku cała strona przerzucana jest na początek. Co zrobić aby została w miejscu ? Próbowałem sposobu z tablicami i również ten sam efekt. Możliwe jest też ukrywanie warstw, ale niezbyt mi się to podoba, ponieważ cały czas musi się wczytywać cała strona z każdą warstwą.

P.s. poza tym w Validatorze wyskakuje błąd o następującej treści:

document type does not allow element "img" here …ie' src='pliki/images/loading.gif' />";


The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.