AJAX get request not working

JavaScript
1

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>
2 
myRequest.open("GET", "serverside.com[B][COLOR="#FF0000"]/scriptname.php[/COLOR][/B]?name=" + name, true);

The AJAX request has to be sent to a server side script. As an example, I’ve changed the line in your code so it calls a script called scriptname.php. That php script will be executed by the server, and the result will be sent back to the client (=your browser).

3

I actually have it working now without using the .php. I was never given the .php so I do not know what the script on their end does. All I know is that it sends back to me in JSON format. It works right now but it isn’t pretty. Any simple way to make the JSON display a little better on my page? Also when I condense my page down moving my window, the JSON text comes out of my div a bit, any way to fix this?


                myRequest.open("GET", "http://server.com?name=" + name + "&email=" + email + "&address=" + address + "&phone=" + phone, true); // works
		myRequest.onreadystatechange = responseAjax;
		myRequest.send(null);
		responseAjax();
}
		
		
		function responseAjax(){
		if(myRequest.readyState == 4){
		if(myRequest.status == 200){
		
		document.getElementById("sub-right").innerHTML = myRequest.responseText; // puts inside div works
		
		}else{
		alert("Error has occurred" + myRequest.responseText);
		}
		}
		}