Help(Unsolved): XMLHTTP

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Help(Unsolved): XMLHTTP

Post by raghavan20 »

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

Code: Select all

<!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">


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></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 Code:

Code: Select all

<?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
Last edited by raghavan20 on Wed Aug 10, 2005 2:46 pm, edited 2 times in total.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post by andre_c »

if it couldn't create any of those (maybe because the browser is not ie), it attempts to use the firefox/mozilla/opera/safary way: new XMLHttpRequest()
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

This is the recently modified code and you can see the script in action using the links in the previous thread.
Give the file a run to see the interactive process.
http://raghavan20.allhyper.com/trial.html

Code: Select all

<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>
Post Reply