SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX get request not working

    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!

    Code:
    <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. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Code:
    myRequest.open("GET", "serverside.com/scriptname.php?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. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    Code:
    myRequest.open("GET", "serverside.com/scriptname.php?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).
    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?

    Code:
                    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);
    		}
    		}
    		}


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •