Forum PHP.pl > [ajax] Elementarne podstawy

masif

19.01.2008, 19:43:19

Nie chciałbym aby ten dział stał się czyjąś zmorą ale zaczynam z Ajaxem i mam pytania na których odpowiedzi nie mogę odnaleźć w książkach. Przynajmniej na razie. Dlatego w tym temacie będę pytał o rzeczy podstawowe.

Otóż mam skrypt który wywołuje instancję XMLHTTPRequest, instancja ładuję się poprawnie

Kod

i potem:

Kod

<a href="" onclick="makeRequest('test.html')">Przeczytaj plik</a>

Funckcja ta pobiera mi plik z serwera i wyświetla jego zawartość po przez ALERT
(ta linijka kodu: alert(http_request.responseText);)

A ja bym chciał żeby mi wyświetlał tekst w postaci normalnego tekstu na stronie.
Napisałem więc taką modyfikację funkcji:

Kod

    function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.write(http_request.responseText);
            } else {
                alert('Wystąpił problem z zapytaniem.');
            }
        }

    }

Też działa tylko że tekst mi znika w sekundzie.
Chciałbym żeby po kliknięciu w

Kod

<a href="" onclick="makeRequest('test.html')">Przeczytaj plik</a>

Tekst z pliku test.html był trwale wyświetlany na stronie.

Uff nie wiem czy za bardzo nie namieszałem ale może ktoś wie o co mi chodzi i zna odpowiedź na moje pytanie jak to zrobić?

maskelyn

19.01.2008, 21:33:11

Kod

document.getElementById("divId").innerHTML = http_request.responseText;

masif

19.01.2008, 21:46:05

Dzięki maskelyn
Troche pokombinowałem w inny sposób i mi wyszło.

Po załadowaniu pliku test.html wyświetla się całkowita zawartość tego pliku prawda?
Myślałem że zawartość pliku test.html jest wczytywana do dokumentu index.html z którego nastąpiło wywołanie.
No chyba że ja coś zmonciłem.

Da się tak zrobić aby konkretnym miejscu wyświetlała się zawartość pliku test.html?

maskelyn

19.01.2008, 22:24:31

[HTML] pobierz, plaintext 
<div id="divId"></div>
[HTML] pobierz, plaintext

Zawartość pliku test.html powinna wypełnić tego div'a.

masif

19.01.2008, 22:31:34

Mi się dziwnie nie ładuje w ten <div> tylko otwiera mi nową stronę.
Oto mój kod:

Kod

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<TITLE>AJAX</TITLE>

<script type="text/javascript" language="javascript">

    var http_request = false;

    function makeRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // Przeczytaj o tym wierszu poniżej
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);

    }

  function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.write(http_request.responseText);
            } else {
                alert('Wystąpił problem z zapytaniem.');
            }
        }

    }

    document.getElementById("box").innerHTML = http_request.responseText;

</script>

</HEAD>
<BODY>

<a href="" onclick="makeRequest('test.html')">Przeczytaj plik</a>

<div id="box" style="background:#eee; width:200px; height:100px; margin:10px;"></div>

</BODY>
</HTML>

Może to: document.getElementById("box").innerHTML = http_request.responseText;
wstawiam w złym miejscu?

Jest gdzieś błąd?

Anatejms

24.01.2008, 23:21:24

Cytat(masif @ 19.01.2008, 22:31:34 )

Mi się dziwnie nie ładuje w ten <div> tylko otwiera mi nową stronę.
Oto mój kod:

Kod

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<TITLE>AJAX</TITLE>

<script type="text/javascript" language="javascript">

     var http_request = false;

     function makeRequest(url) {

         http_request = false;

         if (window.XMLHttpRequest) { // Mozilla, Safari,...
             http_request = new XMLHttpRequest();
             if (http_request.overrideMimeType) {
                 http_request.overrideMimeType('text/xml');
                 // Przeczytaj o tym wierszu poniżej
             }
         } else if (window.ActiveXObject) { // IE
             try {
                 http_request = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                 try {
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch (e) {}
             }
         }

         if (!http_request) {
             alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
             return false;
         }
         http_request.onreadystatechange = function() { alertContents(http_request); };
         http_request.open('GET', url, true);
         http_request.send(null);

     }

   function alertContents(http_request) {

         if (http_request.readyState == 4) {
             if (http_request.status == 200) {
                   document.getElementById("box").innerHTML = http_request.responseText;
// teraz jest dobrze :)
             } else {
                 alert('Wystąpił problem z zapytaniem.');
             }
         }

     }

</script>

</HEAD>
<BODY>

<a href="" onclick="makeRequest('test.html')">Przeczytaj plik</a>

<div id="box" style="background:#eee; width:200px; height:100px; margin:10px;"></div>

</BODY>
</HTML>

Może to: document.getElementById("box").innerHTML = http_request.responseText;
wstawiam w złym miejscu?

Jest gdzieś błąd?

poprawiłem kod