javascript - First steps wiht AJAX - can't find mistakes -
i'm doing first steps ajax , php, following book ("ajax & php: building responsive web aplicattions"). tried similar 1 of first exercises on own. first time runned code didn't work. checked out , didn't find mistakes. compared both codes line line, , looked same me. couldn't find difference. problem first code works; divmessage changes content @ same time you're writting in input, doesn't happen code, , can't figure out why, because both codes practically same me.
original code (html):
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="quickstart.js" language="javascript"></script> </head> <body onload='process()'> server wants know name: <input type="text" id="myname"></input> <div id="divmessage"></div> </body> </html> my code (html):
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" type="text/javascript" src="test.js"></script> </head> <body onload='process()'> ingress number: <input type="text" id="number"></input> <div id="textbox"></div> </body> </html> ===================== original code(js):=====================
// stores reference xmlhttp object var xmlhttp = createxmlhttprequest(); // retrieves xmlhttprequest object function createxmlhttprequest(){ // store reference xmlhttp object var xmlhttp; // if running ie if (window.activexobject){ try { xmlhttp = new activexobject("microsoft.xmlhttp"); } catch(e) { xmlhttp = false; } } // if running mozilla or other browsers else { try { xmlhttp = new xmlhttprequest(); } catch(e) { xmlhttp = false; } } // return object created or display error message if(!xmlhttp){ alert("error creating xmlhttprequest object."); } else{ return xmlhttp; } } // make asynchronus http request using xmlhttprequest object function process(){ // proceed if xmlhttprequest object isn't busy if (xmlhttp.readystate == 4 || xmlhttp.readystate == 0){ // retrieves name typed user on form // la función encodeuricomponent() reemplaza todos los caracteres // que no se pueden utilizar de forma directa en las url por su representación hexadecimal. name = encodeuricomponent(document.getelementbyid("myname").value); // execute quickstart.php page server xmlhttp.open("get", "quickstart.php?name=" + name, true); // define method handle server responses // function called automatically when state of request changes xmlhttp.onreadystatechange = handleserverresponse; // make server rqeuest xmlhttp.send(null); } else{ // if connection busy, try again after 1 second settimeout('process()', 1000); } } // executed automatically when message received server function handleserverresponse(){ // move forward if transaction has completed if (xmlhttp.readystate == 4){ // status of 200 indicates transaction has completed if (xmlhttp.status == 200){ // extract xml retrieved server xmlresponse = xmlhttp.responsexml; //obtain document element (the root element) of xml structure xmldocumentelement = xmlresponse.documentelement; // text message, wich in first child // of document element hellomessage = xmldocumentelement.firstchild.data; // update client display using data received server document.getelementbyid("divmessage").innerhtml = hellomessage; // restart sequence settimeout('process()',1000); } // http status different 200 signal error else { alert ("there problem accessing server: " + xmlhttp.statustext); } } } my code (js):
var xmlhttp = createxmlhttprequest(); function createxmlhttprequest(){ 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 ("el objeto xmlhttprequest no pudo ser creado."); } else { return xmlhttp; } } function process(){ if (xmlhttp.readystate == 4 || xmlhttp == 0){ number = encodeuricomponent(document.getelementbyid("number").value); xmlhttp.open("get", "test.php?number=" + number, 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; hellomessage = xmldocumentelement.firstchild.data; document.getelementbyid("textbox").innerhtml = hellomessage; settimeout("process()",1000); } else { alert ("hubo un problema al acceder al servidor: " + xmlhttp.statustext); } } } ===================== original code(php):=====================
<?php // generate xml output header('content-type: text/xml'); // generate xml header echo '<?xml version="1.0" encoding="utf-8" standalone="yes"?>'; // create <response> element echo '<response>'; // retrieve user name $name = $_get['name']; // generate output depending of user name received client $usernames = array('pablo','jose','juan','carlos','yoda'); if (in_array(strtoupper($name), $usernames)) echo 'hello ' . htmlentities($name); else if (trim($name) == '') echo 'stranger, please tell me name.'; else echo htmlentities($name) . ', don\'t know you.'; // close <response> element echo '</response>'; ?> my code (php):
<?php header ('content-type: text/xml'); echo '<?xml version="1.0" encoding="utf-8" standalone="yes"?>'; echo '<response>'; $number = $_get['number'] echo 'el número ingresado es: ' . htmlentities($number); echo '</response>'; ?>
Comments
Post a Comment