[AJAX]Kod nie działa

kt1117 · 28 Sierpnia 2011

<html>
    <body>
        <div #tresc></div>
        <script type="text/javascript">

            dane();
            
            function getXMLHttpRequest()
            {
                  var request = false;
    
                  try {
                        request = new XMLHttpRequest();
                    }
                catch(err1) {
                            try {
                                  request = new ActiveXObject('Msxml2.XMLHTTP');
                                } 
                        catch(err2) {
                                      try {
                                        request = new ActiveXObject('Microsoft.XMLHTTP');                
                                          } 
                                catch(err3) {
                                            request = false;
                                              }
                                        }
                                  }
                          return request;
            }  
            
              

            function dane()
            {
            var r;
            r = getXMLHttpRequest();


            r.open('GET', 'Oczko.xml', true);
            r.send(null);

            var x1 = r.responseXML;
            var x2 = x1.getElementsByTagName('gra');
            var x3 = x2[0];
            var x4 = x3.childNodes;
            var x6 = x5.nodeValue;
            var x7 = x2[1];
            var x8 = x7.childNodes;
            var x9 = x8.nodeValue;

            var el=document.getElementById('tresc');
            el.innerHTML='<strong>'+ x9 +':</strong>';
                        }
        </script>    
    </body>
</html>

Oto mój kod. Napisałem go sam więc mogą być błędy. Chciałbym wiedzieć jakie, czyli dlaczego nie działa. Oczywiście mam plik Oczko.xml w tym samym folderze co ten plik.

Sernat · 29 Sierpnia 2011

Błąd jest taki, że próbujesz od razu odczytać dane z pliku XML.

Tworzysz funkcję:

function handler() {
       if  ( r.readyState == 4 && r.status == 200 ) {
            var x1 = r.responseXML;
            var x2 = x1.getElementsByTagName('gra');
            var x3 = x2[0];
            var x4 = x3.childNodes;
            var x6 = x5.nodeValue;
            var x7 = x2[1];
            var x8 = x7.childNodes;
            var x9 = x8.nodeValue;

            var el=document.getElementById('tresc');
            el.innerHTML='<strong>'+ x9 +':</strong>';
       }
}

A do poprzedniego kodu dodajesz jeszcze gdzieś w miejscu odczytu:

r.onreadystatechange = handler;

Kolejną patologią jest wywołanie funkcji, po czym dopiero jej zadeklarowanie.

Oczywiście kod, który podałem, koliduje z faktem, iż, z niewiadomych mi przyczyn, r nie jest zmienną globalną, lecz osadzoną w przestrzeni funkcji.

Makary155 · 29 Sierpnia 2011

Polecam naukę jQuery. Z początku bałem się tego brać bo jakaś nowa składnia, ale gnysek mnie namówił i nie żałuję. Dzięki temu kod ajaxa można skrócić do jednej linijki

$('#idelementu').load('whatever.xml');

Zainteresuj się, warto.

kt1117 · 29 Sierpnia 2011

<html>
    <body>
        <div #tresc></div>
        <script type="text/javascript">
            
            function getXMLHttpRequest()
            {
                  var request = false;
    
                  try {
                        request = new XMLHttpRequest();
                    }
                catch(err1) {
                            try {
                                  request = new ActiveXObject('Msxml2.XMLHTTP');
                                } 
                        catch(err2) {
                                      try {
                                        request = new ActiveXObject('Microsoft.XMLHTTP');                
                                          } 
                                catch(err3) {
                                            request = false;
                                              }
                                        }
                                  }
                          return request;
            }  
            r = getXMLHttpRequest();
            
            r.open('GET', 'Oczko.xml', true);
            r.onreadystatechange = handler();
                    r.send(null);

              

            function handler() 
                {

                       if  ( r.readyState == 4 && r.status == 200 )
                   {
                            var x1 = r.responseXML;
                            var x2 = x1.getElementsByTagName('gra');
                            var x3 = x2[0];
                            var x4 = x3.childNodes;
                            var x6 = x5.nodeValue;
                            var x7 = x2[1];
                            var x8 = x7.childNodes;
                            var x9 = x8.nodeValue;

                            var el=document.getElementById('tresc');
                            el.innerHTML='<strong>'+ x9 +':</strong>';
                          }
                }
        </script>    
    </body>
</html>

Teraz kod wygląda tak, jednak dalej nie działa.

gnysek · 29 Sierpnia 2011

Debuguj. Firebug czy coś innego.

Sernat · 29 Sierpnia 2011

Teraz kod wygląda tak, jednak dalej nie działa.

r.onreadystatechange = handler();

i

r.onreadystatechange = handler;

Widzisz różnicę?

Pierwsze to wywołanie funkcji handler() i przypisanie zwracanej wartości (chociaż ta funkcja tak naprawdę nic nie zwraca) do r.onreadystatechange. Drugie to callback. Nie poprawiaj mojego kodu, gdyby był błędny, pewnie bym zauważył ;) .

kt1117 · 29 Sierpnia 2011

Tak też nie działa, po prostu myślałem, że to literówka.

Sernat · 29 Sierpnia 2011

W takim razie śmiem oskarżać cię o zły odczyt pliku xml ;) .

Edit:

var x1 = r.responseXML;

zamień na:

var x1 = r.responseXML.documentElement;

W dodatku przypisanie r.onreadystatechange na wszelkie wypadek niechaj będzie przed r.open() i r.send().

A w ogóle to:

            var x1 = r.responseXML;
            var x2 = x1.getElementsByTagName('gra');
            var x3 = x2[0];
            var x4 = x3.childNodes;
            var x6 = x5.nodeValue;
            var x7 = x2[1];
            var x8 = x7.childNodes;
            var x9 = x8.nodeValue;

jest śmiechem na sali. Co to jest x5? Powinno to wyglądać tak:

x1 = r.responseXML.documentElement.getElementsByTagName( 'gra' );
x2 = x1.firstChild.nodeValue;
(...)

kt1117 · 29 Sierpnia 2011

To było w kursie. Dodałem tylko 3 ostatnie linijki. Może dam plik Oczko.xml?

<?xml version="1.0" encoding="iso-8859-1"?>
<gra>
    <nazwa>Oczko</nazwa>
    <gracze>2</gracze>
</gra>

Sernat · 29 Sierpnia 2011

Średnio mi się widzi analiza krok po kroku kodu z błędami i to w dodatku z tutka. Polecam:

http://www.w3schools.com/ajax/ajax_xmlfile.asp

Ten tutek to chyba pisał ktoś, kto nigdy nie miał kontaktu z Ajaxem.

kt1117 · 29 Sierpnia 2011

Dzięki.

E: To chyba musi być coś z plikiem Oczko.xml, bo z tamtego tutka stworzyłem taki plik:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("gra");
      txt=txt + "<tr>";
      xx=x[0].getElementsByTagName("nazwa");
        {
        try
          {
          txt=txt + xx[0].firstChild.nodeValue;
          }
        catch (er)
          {
          txt=txt + er;
          }
        }
   
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('Oczko.xml')">Sprawdź zawartość płyty </button>
</div>

</body>
</html>

Jak pozbędę się kodu, który odpowiada za pobieranie pliku xml, to działa.

E:To na pewno wina pliku .xml , bo zmienna xmlhttp.status cały czas ma wartość 0, zmienna stateReady ma wartość 4.

gnysek · 30 Sierpnia 2011

Zły XML, to po pierwsze:

<?xml version="1.0" encoding="iso-8859-1"?>
<asdf>
<gra>
    <nazwa>Oczko</nazwa>
    <gracze>2</gracze>
</gra>
</asdf>

Po drugie, lokalnie bez serwera (znaczy pod ścieżką file:///) nie zwraca statusów, zatem sprawdzanie czy jest on równy 200 mija się z celem. Postaw apache, powinno nie być problemu, albo lokalnie zabierz ten jeden warunek.

Po trzecie zły kod w:

txt=txt + "<tr>";

bo nie masz txt zdefiniowane, rzutowanie na stringa zwróci 'Undefined<tr>'

kt1117 · 30 Sierpnia 2011

Teraz mam takie coś, ale dalej nie działa:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {

if (xmlhttp.readyState==4)
    {
    

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("gra");
      txt='';
      xx=x[0].getElementsByTagName("nazwa");
        {
        try
          {
          txt=txt + xx[0].firstChild.nodeValue;
          }
        catch (er)
          {
          txt=txt + er;
          }
        }
   
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('Oczko.xml')">Sprawdź zawartość płyty </button>
</div>

</body>
</html>

gnysek · 30 Sierpnia 2011

Mi działa, z tym XMLem co podałem:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

 xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 /*&& xmlhttp.status==200*/)
{

x=xmlhttp.responseXML.documentElement.getElementsByTagName("gra");
  txt="<tr>";
  xx=x[0].getElementsByTagName("nazwa");
	{
	try
	  {
	  txt=txt + xx[0].firstChild.nodeValue;
	  }
	catch (er)
	  {
	  txt=txt + er;
	  }
	}

document.getElementById('txtCDInfo').innerHTML=txt;
}
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('Oczko.xml')">Sprawdź zawartość płyty </button>
</div>

</body>
</html>

kt1117 · 30 Sierpnia 2011

Albo za mną, albo z moim komputerem jest coś nie tak, bo to mi nie działa. plik.xml mam taki sam, tylko zmieniłem pierwszą linijkę na:

<?xml version="1.0" encoding="utf-8"?>

Bo w notatniku nie ma możliwości zapisania w kodowaniu iso-8859-1.

E:Sprawdziłem i wchodzi do bloku gdzie przypisuje wartość zmiennej x, ale już dalej nie.

kt1117 · 1 Września 2011

Z Ajax'em dałem sobie spokój. Nie umiem tylko obrabiać plików XML, to nie tak źle, może wrócę do tego za jakieś 2 tyg. Teraz na jednej ze stron znalazłem coś takiego, że najeżdzasz na link i pojawiają się pod tym nowe linki. Po sprawdzeniu okazało się, że jest to zrobione na listach. Potem próbowałem też uzyskać taki efekt używając css, jednak nic nie mogę wymyślić. Macie jakieś pomysły?

Sernat · 1 Września 2011

Zależy, czy jest animacja, czy nie. Jeśli jest, to bez Jquery, a przynajmniej czystego JS, się nie obejdzie.

http://www.kurshtml.edu.pl/skrypty/przykla..._rozwijane.html

kt1117 · 1 Września 2011

Bez animacji. Myślę, że to coś z Ajax'em, żeby zmienić styl i typem display: none; , żeby pozbyć się niepotrzebnego menu.

Sernat · 1 Września 2011

Ajax byłby potrzebny tylko wtedy, gdybyś nagłówki menu chciał pobierać z jakiegoś pliku/bazy danych. Ale sensu i funkcjonalności nie ma to żadnej. Uczyłeś się Ajaxa nie wiedząc, co to jest? Brawo :P .

http://www.kurshtml.edu.pl/skrypty/przykla..._rozwijane.html

Arkarius · 1 Września 2011

Przykładzik

jQuery przeważnie ułatwia życie :P

Makary155 · 1 Września 2011

bez JQuery to będzie wyglądało na przykład tak:

function set_display(element, option)
{
      document.getElementById(element).style.display = option;
    
}

teraz:

<a href="blah" onmouseover="set_display('div_z_menu','visible');" onmouseout="set_display('div_z_menu','none');">OMGTROLOLO</a>

Sernat · 1 Września 2011

Możesz przecież do odpowiednich eventów przypisać funkcje. Wplątywanie skryptów JS w HTML jest złym nawykiem.

kt1117 · 1 Września 2011

@Arkadius

Dzięki, o to mi chodziło. teraz wystarczy nauczyć się nowego języka.

@Sernat

Z Ajax'em chodziło mi o to, że ma pola: innerHTML i style, którym mógłbym spróbować załatwić sprawę, tylko nie wiedziałem jak się za to zabrać.

Sernat · 1 Września 2011

AJAX nie ma z właściwościami elementów innnerHTML i style nic wspólnego :) .

kt1117 · 1 Września 2011

Mam taki kod:

html

<html>
    <head>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript"
            src="jQuery.js"></script>
        <link rel="stylesheet" href="sklep.css" type="text/css" />
    </head>
    <body>
        <ul class="main-menu">
                <li><a href="">Oferta</a>
                    <ul id="jo"class="sub-menu">
                            <li><a href="">Srały muchy</a></li>
                            <li><a href="">Byndzie wiosna</a></li>
                    </ul>
                </li>
                 <li><a href="">Nie oferta</a>
                    <ul id="yy" class="sub-menu">
                            <li><a href="">muchy nie srały</a></li>
                            <li><a href="">I wiosny ni ma</a></li> 
                    </ul>
                </li>     
        </ul> 
    </bodY>
</html>

css

#jo a
{
    background-color: green;
    text-decoration:none;
}
a
{
    background-color: blue;
    text-decoration:none;
}
#yy a
{
    background-color: red;
    text-decoration:none;
}
ul
{
display: inline;
padding: 0; 
margin: 0
list-style-type: none;
}
li
{
display: inline;
}
li li
{
display: block;
}

js

$(document).ready(function(){
    $(".main-menu > li").hover(function(){
        $(this).children("ul").show();
    },function(){
        $(this).children("ul").hide(); 
    });
});

Dziwne jest to, że jeśli postawie myszkę nad pierwszym linku, to ten drugi nadrzędny przesuwa się na dół. Co zrobić, żeby tak nie było?

Kofel · 2 Września 2011

Zamień show/hide na fadeIn/fadeOut

gnysek · 2 Września 2011

Gdybyś wiedział, co dana funkcja robi, to byś nie pytał. Show/hide ukrywa element - zatem tak jakby go nie było (fadeIn/Out powinno zmieniać alphę do 0, zatem stanie się przeźroczysty a nie ukryty).

Btw. ja nie wiem dla czego niektórzy mówią "uczę się ajaxa". Równie dobrze można by się uczyć "arraya" czy "foreacha". Sam Ajax jest tylko technologią, ale to nadal JavaScript, zatem trzeba się uczyć tego drugiego aby móc korzystać z pierwszego :)

Sernat · 2 Września 2011

To technologii nie można się uczyć :P ?

kt1117 · 2 Września 2011

Nie działa, ale zrobię sobię z boku.

gnysek · 2 Września 2011

To technologii nie można się uczyć :P ?

Można, ale XMLHttpRequest jest raptem obiektem JSu i to JSa wypadało by się najpierw nauczyć, żeby wiedzieć co to obiekt :P

BTW. polecam https://developer.mozilla.org/pl/ajax

[AJAX]Kod nie działa

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników