Jump to content
sword.tn

Ajax frameworks

Recommended Posts

hi, 1-what is the best and easiest AJAX framework for a debutant with this technology?2-what is the difference between the server-side and the client-side frameworks?thanx

Share this post


Link to post
Share on other sites

1 - Write your own, it's not that difficult. Barring that, you might try MooTools.2 - In terms of AJAX? The only experience I've had with a server-side AJAX framework is through AJAXPro for .NET. This allows you, through reflection, to open up your server-side functions directly from client-side script.For example, if I had a function similar to this in C# running in the code-behind of a ASPX page called "MyPageName":

public DateTime GetDateTimeFromString(string datestring){	// this has been made intentionally simplistic for the sake of example.	return new DateTime(datestring);}

And, assuming that I registered that method through AJAXPro, I could call it from java script:

MyPageName.GetDateTimeFromString('08-23-2007', callback);function callback(res){	alert("That date is a " + res.value.DayOfWeek.ToString() + "!");}

So, the difference? Client-side will only run client-side. If you wanted to interact with the server, you'd have to write code on the server to handle the request and process a response. Server-side allows the client-side to invoke server-side functions directly.

Share this post


Link to post
Share on other sites

You could use this one I wrote

	function Ajax(sender,parameters)	{		this.request = function()		{			var http = null;			var method = (parameters.method == null) ? "get" : parameters.method;			var async = (parameters.async == null) ? true : parameters.async;			//Firefox,Opera 8.0+,Safari			try{http = new XMLHttpRequest();}			catch(e)			{				//Internet Explorer				try{http = new ActiveXObject("Msxml2.XMLHTTP");}				catch(e)				{					try{http = new ActiveXObject("Microsoft.XMLHTTP");}					catch(e)					{						alert("Your browser does not support Ajax!");						return false;					}				}			}			http.onreadystatechange = function(){_OnComplete(parameters.onComplete,parameters.onFailure,parameters.update,http)};			if(typeof sender == "string")			{				http.open(method,sender,async);				http.send(null);			}			else			{				var action = (sender.action == null) ? parameters.action : sender.action;				var args = this.toQueryString(sender);				http.open(method,action,async);				http.setRequestHeader("Content-type","application/x-www-form-urlencoded");				http.setRequestHeader("Content-length",parameters.length);				if(!document.all){http.setRequestHeader("Connection","close");}				http.send(args);			}		}				this.toQueryString = function(object)		{			var str = "";			var count = 0;			if(object.length)			{				for(var i=0;i<object.length;i++)				{					//filter out ASP.Net system elements					var sysElem = (	object[i].name == null ||									object[i].name == "__EVENTTARGET" ||									object[i].name == "__EVENTARGUMENT" ||									object[i].name == "__VIEWSTATE");					if(!sysElem)					{						if(count == 0)						{							str += object[i].name + "=" + encodeURIComponent(object[i].value);						}						else						{							str += "&" + object[i].name + "=" + encodeURIComponent(object[i].value);						}						count++;					}				}			}			else			{				for(key in object)				{					if(count == 0)					{						str += key + "=" + encodeURIComponent(object[key]);					}					else					{						str += "&" + key + "=" + encodeURIComponent(object[key]);					}					count++;				}			}			return str;		}	}		function _OnComplete(fnComplete,fnFailure,update,http)	{		if(http.readyState == 4)		{			if(http.status == 200)			{				if(fnComplete){fnComplete({text:http.responseText});}				if(update)				{					if(typeof update == "string")						update = document.getElementById(update);					update.innerHTML = http.responseText;				}			}			else			{				if(fnFailure){fnFailure({text:http.responseText,status:http.status});}			}		}	}

Sending a GET request

var ajax = new Ajax("mypage.aspx?key=value",{method:"get",update:"elementIdToUpdate"});ajax.request();

The above code sends an ajax request via GET that on completion updates an element's innerHTML with the id "elementIdToUpdate" with the response text.Sending a POST request with form data

var ajax = new Ajax(document.getElementById("MyForm"),{method:"post",update:"elementId"});ajax.request();

This code sends form data via post, which is encoded to avoid special character conflicts, and updates "elementId".Sending POST request without form data

var ajax = new Ajax({key1:"value1",key2:"value2"},{method:"post",update:"elementId",action:"mypage.aspx"});ajax.request();

This code does the same post request except without form data, notice I replace the form element with a javascript Object. I also add the action parameter because there is no form action to get like the previous request.Other parametersonComplete:function(response){ //This function runs when the ajax request is complete //response has 1 property - response.text alert(response.text);}onFailure:function(response){ //this function runs if the request fails to complete //response returns text and status alert("Text:" + response.text + ", Status:" + response.status);}async:false This parameter determines whether or not the request is done asyncronously or syncronously, meaning if set to false other javascript code will not execute until this request is finished, if set to true which is the default so you really don;t need to set it, other javascript code will execute immediately and not wait for the request to finish.

Share this post


Link to post
Share on other sites

What PHP framework to use? Well... it doesn't really matter, unless you plan to do things that only one framework can handle. For normal operation, any one should do. The PHP framework would be the server-side framework, while the AJAX frameworks as described above would be the client-side one.

Share this post


Link to post
Share on other sites

AJAX is a technology referred to when doing an asynchronous server request, and load that information into a div at client side. AJAX does not require server scripting. It only requires php scripting if you'd want to load information from a database. Everything else can be done using Javascript.Don't get me wrong: executing a XMLHttpRequest on a PHP script and load the result in a DIV has very powerful potential. But you're still using a div as if it were a unique browser window within a page.One thing to keep in mind is that posting a HTML form using PHP requires a Javascript function to dinamically load the handler message into your DIV, and post the data to the handler. In other words: ALL communications are to be handled using the AJAX approach, you can't get away with direct interaction with the PHP script.Don't hesitate to flame me in cold blood if I'm clearly wrong at any point; I'm still learning but these are the basics I firmly believe to be true and base my design concepts upon. If I'm wrong, you'd be doing me a favor by telling me.

Share this post


Link to post
Share on other sites

Ive used YUI, PROTOTYPE, and JQuery. The JQuery syntax is kind of wierd, but once u get the hang of it, it isnt so bad. YUI and PROTOTYPE werent too bad, but the documentation doesnt really provide a lot of complete examples. What do other people think is the easiest out of YUI, Prototype, and JQuery in terms of easiness to learn, and the documentation?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...