XMLHTTP Requests

[Bennett 🚀]

Okay, so I need to request a $_GET page using javascript or jquery, jquery preferably.
the page is nightcodes.comlu.com/getcontent.php
nightcodes.comlu.com/getcontent.php?category=admin&type=codes is the only category and type with a listing with it.

Here is what i came up with in javascript:


<script type="text/javascript"><!--
function getContent(){
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
var xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET','http://nightcodes.comlu.com/getcontent.php?category=admin&type=codes',true);
xmlhttp.send();
document.getElementById('results').innerHTML=xmlhttp.responseText;
}
//--></script>


jQuery:

<script type="text/javascript"><!--
function getContent(){
$("#results").load("http://nightcodes.comlu.com/getcontent.php", {category: "admin", type: "codes"});
}
//--></script>


Why won't they work?

[Bob]

It's not working because (with your jQuery) you're passing the parameters to getcontent.php as HTTP POST. The load () method determines which verb to use based on what you're sending. You're sending a JSON object (keyword: object) so jQuery will sent it as POST. If you write it to a GET string it should work as you're intending it to.

$("#results").load ("blah.php", "?category=admin&type=codes");

As for your XMLHttpRequest: Ajax is asynchronous. In fact that's what the A in Ajax stands for. This means that the actual request and response are independent actions. You're treating the application like it's synchronous by expecting the responseText attribute to actually be present immediately after you issue the send () method. In reality what happens is when the response text is actually available Ajax will change the ready state to 4.

As such you need to give your XMLHttpRequest object an onreadystatechange value; a function it will call when its ready state has changed (potentially being your response text).

And while it's not causing your error: there's no need for your IF/ELSE statements if you are just going to declare xmlhttp anyways.

function getContent()
{    
  var xmlhttp = null;
  
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  if (xmlhttp != null)
  {
    xmlhttp.open ('GET','whee.php?category=admin&type=codes', true);
    xmlhttp.send ();
    
    xmlhttp.onreadystatechange = function ()
    {
      if (xmlhttp.readyState == 4)
      {
        document.getElementById ('results').innerHTML = xmlhttp.responseText;
      }
    }
  }
}

[Bennett 🚀]

Thanks, I tried it, and I have a question. Can you use a full url like nightcodes.comlu.com/getcontent.php as the "whee.php?.." ?

[Bob]

Oct 15, 2010 17:13:20 GMT -8 Bennett 🚀 said:

Thanks, I tried it, and I have a question. Can you use a full url like nightcodes.comlu.com/getcontent.php as the "whee.php?.." ?

Yes, just keep in mind the same origin policy. The host, protocol and port in the request must be identical to where the script is being executed from.

[Bennett 🚀]

So I would need to have the http://... because I'm using it on a Proboard? And it doesn't work x.x I've tried both of the ways, and neither are working.

function getContent(category,type){    
 var xmlhttp = null;
 
 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else{// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 if (xmlhttp != null){
   xmlhttp.open ('GET','http://nightcodes.comlu.com/getcontent.php?category='+category+'&type='+type, true);
   xmlhttp.send ();
   
   xmlhttp.onreadystatechange = function ()
   {
     if (xmlhttp.readyState == 4)
     {
       document.getElementById ('results').innerHTML = xmlhttp.responseText;
     }
   }
 }
}

<script type="text/javascript"><!--
function getContent(category,type){
$("#results").load("http://nightcodes.comlu.com/getcontent.php", "?category="+category+"&type="+type);
}
//--></script>

[Bob]

Oct 15, 2010 17:35:51 GMT -8 Bennett 🚀 said:

So I would need to have the http://... because I'm using it on a Proboard? And it doesn't work x.x I've tried both of the ways, and neither are working.

function getContent(category,type){    
 var xmlhttp = null;
 
 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else{// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 if (xmlhttp != null){
   xmlhttp.open ('GET','http://nightcodes.comlu.com/getcontent.php?category='+category+'&type='+type, true);
   xmlhttp.send ();
   
   xmlhttp.onreadystatechange = function ()
   {
     if (xmlhttp.readyState == 4)
     {
       document.getElementById ('results').innerHTML = xmlhttp.responseText;
     }
   }
 }
}

<script type="text/javascript"><!--
function getContent(category,type){
$("#results").load("http://nightcodes.comlu.com/getcontent.php", "?category="+category+"&type="+type);
}
//--></script>

As I said, you need to pay mind to the same origin policy. You're running the script presumably from subdomain.proboards.com which is a different host than nightcodes.comlu.com. That's in invalid request. The protocol and the port are the same but the host is not.

[Bennett 🚀]

How could I make a work around for this?

[Bob]

Oct 15, 2010 17:54:52 GMT -8 Bennett 🚀 said:

How could I make a work around for this?

Your best bet is probably an IFRAME element. But, depending on what it is you're doing, you could probably scratch the necessity for Ajax entirely. Just by feeding the URI parameters in with the src attribute.