Skocz do zawartości

[AJAX]Kod nie działa


kt1117

Rekomendowane odpowiedzi

<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.

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

<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.

Odnośnik do komentarza
Udostępnij na innych stronach

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ł ;) .

Odnośnik do komentarza
Udostępnij na innych stronach

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;
(...)

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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>'

Odnośnik do komentarza
Udostępnij na innych stronach

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>

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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>

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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?

Odnośnik do komentarza
Udostępnij na innych stronach

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>

Odnośnik do komentarza
Udostępnij na innych stronach

@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ć.

Odnośnik do komentarza
Udostępnij na innych stronach

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?

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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 :)

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy
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

Odnośnik do komentarza
Udostępnij na innych stronach

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

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...