πρόβλημα ajax

katerinakipat · 27 Ιανουαρίου 2014

Καλησπέρα

Είδα ένα Site:

και για εξάσκηση προσπάθησα με τον ίδιο ακριβώς τρόπο να βάλω παραπάνω inputs και να μου βγάζουν σε ένα άλλο div τα αντίστοιχα, κάθε φορά μήνυματα και το αντίστοιχο input που έβαλα αλλά τίποτα.
Tο μόνο που κατάφερα ήταν να μου βγάζει undefined και να μην δουλεύει
και το πρώτο input.

Κάποια ιδέα;

παπι · 27 Ιανουαρίου 2014

Πως εβαλες παραπανω inputs στο παραπανω μανα μου; Ποσταρε το τι εχεις κανει, ολο οπως ειναι.

katerinakipat · 28 Ιανουαρίου 2014

<html>
<head>
<meta charset="utf-8">
<script src="test.js"></script>
</head>
	<body onload="process()">

		<div class="wrapper">

			<form id="Stamp-form" >
			
					<input placeholder="Write something" type="text" id="userInput1" >
			
					<input placeholder="Write Something" type="text" id="userInput2">
			
			
 					<div id="underInput1"></div>
 					<div id="underInput2"></div>
 					
			</form>	<!-- form ends  -->		
		</div> 	<!-- wrapper ends  --> 

</body>
</html>

// JavaScript Document

var xmlHttp= createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
   var xmlHttp;
   
   if(window.ActiveXObject){
      try{
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
            xmlHttp =false;
            }
      }else{
         try{
            xmlHttp= new XMLHttpRequest();
            }catch(e){
               xmlHttp =false;
               }
         }
      if(!xmlHttp)
            alert("cant create that object hoss!");
      else
            return xmlHttp;
   }
   
function process(){   
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){

      userInput1=encodeURIComponent(document.getElementById("userInput1").value );
      xmlHttp.open("GET", "test.php?userInput1="+userInput1, true);



       userInput2=encodeURIComponent(document.getElementById("userInput2").value );
       xmlHttp.open("GET", "test.php?userInput2="+userInput2, true);

      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send(null);
      }else{
         setTimeout('process()', 1000);
         }
   }
   
   
function handleServerResponse(){
   if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
               xmlResponse=xmlHttp.responseXML;
               xmlDocumentElement=xmlResponse.documentElement;


               message=xmlDocumentElement.firstChild.data;
               document.getElementById('underInput1').innerHTML= message ;

                 //edw exw ena thema me to firstChild 
               message1=xmlDocumentElement.firstChild.data;
               document.getElementById('underInput2').innerHTML= message1 ;



               setTimeout('process()', 1000);
         }else{
            alert('Something went wrong!');
            }
      }
   }

<?php
header('Content-Type: text/xml');
 echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
   $userInput1=$_GET['userInput1'];
    $userInput2=$_GET['userInput2'];

   
      echo " ". $userInput1;
      echo " ". $userInput2;
    
echo '</response>';
?>

defacer · 28 Ιανουαρίου 2014

Το βασικότερο πρόβλημα που έχεις είναι πως ποτέ δεν καταφέρνεις να στείλεις το request με την τιμή του input1.

Πιθανότατα δεν έχεις υπόψη το πώς ακριβώς γίνεται η εκτέλεση του JS κώδικα. Το βασικότερο είναι πως μόνο ένα πράγμα μπορεί να εκτελείται κάθε στιγμή, ποτέ δύο ταυτόχρονα. Όταν λοιπόν κανονίσεις κάτι να γίνει κάποια στιγμή στο μέλλον, αυτό δεν πρόκειται να συμβεί τουλάχιστον μέχρι να σταματήσει να εκτελείται ο κώδικάς σου. Μπορείς να το δεις εύκολα στην πράξη ως εξής:

// Παρόλο που βάζεις το world να εμφανιστεί πρώτα, αυτό δε θα γίνει παρά μόνο αφότου ο
// κώδικας έχει εκτελεστεί μέχρι το τέλος (και άρα το Hello έχει τυπωθεί)
setTimeout(function() { console.log("world"); }, 0);
console.log("Hello");

Ή επίσης ως εξής:

// Το Hello δε θα εμφανιστεί ποτέ
setTimeout(function() { console.log("Hello"); }, 0);
while(true);

Κάνε τώρα τον παραλληλισμό μ' αυτό εδώ:

userInput1=encodeURIComponent(document.getElementById("userInput1").value );
xmlHttp.open("GET", "test.php?userInput1="+userInput1, true);

userInput2=encodeURIComponent(document.getElementById("userInput2").value );
xmlHttp.open("GET", "test.php?userInput2="+userInput2, true);

Βάζεις ένα XHR να γίνει και πριν αυτό προλάβει να πάρει μπρος, το ακυρώνεις βάζοντας ένα άλλο να γίνει στη θέση του. Γενικά αν θέλεις να κάνεις 2 διαφορετικά requests θα πρέπει να χρησιμοποιήσεις 2 διαφορετικά XHR αντικείμενα.

Υπάρχουν κι άλλα θέματα με τον κώδικα που δίνεις (π.χ. το test.php διαβάζει και τις 2 παραμέτρους αλλά είναι ξεκάθαρο πως ποτέ δε θα υπάρξουν και οι 2 ταυτόχρονα στο ίδιο request) αλλά αυτό είναι το βασικότερο.

PS: Μάθε να χρησιμοποιείς τα developer tools του browser.

Xvipes · 31 Ιανουαρίου 2014

Εγώ να κάνω μια ερώτηση?

Πως εκτελείτε ξανά ο κώδικας την ώρα που γράφουμε κάτι στο input box?

Το <body onload="process()"> σημαίνει ότι θα εκτελέσει τη function process() όταν φορτώσει όλο το document σωστά?

Πως εκτελείτε ξανά τελικά ο κώδικας κάθε φορά που γράφουμε κάτι? Δε θα έπρεπε το <input> να έχει μέσα το onkeyup="process()" ?

παπι · 1 Φεβρουαρίου 2014

το process ουσιαστικα ειναι ενα αναδρομικο λουπ.

Noobie · 1 Φεβρουαρίου 2014

Εγώ να κάνω μια ερώτηση?

Πως εκτελείτε ξανά ο κώδικας την ώρα που γράφουμε κάτι στο input box?

Το <body onload="process()"> σημαίνει ότι θα εκτελέσει τη function process() όταν φορτώσει όλο το document σωστά?

Πως εκτελείτε ξανά τελικά ο κώδικας κάθε φορά που γράφουμε κάτι? Δε θα έπρεπε το <input> να έχει μέσα το onkeyup="process()" ?

Ο κώδικας της συνάρτησης process() εκτελείται ξανά και ξανά επειδή καλείται από την μέθοδο setTimeout, η οποία μας δίνει την δυνατότητα να εκτελέσουμε κάποιο κώδικα μετά από κάποιο συγκεκριμένο χρονικό διάστημα, στην προκειμένη περίπτωση κάθε 1000 milliseconds ή αλλιώς 1 δευτερόλεπτο.

Xvipes · 1 Φεβρουαρίου 2014

Ναι το συνειδητοποίησα μόλις είδα την απάντηση του παπί.

Είναι λίγο λάθος πρακτική αυτή ή μου φαίνεται?καταλαβαίνω ότι απλά είναι ένα tutorial αλλά το να τρέχει συνέχεια δεν είναι λίγο λάθος?

Noobie · 1 Φεβρουαρίου 2014

Ναι το συνειδητοποίησα μόλις είδα την απάντηση του παπί.

Είναι λίγο λάθος πρακτική αυτή ή μου φαίνεται?καταλαβαίνω ότι απλά είναι ένα tutorial αλλά το να τρέχει συνέχεια δεν είναι λίγο λάθος?

Ναι το μειονέκτημα είναι ότι χρησιμοποιεί αρκετούς πόρους.

Το καλύτερο είναι να γίνεται με το πάτημα ενός κουμπιού, αλλιώς είτε με το setTimeout/είτε με κάποιο keyboard event χρησιμοποιεί πόρους που δεν χρειάζεται. Όπως είπες όμως, είναι απλά ένα tutorial!

παπι · 1 Φεβρουαρίου 2014

Το παραπανω ειναι full duplex, εαν το εκανε με καποιο event τοτε θα ηταν half duplex. Αν το καλοσκεφτεις, το full duplex ειναι οτι πρεπει για την παραπανω εφαρμογη.

cyclo · 4 Φεβρουαρίου 2014

Εγώ θα σου πρότεινα να χρησιμοποιήσεις κάποιο lib για να κάνεις την δουλειά σου απλά και γρήγορα.

για παράδειγμα το να κάνεις ένα ajax post σε jquery είναι τόσο απλό όσο οι 4 παρακάτω γραμμές:

var _post = $('#yourform').serialize();
$.post('ajaxfile.php',_post,function(data,success){
   if (successs=='success') { /*your callback here.*/ }
},'json')

φυσικά υπάρχουν και πιο ελαφριές βιβλιοθήκες για χρήση ajax, όπως η redbull (έχει αναφερθεί ξανά στο forum).

Σύνδεση

πρόβλημα ajax

Προτεινόμενες αναρτήσεις

katerinakipat

παπι

katerinakipat

defacer

Xvipes

παπι

Noobie

Xvipes

Noobie

παπι

cyclo

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση