Ajax, Last posts

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Ajax, Last posts

Δημοσίευση από Basilakis » 18 Μαρ 2008 14:08

Χάζευα στο net για την τεχνολογία AJAX η οποία με ακολουθεί τον τελευταίο χρόνο μετά την εργασία μου που έκανα στο πανεπιστήμιο. Μετά από αρκετές ώρες είπα να φτιάξω ένα script. Καλύτερα όμως σε tutorial για να το μοιραστώ και με άλλους.


Αυτό που θα κάνουμε είναι να χρησιμοποιήσουμε ένα απλό XMLHttpRequest για την διαδικασία μας. Επειδή λοιπόν πολύ δεν ίσως δεν γνωρίζετε τι είναι αυτό το XMLHttpRequest ας κάνουμε πρώτα μία αναφορά για αυτό.

Με το XMLHttpRequest μπορούμε να έχουμε live data στην σελίδα μας. Μπορούμε δηλαδή να δείξουμε στους επισκέπτες μας κάτι ζωντανά χωρίς να χρειαστεί να κάνουνε αυτοί refresh. ‘Ένα τέτοιο παράδειγμα είναι στις σελίδες στοιχημάτων αγώνων. Εκεί καθώς βλέπετε την σελίδα γίνετε ένα αυτόματο refresh και το score σε κάποιον αγώνα αλλάζει χωρίς να ξαναφορτώσετε μόνοι σας την σελίδα. Ένα παράδειγμα κώδικα για ένα απλό XMLHttpRequest

Κώδικας: Επιλογή όλων

function createRequestObject() { 

   var req; 

   if(window.XMLHttpRequest){ 
      // Firefox, Safari, Opera... 
      req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
      // Internet Explorer 5+ 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
      // There is an error creating the object, 
      // just as an old browser is being used. 
      alert('Problem creating the XMLHttpRequest object'); 
   } 

   return req; 

} 

// Make the XMLHttpRequest object 
var http = createRequestObject(); 

function sendRequest(act) { 

   // Open PHP script for requests 
   http.open('get', 'myphpscript.php?act='+act); 
   http.onreadystatechange = handleResponse; 
   http.send(null); 

} 

function handleResponse() { 

   if(http.readyState == 4 && http.status == 200){ 

      // Text returned FROM the PHP script 
      var response = http.responseText; 

      if(response) { 
         // UPDATE ajaxTest content 
         document.getElementById("ajaxTest").innerHTML = response; 
      } 

   } 

}
Αυτό είναι λοιπόν το XMLHttpRequest. Απλό, εύκολο και πολύ χρήσιμο. Ας προχωρήσουμε τώρα όμως στο script μας. Θα φτιάξουμε ένα script που θα ενημερώνει τα latest posts μέσα στο forum μας.

Πρώτα φτιάχνουμε το request μας.

Κώδικας: Επιλογή όλων

function createRequestObject() { 
     
        var req; 
     
        if(window.XMLHttpRequest){ 
            // Firefox, Safari, Opera... 
            req = new XMLHttpRequest(); 
        } else if(window.ActiveXObject) { 
            // Internet Explorer 5+ 
            req = new ActiveXObject("Microsoft.XMLHTTP"); 
        } else { 
            // There is an error creating the object, 
            // just as an old browser is being used. 
            alert('There was a problem creating the XMLHttpRequest object'); 
        } 
     
        return req; 
     
    } 
     
    // Make the XMLHttpRequest object 
    var http = createRequestObject();
Μετά πρέπει να φτιάξουμε την sendRequest η οποία στέλνει τα αποτελέσματα στον χρήστη.


Κώδικας: Επιλογή όλων

function sendRequest(act) { 
         
        // Open PHP script for requests 
        http.open('get', 'ajax.php?act='+act); 
        http.onreadystatechange = handleResponse; 
        http.send(null); 
     
    } 
     
    function handleResponse() { 
     
        if(http.readyState == 4 && http.status == 200){ 
     
            // Text returned FROM PHP script 
            var response = http.responseText; 
     
            if(response) { 
                // UPDATE ajaxTest content 
                document.getElementById("countPosts").innerHTML = response; 
                setTimeout(countPosts,20); 
            } 
     
        } 
    }
Tώρα θα φτιάξουμε την php page η οποία καλείτε στο συγκεκριμένο μας παράδειγμα ως ajax.php

Κώδικας: Επιλογή όλων

<?php 
mysql_connect&#40;"localhost", "user", "password"&#41;; 
mysql_select_db&#40;"name"&#41;; 

if &#40;$_GET&#91;'act'&#93; == "countPosts"&#41; &#123; 

    $sql = mysql_query&#40;"SELECT * FROM phpbb_posts_text ORDER BY post_id DESC LIMIT 5"&#41;; 
    while&#40;$count = mysql_fetch_assoc&#40;$sql&#41;&#41; &#123; 

        echo "".$count&#91;'post_id'&#93;." - ".$count&#91;'post_text'&#93;."

"; 

    &#125; 
     
&#125; 
?>
και μέσα στον κώδικα πρέπει να προσθέσουμε μία function η οποία θα καλεί το sendRequest.


Κώδικας: Επιλογή όλων

function countPosts&#40;&#41; &#123; 
        sendRequest&#40;'countPosts'&#41;; 
    &#125;
Από ότι βλέπετε είναι ένα πολύ εύκολο Tutorial. Μπορείτε να το αλάξετε και να το κάνετε για το Blog σας τον news editor σας ή για ότι άλο θέλετε. Η τεχνολογία AJAX θα χρησιμοποιείτε πολύ οπότε και εμείς θα τα λέμε συχνότερα.


Το tutorial αυτό είναι βασισμένα σε tutorial μέσα από το ajaxfreaks.com.

Gia to freestuff.gr
Basilakis

Hik
Δημοσιεύσεις: 162
Εγγραφή: 23 Σεπ 2005 10:34

Ajax, Last posts

Δημοσίευση από Hik » 20 Μαρ 2008 17:16

Ωραίο tutorial, αλλά μια λεπτομέρεια. Δεν χρειάζεται να ξανά ανακαλύπτουμε το τροχό κάθε φορά με το XMLHttpRequest :)

Υπάρχουν έτοιμα javascript frameworks (jquery, prototype) που μας γλυτώνουν από αυτή τη δουλειά.

Στο jquery, που εγώ προσωπικά το θεωρώ κορυφαίο, ένα ajax get request γράφεται πολύ απλά

Κώδικας: Επιλογή όλων

$.get&#40;"fetch-data.php", &#123; name&#58; "John", time&#58; "2pm" &#125;, function&#40;data&#41;&#123;
    alert&#40;"Data Loaded&#58; " + data&#41;;
  &#125;&#41;;
Και σε συνδυασμό με το JSON προσφέρει απίστευτη ευκολία στο να συνεργαστεί η PHP με τη Javascript.

π.χ. πόσο εύκολα μπορεί να μεταφερθεί ένα object.

fetch-terrorists.php

Κώδικας: Επιλογή όλων

$foo = new stdClass&#40;&#41;;

$foo->firstname = 'Ahmed';
$foo->lastname  = 'The dead terrorist';

echo json_encode&#40;$foo&#41;;
ajax.js

Κώδικας: Επιλογή όλων

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

      $.getJSON&#40;"fetch-terrorists.php", function&#40;json&#41;&#123;
            alert&#40; json.firstname + " " + json.lastname + " is a terrorist!"&#41;;
       &#125;&#41;;

&#125;&#41;;

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Ajax, Last posts

Δημοσίευση από Basilakis » 20 Μαρ 2008 19:01

Thx gia to tip. Twra ksekinisa me to Jquery, kai ean kai exasa ligo kairo, eimai pali sta kala mou. God thx Books and Internet :P

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Ajax, Last posts

Δημοσίευση από cherouvim » 20 Μαρ 2008 21:32

jQuery παίδες! Look no further!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης