javascript - Using AJAX to send and receive info from a server -
javascript - Using AJAX to send and receive info from a server -
i'm working on page supposed interact server via ajax, experience ajax extremely limited. here's how page supposed work.
when button clicked, if "test" radio button clicked, display pop saying input valid. when button clicked, if "live" radio button clicked, programme supposed send request server using url "http://cs.sfasu.edu/rball/351/exam2.php" contents of input box beingness value "name" parameter. page send json object need parse regular variable.
i'll leave rest of json stuff lone since that's not asked.
so far have design of page done, said don't know i'm doing ajax stuff. have code written it, not sure it's right.
here code:
<html> <head> <title>anner, taylor</title> <style type = "text/css"> canvas { border: 2px solid black; } </style> <script type = "text/javascript"> window.onload = function() { var ttcanvas = document.getelementbyid("mycanvas"); var ttcontext = ttcanvas.getcontext("2d"); ttcontext.strokestyle = "red"; ttcontext.fillstyle = "red"; ttcontext.fillrect(250,50,100,100); ttcontext.stroke(); ttcontext.beginpath(); ttcontext.moveto(600, 0); ttcontext.lineto(0, 200); ttcontext.linewidth = 5; ttcontext.strokestyle = "black"; ttcontext.stroke(); } function validate() { var ttinput = document.getelementbyid("3letters").value; if(ttinput.length < 3 || ttinput.length > 3) { alert("please come in 3 letters"); } var tttest = document.getelementbyid("test"); var ttlive = document.getelementbyid("live"); if(tttest.checked == true) { alert("input valid"); } else if(ttlive.checked == true) { homecoming ajaxstuff(); } } function ajaxstuff() { var ttrequest = new xmlhttprequest(); ttrequest.open("get", "http://cs.sfasu.edu/rball/351/exam2.php?name=ttinput.value", true); ttrequest.send(); var ttresponse = ttrequest.responsetext; ttrequest.onreadystatechange=function() { if(ttrequest.readystate==4 && ttrequest.status==200) { document.getelementbyid("mydiv").innerhtml.ttresponse; } } } </script> </head> <body> <h1>tanner, taylor</h1> <canvas id = "mycanvas" width = "600" height = "200"></canvas> <br> <form> come in 3 letters: <input type="text" id="3letters"> <br> <input type = "radio" id = "test" value = "test">test <input type = "radio" id = "live" value = "live">live <br> <input type = "button" id = "check" value = "send" onclick="validate()"> </form> <div id="mydiv"> </div> </body> </html>
and here link page on our server:
cs.sfasu.edu/cs351121/exam2.html
also, know says exam, review given actual exam that's next week. i'm trying figure out how works don't know i'm doing wrong.
i'm not sure problem is. code correct
ok problem. calling request variable outside scope. declaring request variable within ajaxstuff function accessible in area. thats why undefined. seek this:
function ajaxstuff() { var ttrequest = new xmlhttprequest(); ttrequest.open("get", "http://cs.sfasu.edu/rball/351/exam2.php?name=ttinput.value", true); ttrequest.send(); ttrequest.onreadystatechange=function() { if(ttrequest.readystate==4 && ttrequest.status==200) { document.getelementbyid("mydiv").innerhtml=ttrequest.responsetext; } } }
to result this
ttrequest.send(); var response=ttrequest.responsetext;
javascript html ajax
Comments
Post a Comment