Help: XMLHTTP [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Help: XMLHTTP

raghavan20

08-01-2005, 07:44 AM

I was trying to run an example which involves XMLHTTP but for some reason it doesnt work. Do help me find the problem with the code

//trial.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ZIP Code to City and State using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
var url = "getCityState.php?param="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
// Split the comma delimited response into an array
results = http.responseText.split(",");
document.getElementById('city').value = results[0];
document.getElementById('state').value = results[1];
}
}
function updateCityState() {
var zipValue = document.getElementById("zip").value;
http.open("GET", url + escape(zipValue), true);
http.onreadystatechange = handleHttpResponse();
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
<form action="post">
<p>
ZIP code:
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
</p>
City:
<input type="text" name="city" id="city" />
State:
<input type="text" size="2" name="state" id="state" />
</form>
</body>
</html>

<?php
//getCityState.php
echo "Stoke-on-trent, Staffordshire";
?>

Can any of you explain me the function getHTTPObject()?
I understand that they are trying to create 'Msxml2.XMLHTTP', if not possible they are trying to create 'Microsoft.XMLHTTP'. What's the meaning of next few lines? what is the meaning of @ symbol before if, else and end keywords.

You can see the script in action at:
http://raghavan20.allhyper.com/trial.html
http://raghavan20.allhyper.com/getCityState.php

RysChwith

08-01-2005, 08:33 AM

The first thing to point out is that the script they're providing is only going to work in Internet Explorer. If you're using a different browser to try this, it'll fail. I'm not certain if anything is wrong beyond that, but these articles might be able to help:

http://jibbering.com/2002/4/httprequest.html
http://developer.apple.com/internet/webcontent/xmlhttpreq.html

Rys

raghavan20

08-01-2005, 08:59 AM

I dont find the script I posted runs on IE

http://raghavan20.allhyper.com/trial.html
http://raghavan20.allhyper.com/getCityState.php

RysChwith

08-01-2005, 01:24 PM

I didn't say that it did, necessarily (or didn't intend to say). I was simply pointing out that it could only possibly work in IE, as it's using Microsoft proprietary objects (Msxml2.XMLHTTP and Microsoft.XMLHTTP). Do you know at which point the script is failing?

Rys

raghavan20

08-01-2005, 03:47 PM

I have altered the code with few alerts at places necessary to find error. I find that the control passes to function getCityState fn but the if condition 'http.readyState' returns false. If you comment the if condition then there is no output received from the php file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ZIP Code to City and State using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
var url = "getCityState.php?param="; // The server-side script
function handleHttpResponse() {
alert('inside handleHttpResponse fn');
if (http.readyState == 4) {

// Split the comma delimited response into an array
alert('http is ready to receive output from php doc');
results = http.responseText;
alert ("received output:" + http.responseText);
results = results.split(",");
document.getElementById('city').value = results[0];
document.getElementById('state').value = results[1];
}
}
function updateCityState() {
alert('inside updateCityState fn');
var zipValue = document.getElementById("zip").value;
http.open("GET", url + escape(zipValue), true);
http.onreadystatechange = handleHttpResponse();
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
<form action="post">
<p>
ZIP code:
<input type="text" size="50" name="zip" id="zip" onblur="updateCityState();" />
</p>
City:
<input type="text" name="city" id="city" size = '50'/>
State:
<input type="text" size="50" name="state" id="state" />
</form>
</body>
</html>

RysChwith

08-01-2005, 04:23 PM

Do you mean the updateCityState() function, or the getHTTPObject() function? I'm assuming the former. A couple things could've happened. First, it's possible that the object didn't get initialized correctly. http.readyState should always return a number (0 to 4, I think). If it doesn't, then the object hasn't been initialized correctly.

Another possibility is that the file is too large. You're using the GET method, so the file can't be larger than about 500 to 700 bytes. You can use larger files if you're using POST, although some servers won't allow that. Try it with a smaller file; if it starts working, then you know this is your problem.

Rys

raghavan20

08-01-2005, 06:24 PM

I am using the same php doc I hv shown in my first thread. As you can see that its returns just a line of output which GET should cope with.

For some reason, as you say the object doesnot initialize properly i think, the 'http readystate' is 1 not 4. why is that?

RysChwith

08-02-2005, 08:34 AM

If it's getting 1 as the readyState, then it initialized properly. 1 indicates "loading," which is to say that it's still trying to pull in data. Did you read through the articles I linked in my first post? Both of them have code snippets that can help you track down the issue. There's very little I can actually do on my end.

Rys

raghavan20

08-02-2005, 09:20 AM

I found out earlier that '1' was for 'loading' but can you figure out why its not moving to the next stages upto four.

I went through your links but havenot tried those examples yet, I will use them and let you know.

Anyway, thanks for your concern

Do you know any good tutorial or a site for XML axes other than w3schools?

Cheers

raghavan20

08-02-2005, 10:18 AM

I have now changed the code at few places.

I found the following errors in the codes posted earlier:
1. There was no send, so the state was 1 all the time
2. When sent, it returned undefined in state textbox
3. The 'url' variable was outside the functions which should be inside updateCityState() function. Are variables declared outside functions are global to be accessed inside functions?

Now, I have corrected a few of them but the state is now '3' and returns a different html page which belongs to hosting company.

Can you figure out why?

<script language="javascript" type="text/javascript">

function handleHttpResponse(http) {
alert('inside handleHttpResponse fn');
alert('http ready state:' + http.readyState);
if (http.readyState == 4) {
// Split the comma delimited response into an array
alert('http is ready to receive output from php doc');
results = http.responseText;
alert ("received output:" + results);
results = results.split(",");
document.getElementById('city').value = results[0];
document.getElementById('state').value = results[1];
}
}

function updateCityState() {
alert('inside updateCityState fn');
var url = "getCityState.php?param="; // The server-side script
var http = getHTTPObject(); // We create the HTTP Object
var zipValue = document.getElementById("zip").value;
http.open("GET", url + escape(zipValue), true);
http.send();
http.onreadystatechange = handleHttpResponse(http);
http.send(null);
}

function getHTTPObject() {
var xmlhttp;
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
xmlhttp = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlhttp = false;
}
}
}

return xmlhttp;
}

</script>

RysChwith

08-02-2005, 01:36 PM

The send was here: "http.send(null);"

Note that you'll want to have the onreadystate function defined before you send. If the state is coming back undefined, then the object isn't initializing properly. Tell you what: I can't do anything with this at work, but let me take a look at it once I get home, and I'll see what I can figure out. It would not be a bad idea to send an email to remind me, as my memory is notoriously poor.

Rys

raghavan20

08-02-2005, 05:28 PM

thanks for your continued support inspite of your work. Did you see another 'http.send' thats just before 'http.onreadystatechange' command line.

If you feel the script is not good enough, you can send me a perfectly working JavaScript code on XMLHttp which gets output from a simple php file. I would be grateful if you can do that for me.