Jump to content

Basic AJAX not working

Drezard

By Drezard
in Javascript Help

 Share

Recommended Posts

Drezard Advanced Member

Drezard

Posted
Posted

My basic ajax example.

 

It fails on this line here:

httpObject.open("GET", "test.php?keyword="
                                +document.getElementById('keyword').value, true);

 

Except I'm not sure why.

 

Heres the whole code:

<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(){
                httpObject = getHTTPObject();
                if (httpObject != null){
                        httpObject.open("GET", "test.php?keyword="
                                +document.getElementById('keyword').value, true);
                        alert("sent null?");
                        httpObject.onreadystatechange = setOutput;
                }
        }

        function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork();" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>

 

Any help?

Link to comment
Share on other sites
Drezard Advanced Member

Drezard

Posted
  • Author
Posted

It fails on that line. So basically. It loads AJAX. It runs the javascript code (if I put alerts in) up to that line and then does nothing past that line.

 

It doesn't output anything to screen either.

 

It doesn't throw the "sent null?" alert.

Link to comment
Share on other sites
kenrbnsn Regular Member

kenrbnsn

Posted
Posted

Which browser are you using. If you're not using Firefox, use it and get the firebug add-on. It's wonderful for debugging AJAX problems.

 

If you want to make you're life much easier when doing AJAX, I recommend that you learn how to use one of the JS Libraries like jQuery.

 

Ken

Link to comment
Share on other sites
AE117 Member

AE117

Posted
Posted

Here you go I will give you the code first and then explain what I did


<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(value){
                httpObject = getHTTPObject();

                if (httpObject != null){

                        httpObject.open("GET", "test.php?keyword="+value, true);
					alert ("working");
                        httpObject.onreadystatechange = setOutput;

						document.getElementById("output").innerHTML = value;

                }
        }

      function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork(this.value);" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>

 

I think what you where going for was to change the bottom area to the text being typed. You dont actaully need to send out a request to a page. So i told the function doWork when called to get this.vale. Which means the element that it is on. If you wanted another element you could call it using the getElementby and so on.

 

The function doWork(value) value is now set to the this.value so it is now like a var

 

there is no real reason to open and document but i left that there just for kicks. As you can see it show working the it gets the document but the id output and changes the innerHtml to the Value which is called in the doWork(value)

 

the rest of the code is useless let me know if this is what you where looking for or if you need more help

 

 

 

 

 

Link to comment
Share on other sites
Drezard Advanced Member

Drezard

Posted
  • Author
Posted

Here you go I will give you the code first and then explain what I did


<html>

<head>

<script type="text/javascript">
        function getHTTPObject(){
                if (window.ActiveXObject)
                        return new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                        return new XMLHttpRequest();
                else {
                        alert("Your browser does not support AJAX.");
                        return null;
                }
        }

        function doWork(value){
                httpObject = getHTTPObject();

                if (httpObject != null){

                        httpObject.open("GET", "test.php?keyword="+value, true);
					alert ("working");
                        httpObject.onreadystatechange = setOutput;

						document.getElementById("output").innerHTML = value;

                }
        }

      function setOutput(){
                if (httpObject.readyState == 4){
                        alert("Ready state does equal 4");
                        document.getElementById('output').innerHTML
                                = httpObject.responseText;
                }
        }
</script>

</head>

<body>
<form name="keywordform">
Search: <input type='text' name='keyword' onkeyup="doWork(this.value);" id ="1" />
</form>
<div id='output'>blank</div>
</body>

</html>

 

I think what you where going for was to change the bottom area to the text being typed. You dont actaully need to send out a request to a page. So i told the function doWork when called to get this.vale. Which means the element that it is on. If you wanted another element you could call it using the getElementby and so on.

 

The function doWork(value) value is now set to the this.value so it is now like a var

 

there is no real reason to open and document but i left that there just for kicks. As you can see it show working the it gets the document but the id output and changes the innerHtml to the Value which is called in the doWork(value)

 

the rest of the code is useless let me know if this is what you where looking for or if you need more help

 

 

 

 

 

 

Thanks heaps for the help.

 

I kind of get whats going on here... Need a bit more reading of basic AJAX maybe.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.