CodingForums.com - AJAX code confusion

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - AJAX code confusion (http://www.codingforums.com/showthread.php?t=267655)

AJAX code confusion

Hello everyone,
I bought a book and began learning how to use AJAX and my friend gave me a practice assignment where I have to enter values into one div and perform an AJAX get request to a website she gave me to receive the information in the right div. Maybe I am doing the AJAX get request incorrectly following this book. If anyone could point me in the right direction I would appreciate it. This is not for school, and I have no experience in web scripting languages but willing to learn! Just give my javascript a look and maybe you can help me out. I am not sure yet on how to display the information after it has been received but I know for sure I do not want to load another page when hitting the submit button!

Also, I have a weird way of lining up my code from programming in C++ for about 4 years now. I have developed it over time and sorry if it is hard to understand. If so, then I can format it a proper way and re-post. Also, I am trying to learn how to use the AJAX GET method, not the POST method. And I want to return the information in JSON.

Code:

<html>



        <head>

                

                <style type="text/css">

                        #header {

                                text-align: left;

                        }

                        #wrapper {

                                                                

                                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: 66px;

                                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>



        </head>

                

        <body>



        <div id="wrapper">

                        

                                <div id="sub-leftmost">

                                

                                                                

                                </div>

                                                                </div>





                <div id="wrapper">

                        <div id="header"><h1>Quiz</h1></div>

                                <div id="sub-left">

                                                                <form name = 'testForm'>

                                                                <FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>

                                                                <br />



                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id = "namebox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />

                                                                <a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>

                                                                </form>

                                                                

                                </div>

                                </div>

                                                                <div id="wrapper">

                                <div id="sub-right">

                                                                

                                                                

                                                                <script type=”text/javascript”>

                // function create GetXmlHttpObject

                function GetXmlHttpObject(){

                if (window.XMLHttpRequest){

                // code for IE7+, Firefox, Chrome, Opera, Safari

                return new XMLHttpRequest();

                }

                if (window.ActiveXObject){

                // code for IE6, IE5

                return new ActiveXObject(“Microsoft.XMLHTTP”);

                }

                return null;

                }

                                

                function submitFormWithAjax(){

                var myAjaxGetrequest = new GetXmlHttpObject();



                var t2lName=document.testForm.namebox.value;

                var t2lEmail=document.testForm.ebox.value;

                var t2lAddress=document.testForm.addbox.value;

                var t2lPhone=document.testForm.phnbox.value;



                var parameters=”name=”+t2lName+”&email=”+t2lEmail+”&address=”+t2lAddress+”&phone=”+t2lPhone;



                myAjaxGetrequest.open(“GET”, “website to send and receive from”, true);

                myAjaxGetrequest.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

                myAjaxGetrequest.send(parameters);

                myAjaxGetrequest.onreadystatechange=function(){

                if (myAjaxGetrequest.readyState==4){

                if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){

                document.getElementById("result").innerHTML=myAjaxGetrequest.responseText

                document.getElementById(“testForm”).style.display = “none”;

                }

                else    {

                document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;

                }

                }

                }

                }        

            

                

                

                </script>

                                                                

                                                                

                </div>

        </div>

                        

                

        </body>

                

                </html>

The biggest problem there is that you appear to be using a word processor to write your code, and so you are *NOT* getting ordinary " characters.

Look at the difference:
Yours: “POST”
Correct: "POST"

Yours: ”name=”
Correct: "name="

JavaScript will *NOT* accept those word processing quote marks!

NEVER use a word processor for writing code! Use an editor designed for coding.

*******

And then you are mixing up GET and POST.

First of all, you need to escape the values of all the parameters, no matter if you are using GET or POST:

Code:

var parameters = "name=" + encodeURIComponent(t2lName) 

               + "&email=" +encodeURIComponent(t2lEmail)

               + "&address=" + encodeURIComponent(t2lAddress)

               + "&phone=" +encodeURIComponent(t2lPhone);

And then do EITHER of these:

Code:

myAjaxGetrequest.open("POST", “http://xxx.zzz.com/page.zzz", true);

myAjaxGetrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

myAjaxGetrequest.send(parameters);

Code:

myAjaxGetrequest.open("GET", "http://xxx.zzz.com/page.zzz?" + parameters, true);

// do not set encoding

myAjaxGetrequest.send( );

regarding confusion

I changed up my code till it was like yours. I am not sure why it posted like it did, but I use notepad++ in html format for editing. If this is incorrect please let me know. I think that when I posted it, it changed how things look, because my quotation marks are the same as yours. I do not want my submit button to open a new page, I want it to synchronously update the div on the right side to display the information. Thanks for the help that you provided me with though, I am closer now than before. I posted my updated code on pastebin.com at the below link (it looks as you described it should, yet it still doesn't look like it should but it is readable);

On pastebin: http://pastebin.com/2WNrJJaM

And, the same code here;

Code:

<html>



        <head>

                

                <style type="text/css">

                        #header {

                                text-align: left;

                        }

                        #wrapper {

                                                                

                                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 create GetXmlHttpObject

                function GetXmlHttpObject(){

                if (window.XMLHttpRequest){

                // code for IE7+, Firefox, Chrome, Opera, Safari

                return new XMLHttpRequest();

                }

                if (window.ActiveXObject){

                // code for IE6, IE5

                return new ActiveXObject(“Microsoft.XMLHTTP”);

                }

                return null;

                }

                                

                function submitFormWithAjax(){

                var myAjaxGetrequest = new GetXmlHttpObject();



                var t2lName=document.testForm.namebox.value;

                var t2lEmail=document.testForm.ebox.value;

                var t2lAddress=document.testForm.addbox.value;

                var t2lPhone=document.testForm.phnbox.value;



                var parameters = "name=" + encodeURIComponent(t2lName) 

               + "&email=" +encodeURIComponent(t2lEmail)

               + "&address=" + encodeURIComponent(t2lAddress)

               + "&phone=" +encodeURIComponent(t2lPhone);

                           

                myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, true);

                myAjaxGetrequest.send( );

                

                if (myAjaxGetrequest.readyState==4){

                if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){

                document.getElementById("result").innerHTML=myAjaxGetrequest.responseText

                document.getElementById(“testForm”).style.display = “none”;

                }

                else    {

                document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;

                }

                }

                }

                }        

            

                

                

        </script>

        </head>

                

        <body>



        <div id="wrapper">

                        

        <div id="sub-leftmost">

                                

                                                                

        </div>

        </div>





        <div id="wrapper">

        <div id="header"><h1>Quiz</h1></div>

        <div id="sub-left">

        <form name = 'testForm'>

        <FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>

        <br />



        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id =         "namebox" /></center>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />

        <a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>

        </form>

                                                                

        </div>

        </div>

        <div id="wrapper">

        <div id="sub-right">

                                                                

        </div>

        </div>

                        

                

        </body>

                

        </html>

? So does it or does it now work now?

But wait a minute!

Code:

if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){

where the heck did you get *THAT* from ???

That makes no sense. *ANY* location.href will contain "http" unless you are using "file://" for use on your own machine, only.

On top of that, your code isn't waiting for the AJAX response!

You wrote that you wanted "to synchronously update the div". Did you mean that? You really want SYNCHRONOUS instead of the normal ASYNCHRONOUS?

If so, you need to use false as the last argument to the open() and then you do NOT need to check readystate or status.

Make up your mind.

Either:

Code:

// SYNCHRONOUS request

myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, false);

myAjaxGetrequest.send( );

document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;

document.getElementById(“testForm”).style.display = “none”;

Code:

// ASYNCHRONOUS request

myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, true);

myAjaxGetrequest.onreadystatechange = 

    function() {

        if (myAjaxGetrequest.readyState==4 && myAjaxGetrequest.status==200)

        {

            document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;

            document.getElementById(“testForm”).style.display = “none”;

        }

    };

try {

    myAjaxGetrequest.send( );

} catch ( e ) {

    document.getElementById(“testForm”).innerHTML = 

        ”An error has occured making the request: ” + e.toString();

}

I dunno where you "learned" that AJAX code from, but it's a book then I'd seriously consider using it for lighting fires, instead.

NOTE: You could use the try/catch for errors with the synchronous code, as well. And/or you could check for a status other than 200, but that's seldom needed.

regarding confusion

When I click my submit button, it just takes me to a page that says "File not found". I do not understand why it would do this. I want to click the submit button and it issue the request with the information and display the information in the div on the right. I changed the code to what you had there (synchronous). Maybe I am doing the entire code wrong. Something weird is going on, any ideas on what I should do? Thanks for the help so far.

Code:

<html>



        <head>

                

                <style type="text/css">

                        #header {

                                text-align: left;

                        }

                        #wrapper {

                                                                

                                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 create GetXmlHttpObject

                function GetXmlHttpObject(){

                if (window.XMLHttpRequest){

                // code for IE7+, Firefox, Chrome, Opera, Safari

                return new XMLHttpRequest();

                }

                if (window.ActiveXObject){

                // code for IE6, IE5

                return new ActiveXObject(“Microsoft.XMLHTTP”);

                }

                return null;

                }

                                

                function submitFormWithAjax(){

                var myAjaxGetrequest = new GetXmlHttpObject();



                var t2lName=document.testForm.namebox.value;

                var t2lEmail=document.testForm.ebox.value;

                var t2lAddress=document.testForm.addbox.value;

                var t2lPhone=document.testForm.phnbox.value;



                var parameters = "name=" + encodeURIComponent(t2lName) 

               + "&email=" +encodeURIComponent(t2lEmail)

               + "&address=" + encodeURIComponent(t2lAddress)

               + "&phone=" +encodeURIComponent(t2lPhone);

                           

                myAjaxGetrequest.open("GET", "thewebsite.com" + parameters, false);

                myAjaxGetrequest.send( );

                document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;

                document.getElementById(“testForm”).style.display = “none”;

                

                

                //cbuxquiz.heroku.com?

                

                

                }

                }        

            

                

                

                </script>

        </head>

                

        <body>



        <div id="wrapper">

                        

                                <div id="sub-leftmost">

                                

                                                                

                                </div>

                                                                </div>





                <div id="wrapper">

                        <div id="header"><h1>Quiz</h1></div>

                                <div id="sub-left">

                                                                <form name = 'testForm'>

                                                                <FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>

                                                                <br />



                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id = "namebox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>

                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />

                                                                <a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>

                                                                </form>

                                                                

                                </div>

                                </div>

                                                                <div id="wrapper">

                                <div id="sub-right">

                                                                

                </div>

        </div>

                        

                

        </body>

                

                </html>

You still have not
fixed all the quote
marks and you have
one too many }
also you are trying
to access form elements
by name but they only
have id's

The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site. What do you mean by name and id? I am new to this. Should it be name instead of id? Where is the } that should not exist?

Quote:

Originally Posted by mrmodest (Post 1250608)

The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site.

Only a few are wrong....
<script type=”text/javascript”>
return new ActiveXObject(“Microsoft.XMLHTTP”);
document.getElementById(“testForm”).style.display = “none”;
<a href=”#” onclick=”submitFormWithAjax();”>

Quote:

Originally Posted by mrmodest (Post 1250608)

What do you mean by name and id? I am new to this. Should it be name instead of id?

yes ...
form elements usually need names.
this uses the form element name ...
document.testForm.ebox.value

Quote:

Originally Posted by mrmodest (Post 1250608)

Where is the } that should not exist?

Code:

<script type=”text/javascript”>

    // function create GetXmlHttpObject

    function GetXmlHttpObject(){

        if (window.XMLHttpRequest){

            // code for IE7+, Firefox, Chrome, Opera, Safari

            return new XMLHttpRequest();

        }

        if (window.ActiveXObject){

            // code for IE6, IE5

             return new ActiveXObject(“Microsoft.XMLHTTP”);

        }

        return null;

    }

                                

function submitFormWithAjax(){

    var myAjaxGetrequest = new GetXmlHttpObject();

    var t2lName=document.testForm.namebox.value;

    var t2lEmail=document.testForm.ebox.value;

    var t2lAddress=document.testForm.addbox.value;

    var t2lPhone=document.testForm.phnbox.value;

    var parameters = "name=" + encodeURIComponent(t2lName) + "&email=" +encodeURIComponent(t2lEmail) + "&address=" + encodeURIComponent(t2lAddress)+ "&phone=" +encodeURIComponent(t2lPhone);

    myAjaxGetrequest.open("GET", "thewebsite.com" + parameters, false);

    myAjaxGetrequest.send( );

    document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;

    document.getElementById(“testForm”).style.display = “none”;

    //cbuxquiz.heroku.com?

}

}

</script>

also here you are using id to access the
element but the form tag has a name ...
document.getElementById(“testForm”).style.display = “none”;

The OP indicated that he "use(s) notepad++ in html format for editing". Shouldn't he be editing in code format?