Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Funkcja od ajax'a
Forum PHP.pl > Forum > XML, AJAX
Eagle
12.10.2008, 11:38:04
Witam. Dopiero zaczynam swoją przygodę z ajaxem.
Pogrzebałem trochę i znalazłem dość prosty przykład jak załadować kawałek xml'a http://developer.mozilla.org/en/AJAX/Getting_Started

Przerobiłem skrypt podany na stronie i wyszło mi coś takiego
Kod
function loadPage(pageUrl,htmlTag,xmlTag)
{
    if(xmlTag == undefined)
    {
        xmlTag = htmlTag;
    }

    var httpRequest;
    if (window.XMLHttpRequest)
    {
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType)
        {
            httpRequest.overrideMimeType('text/xml');
        }
    }
    else
    {
        if (window.ActiveXObject)
        {
            try
            {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }
    }

    if (!httpRequest)
    {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    
    httpRequest.onreadystatechange = alertContents(httpRequest,htmlTag,xmlTag);
    httpRequest.open('GET', pageUrl, true);    
    httpRequest.send('');
}

function alertContents(httpRequest,htmlTag,xmlTag)
{
    if (httpRequest.readyState == 4)
    {
        if (httpRequest.status == 200)
        {
            var xmldoc = httpRequest.responseXML;
            var root_node = xmldoc.getElementsByTagName(xmlTag).item(0);
            var data = document.getElementById(htmlTag);
            data.innerHTML = root_node.firstChild.data;
        }
        else
        {
            alert('There was a problem with the request.');
        }
    }
}



Plik pole1.xml
[XML] pobierz, plaintext 
  1. <?xml version="1.0" ?>
  2. <pole1>Jakiś tekst ble ble bel</pole1>
[XML] pobierz, plaintext


HTML:
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>Moj pierwszy ajax!</title>
  4. 		<script type="text/javascript" src="jax.js"></script>
  5. 	</head>
  6. 	<body>
  7. 		<a href="" onClick="loadPage('pole1.xml','pole1','pole1')">Cos1</a>
  8. 		<br />
  9. 		<br />
  10. 		<div id="pole1"></div>
  11. 	</body>
  12. </html>
[HTML] pobierz, plaintext


Jednak po kliknięciu na link cała strona się przeładowuje - nie wyświetla danych z pliku xml
wookieb
12.10.2008, 13:37:23
1) Zainstaluje firebuga on ci pokaze wszystkie bledy
2) Nie zaczynaj tak ajaxa. Użyj jquery albo advajax a potem dopiero cwicz sobie "flakowate" oprogramowanie ajaxa.
Eagle
12.10.2008, 15:56:45
1) Mam zainstalowanego - nie zwraca błędów
2) Zaraz poszukam smile.gif


Po takiej drobnej zmianie
Kod
    httpRequest.open('GET', pageUrl, true);    
    httpRequest.send('');
    httpRequest.onreadystatechange = alertContents(httpRequest,htmlTag,xmlTag);

i śledzeniu krok po kroku (na firebugu) strona jest wczytywana prawidłowo.
_VBService_
12.10.2008, 17:20:37
Masz błąd w składni pliku xml. snitch.gif
Zaraz ci napisze sampla rolleyes.gif
Eagle
12.10.2008, 17:36:37
Czekam z niecierpliwością smile.gif

Zauważyłem że po dodaniu 2 alertów na początek funkcji alertContents
Kod
{
    alert('ReadyState: ' + httpRequest.readyState);
    alert('Status: ' + httpRequest.status);
    ...

wszystko chodzi poprawnie.
_VBService_
12.10.2008, 18:53:09
Korzystam w samplu z www.advajax

Folder powinien zawierać pliki:
pole1.xml
Kod
<?xml version="1.0" encoding="utf-8" ?>
<root>
  <pole1>Jakiś tekst ble ble bel</pole1>
</root>


index.htm
Kod
       <html>
       <head>
       <title>Moj pierwszy ajax!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="ajax.action.js"></script>
       <script type="text/javascript" src="advajax.1.1.js"></script>
       <style type="text/css">
       #pole1 {
        border: 1px outset black;
        width: 250px;
        height: 100px;
       }
       </style>
       </head>
       <body>
       <a href="javascript:loadPage('pole1.xml','pole1','pole1')">Ładuj</a>
       <div id="pole1">&nbsp;</div>
       </body>
       </html>

 advajax.1.1.js
Kod
(pobież: http://advajax.anakin.us/advajax.js)

ajax.action.js
Kod
     var _preview = new Objec();
    
     function $(id) { return document.getElementById(id); }
    
     function loadPage(url, htmlTag, xmlTag) {
        _preview = $(htmlTag);
        advAJAX.get({
                         url: url,
           onInitialization : function() { _preview.innerHTML = 'Pobieram dane ...'; _preview.disabled = true; },
                  onSuccess : function(obj) { loadContents(obj.responseXML, xmlTag); },
                    onError : function(obj) { _preview.innerHTML = 'Error: ' + obj.status; },
             onFinalization : function() { _preview.disabled = false; }
        });
     }
    
     function loadContents(xmlDoc, xmlTag) {
        var rootNode = xmlDoc.getElementsByTagName(xmlTag).item(0);
        _preview.innerHTML = rootNode.firstChild.data;
     }

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.