Greetings everyone,
I just started learning how to use AJAX in my javascript and I need help doing something. One of my friends gave me a server that I can issue requests to so I can practice this to learn how to do it for my own website. It is very simple but I am having trouble getting the initial myRequest.open to work. The server given to me is a .com address and all I can find are .php. So, the website is like this; The user enters data in the form to the left of the page inside of a div. I want the variables sent using an ajax GET request to the server then I will receive the request in JSON format back into my HTML to use in the div on the right side of the page. My code is pretty short and I know it might seem simple but I have been on this for 3 days trying to figure it out. If anyone could point out my problem I would really appreciate it. I can not give out the address publicly but I can assure you that it is a .com address. What code should I use to send the information?
Thanks a lot!
<html>
<head>
<style type="text/css">
#header {
text-align: left;
}
#wrapper {
margin:bottom;
width:100%;
}
#wrapper2 {
margin:bottom;
width:100%;
}
#wrapper3 {
margin:bottom;
width:100%;
}
#sub-left {
float:left;
width:225px;
height:215px;
border:1px solid black;
position: relative;
text-align: left;
}
#sub-right {
padding-left: 52px;
float:left;
width:60%;
height:45%;
border:1px solid black;
position: relative;
text-align: left;
}
#sub-leftmost {
float:left;
width:10%;
height:100%;
position: relative;
text-align: left;
}
</style>
<script type="text/javascript">
function myFunction()
{
callAjax(); // call open
}
function getHMLHTTPRequest(){
var req = false;
try{
req = new XMLHttpRequest();
}
catch(err1){
try{
req = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(err2){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3){
req = false;
}
}
}
return req;
}
var myRequest = getXMLHTTPRequest(); // PROBLEM
function callAjax(){
var name = document.getElementById("namebox").innerHTML;
var email = document.getElementById("ebox").innerHTML;
var address = document.getElementById("addbox").innerHTML;
var phone = document.getElementById("phnbox").innerHTML;
myRequest.open("GET", "serverside.com?name=" + name, true); // .com
myRequest.onreadystatechange = responseAjax;
// send the request
myRequest.send(null);
responseAjax(); // not sure if this should come yet
}
function responseAjax(){
if(myRequest.readyState == 4){
if(myRequest.status == 200){
alert("Response!");
document.getElementById("sub-right").innerHTML = myRequest.responseText;
}else{
alert("Error has occurred" + myRequest.responseText);
}
}
}
</script>
</head>
<body>
<div id="wrapper"><div id="sub-leftmost"></div></div>
<div id="wrapper2">
<div id="header"><h1>Testing</h1></div>
<div id="sub-left">
<form name = 'testForm'>
<FONT COLOR="CC3300",font size="5"> <b>User Info</b></FONT><br />
Full Name: <br /><center><input type="text" size="25" id = "namebox" /></center>
Email Address: <br /><center><input type="text" size="25" id = "ebox" /></center>
Address: <br /><center><input type="text" size="25" id = "addbox" /></center>
Phone Number: <br /><center><input type="text" size="25" id = "phnbox" />
<button type="button" onclick="myFunction()">Submit</button>
</form>
</div>
</div>
<div id="wrapper3"><div id="sub-right">
</div></div>
</body>
</html>