AJAX

michellez · 27 Jan 2009 at 10:13

Played with the tutorials @ http://www.w3schools.com/Ajax/ to get my head rounds the basics. Trying to slightly amend the basic examples here so it happens when a button is pressed instead.

It's a simple form with 1 text box where you enter a domain. When you hit submit it should throw out the whois result returned by whois.php.

It works in IE7, but not Firefox though. I've put the alerts in to help debug, and it does come up saying "Your browser is Opera, Firefox, or Safari". The output is then blank though.

whois.js:

Code:

//Browser Support Code
function showWhois(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
		alert("Your browser is Opera, Firefox, or Safari");
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			alert("Your browser is IE1");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				alert("Your browser is IE2");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('whoisResult');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var idomain = document.getElementById('domainInput').value;
	var queryString = "?domain=" + idomain + "&sid="+Math.random();
	ajaxRequest.open("GET", "whois.php" + queryString, true);
	ajaxRequest.send(null); 
}

Thanks,
Shell

michellez · 27 Jan 2009 at 10:18

Now I'm confused. Realised in IE7 it comes up with "Your browser is Opera, Firefox, or Safari" o_O

Am I doing something silly?

Thanks,
Shell

Augmented · 27 Jan 2009 at 10:29

IE7 has support for the standard XMLHttpRequest object. IE6 and below do not. That line of code should be:

Code:

 alert("Your browser is Opera, Firefox, Safari or IE7");

sist_si · 27 Jan 2009 at 10:35

use one of the frameworks out there such as prototype.js or jQuery. they'll make your life loads easier

michellez · 27 Jan 2009 at 10:41

Suspected that Augmented after actually thinking it through properly

Sist_si: hm, yeh. Been googling some more and people keep saying that!

suarve · 27 Jan 2009 at 10:41

sist_si said:
use one of the frameworks out there such as prototype.js or jQuery. they'll make your life loads easier

Agreed, have just been looking at JQuery ajax yesterday.

It really rerally easy to get say an ajax form going, you can also use some of the sexy animation stuff in Jquery when you results pane loads.

I found this tutorial quite good an easy to follow.

sist_si · 27 Jan 2009 at 10:46

i hear lots more people talking about jQuery but I actually use prototype 99% of the time. It's just the one I got into first although I'm not sure if one is better than the other?
I can vouch for it anyway. It's helped me do some lovely stuff. You can pair it up with scriptaculous as well to do some rather nice visuals.

suarve · 27 Jan 2009 at 10:49

Yer, the only thing that worries me about JQuery is the occassional stuff i read about the support for the document.ready function.

cjmUK · 27 Jan 2009 at 11:24

There are dozens of mature frameworks freely available - why would you want to re-invent the wheel?

I personally use ASP.NET AJAX, but there will be a good framework that works with your preferred development platform, or even just a simple javascript client-side framework like jQuery, Yahoo UI or Dojo. Take your pick.

michellez · 27 Jan 2009 at 11:24

Seen the fancy stuff, looks cool. I need to get the function working first though!

I'm now using prototype and I have got to the exact same point! I get a response in IE but not Firefox. Eh?

IE7 = out of the whois in a dialog, sweet
Firefox = "no response" message in the dialog

whois.js:

Code:

function showWhois()
	{
		var idomain = $F('domainInput');
		var url = 'whois.php';
		var pars = 'domain=' + idomain;
		
		var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: pars, 
				onComplete: function(transport){
					var response = transport.responseText || "no response text";
					alert("Success! \n\n" + response);
				},
				onFailure: function(){ alert('Something went wrong...') 
				}
			});
		
	}

function showResponse(originalRequest)
	{
		//put returned XML in the textarea
		//$('whoisResult').value = originalRequest.responseText;
		var response = transport.responseText || "no response text";
		alert("Success! \n\n" + response);
	}

Thanks,
Shell

michellez · 27 Jan 2009 at 11:30

Just installed FireBug in hope...

I note that I get:

Prototype is not defined
prototype.js
Line 1355

IE produces no errors tho..

michellez · 27 Jan 2009 at 11:44

michellez · 27 Jan 2009 at 12:02

Ok. There has got to be something daft I'm missing with Firefox! Do you not use a div or something? I've tried span and textarea as well. Blank in Firefox, but populated fine in IE.

I've gone as simple as the following which is simply trying to get the basic thing to output some rubbish in a div when I hit the button (noting I am now using Ajax.Updater instead).

I know it's executing the URL as I can see it in the Apache logs.

whois.js

Code:

function getHTML()
{
	var url = 'whois.php';
	var pars = 'someParameter=ABC';
	
	var myAjax = new Ajax.Updater(
		'placeholder', 
		url, 
		{
			method: 'get', 
			parameters: pars
		});
	
}

whois.html

Code:

<html>
<head>
<script src="prototype.js"></script> 
<script src="whois.js"></script> 
</head>
<body>

<form name="myForm">
Domain:
<input type="text" id="domainInput">

<button onclick="getHTML()">
Submit
</button>
</form>

<br>
Meh:
<div id="placeholder"></div>

</body>
</html>

whois.php is set at the moment to simply echo out some random gobble de gook text.

michellez · 27 Jan 2009 at 12:16

I've found some one stating on another forum "remember that you cannot connect to another domain using AJAX in Mozilla based browsers, so you can use just relative path of request like '/test/file.php'" ... but I am!

Searched round Firefox settings as well incase.

SimonCHere · 27 Jan 2009 at 12:34

The answer is that firefox is submitting the form when you click on the button, IE doesn't.

Try this for you form:

Code:

<form name="myForm" action="javascript:getHTML()">
Domain:
<input type="text" id="domainInput">
<input type=submit></imput>
</form>

or even just define the button as

Code:

<input type="button" id="sub1" value="Submit" onclick="getHTML()">

This works in both IE and firefox.

Simon

michellez · 27 Jan 2009 at 12:48

Thank you SimonCHere... Sorted.
Makes sense now you say it...!

michellez · 27 Jan 2009 at 12:53

Hm, now it doesn't work in IE lol

Used this option:

Code:

<input type="button" id="sub1" value="Submit" onclick="getHTML()">

Wanting to avoid actually using a form submit as I don't want the page to reload (plans down the line...).

Thanks,
Shell

SimonCHere · 27 Jan 2009 at 13:00

doh sorry make that

Code:

<input type="button" id="sub1" value="Submit" onclick="javascript:getHTML()">

michellez · 27 Jan 2009 at 13:07

Still nothing in IE. Firefox is still good though.

Thanks for you help SimonCHere.

SimonCHere · 27 Jan 2009 at 13:16

Are you sure you have ctrl + F5'd IE because that code works here?

Code:

<html>
<head>

<script src="prototype.js"></script> 
<script src="whois.js"></script> 
</head>
<body>

<form name="myForm">
Domain:
<input type="text" id="domainInput">
<input type="button" id="sub1" value="Submit" onclick="javascript:getHTML()">
</form>
<br>
Meh:
<div id="placeholder"></div>

</body>
</html>