AJAX tutorials

[timROGERS]

I want to put together some useful AJAX functions for use with my scripts without just copying code. I want to learn how the request object works so I can customize things to my needs.

Does anyone know of any good tutorials? I want to be able to do things like submitting forms and checking usernames without page loads without code copying.

Tim

[Dentafrice,]

script.aculo.us is amazing for doing stuff like this.

Download that.

[timROGERS]

script.aculo.us is amazing for doing stuff like this.

Download that.

I've used s.a.us, but I'd like a smaller more dedicated script really I don't need all the features of it in most cases. However, I don't mind using it. Have you got any links to good pages explaining how to use Scriptaculous in conjunction with forms?

Also, anyone got tutorials without using a library? (such as s.a.us and jQuery)

[Eccentric]

there are a few on techtuts forums lying about its just trying to find them on there dynamicdrive have a few and pixel2life have a few but i google alot for what i need :S

[Dentafrice,]

I've used s.a.us, but I'd like a smaller more dedicated script really I don't need all the features of it in most cases. However, I don't mind using it. Have you got any links to good pages explaining how to use Scriptaculous in conjunction with forms?

Also, anyone got tutorials without using a library? (such as s.a.us and jQuery)

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

Include your files.

<script type="text/javascript">
function submitform () {
var name = document.contact.name.value;
var comments = document.contact.comments.value;
var email = document.contact.email.value;
new Ajax.Updater('result', 'contact.php?action=contact&name='+name+'&comments='+comments+'&email='+email+'',{onLoading:function(request){sendmail()},onComplete:function(request){handelrequest()}, insertion:Insertion.Bottom, asynchronous:true});
}
        function sendmail() {
            //Make the Progress Bar Appear
        }
        function handelrequest() {
                new Effect.SlideUp('formbox');
                new Effect.Appear('result', { delay: 1 });
        }
</script>

Include this somewhere in the page ^^

<div id="result" style="display: none;"></div>      
        <div id="formbox">
         <form name="contact" class="box">
    <br>
    <strong>Name:<br>
    </strong> 
    <label>
    <input name="name" type="text" id="name" size="60">
    </label>
    <br>
    <br>
    <strong>Contact E-Mail: </strong><br>
    <input name="email" type="text" id="email" size="60">
    <br />
    <br />
    <strong>Comments:</strong><br />
    <label>
    <textarea name="comments" cols="55" rows="10" id="comments"></textarea>
    </label>
    <br />
    <br>
    <br>
    <input type="button" name="send" value=" Contact! " onClick="submitform();">
     <br />
  <br>
  </form>
  </div>

This is the form

[Eccentric]

May i use that where needed?

[Dentafrice,]

Sure

[timROGERS]

Sure

Thanks for your help This morning I put together an AJAX email sender, with all possible errors, email validity checking and AJAX sending

[Tomm]

If you want you can use this is create a XMLHTTP object:

function createObj()
{
	var xmlhttp;
	//works for all except IE6 and older
	try
	{
		xmlhttp = new XMLHttpRequest();
	}
	catch(e)
	{
		var objVer = new Array("MSXML2.XMLHTTP.6.0",
							   "MSXML2.XMLHTTP.5.0",
							   "MSXML2.XMLHTTP.4.0",
							   "MSXML2.XMLHTTP.3.0",
							   "MSXML2.XMLHTTP",
							   "Microsoft.XMLHTTP");
		for (var i=0; i<objVer.length && !xmlhttp; i++)
		{
			try
			{
				xmlhttp = new ActiveXObject(objVer[i]);
			}
			catch (e) {}
		}
	}
	if(!xmlhttp)
	alert("Failed to create a valid XMLHttpRequest object. Please make sure your browser supports XMLHttpRequest or the XMLHTTP ActiveX Object");
	else
	return xmlhttp;
}

Taken from UserSystem's code.

This is better than the normal ones as it attempts to create a object the is compaible with Opera/Firefox/IE7 first. Then trys to create the ActiveX object (It also trys diffrent versions, working from the latist down), rather than the other way round as the non-ActiveX object is better if the browser supports it.