Jump to content

Ajax With Select


Err
 Share

Recommended Posts

I don't seem to understanding something about Ajax. I get the whole thing about passing variables to the server through JavaScript. What I don't understand is how to use it with the <select> tag and query a database and get the results on the same page. I've read different ways of implementing this, but I don't understand how to do it.I'm trying to use code like this:

function XHConn() {  var xmlhttp, bComplete = false;  try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}  catch (e) {    try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}    catch (ex) {      try {xmlhttp = new XMLHttpRequest();}      catch (exe) {xmlhttp = false;}    }  }  if (!xmlhttp) {return null;}  this.connect = function(sURL, sMethod, sVars) {    if (!xmlhttp) {return false;}    bComplete = false;    sMethod = sMethod.toUpperCase();    try {      if (sMethod == "GET") {        xmlhttp.open(sMethod, sURL+"?"+sVars, true);        sVars = "";      }      else {        xmlhttp.open(sMethod, sURL, true);        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      }      xmlhttp.onreadystatechange = function() {        if (xmlhttp.readyState == 4 && !bComplete) {bComplete = true;}      };      xmlhttp.send(sVars);    }    catch(z) {return false;}    return true;  };  return this;}

An I even using the correct JS code to do this? I'm just looking for a way to understand this. Examples will help out greatly.

Link to comment
Share on other sites

That's not a bad way to do it, although I'm not sure what this is going to be scoped to in the function, I think it might be the window object. So you would be returning the entire window object. It would be better to just return a new object with your connect method on it. I'm also not sure how scoping inside the function is going to work, I'm not sure if it's going to find bComplete or xmlhttp. So I added those as properties on the object you're returning, and then the connect method references them through this. A few other minor things:When the method is get, you should send null. I switched it to set sVars to null instead of the empty string if the method is get.I don't think there's a request header called "Method". You shouldn't need to use that line.The response handler function isn't doing anything except setting bComplete to true, so it's not going to update the page with anything. You might want to send the response handler as another parameter to the connect method.You're catching the exception in the connect method when you send the request but just returning false, so you won't know if the request failed or if an error happened.

function XHConn() {  var xmlhttp, bComplete = false;  try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}  catch (e) {	try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}	catch (ex) {	  try {xmlhttp = new XMLHttpRequest();}	  catch (exe) {xmlhttp = false;}	}  }    if (!xmlhttp) {return null;}  return ({	xmlhttp: xmlhttp,	bComplete: false,	connect: function(sURL, sMethod, sVars) {	  if (!this.xmlhttp) {return false;}	  this.bComplete = false;	  sMethod = sMethod.toUpperCase();	  try {		if (sMethod == "GET") {		  this.xmlhttp.open(sMethod, sURL+"?"+sVars, true);		  sVars = null;		}		else {		  this.xmlhttp.open(sMethod, sURL, true);		  this.xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");		  this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");		}		this.xmlhttp.onreadystatechange = function() {		  if (this.xmlhttp.readyState == 4 && !this.bComplete) {this.bComplete = true;}		};		this.xmlhttp.send(sVars);	  }	  catch(z) {return false;}	  return true;	}  });}

Edited by justsomeguy
Link to comment
Share on other sites

Thanks for the reply! I appreciate you looking over the code. But my question still remains, how can I get JS to query depending on the <option> value? Method POST / GET?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...