Implementing Ajax with Prototype

**Fernandoa** · 28-02-2011

Configuring your application

The configuration steps are pretty basic, we will only have to declare our file including prototype.js in <head></head> in your application.

Code:

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

After adding the library to your application and have all the functionality that it offers, such as $ () or $ F (), which is a fast version of $('id').value . So we collect data from our form in a very easy to implement.

Code:

 var nombre=$F('nameUser'); var apellido=$F('surnameUser'); var direccion=$F('directionUser');

**Fernandoa** · 28-02-2011

Once collected all the items that need the merge all in a string to pass as parameters to the next page.

Code:

var param= 'name=' + nunber + '&surname=' + apellido + '&direction=' + direction;

Once assembled and our parameters we lack the direction to which we send our parameters, and which we can recover the data.

Code:

 var url = 'paginaReceptora.php';

And now the call to the object that we perform the query using Ajax and we send the data to the page defined above.

Code:

 var ajaxRequest = new Ajax.Request( url , { method: 'get', parameters: param , asynchronous: true, onComplete: showResponse }); function showResponse(xmlHttpRequest, responseHeader)

As we can see in bold, have the 2 variables that we defined before as the value of tuna over onComplete send us the role showResponse as our Ajax request has returned any results. It is where we define the actions we want to perform once given the data, so here our imagination and our application rule.

**justinepeter** · 28-02-2011

Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.

Ajax functionality is contained in the global Ajax object. The transport for Ajax requests is xmlHttpRequest, with browser differences safely abstracted from the user. Actual requests are made by creating instances of the Ajax.Request object.

new Ajax.Request('/some_url', { method:'get' });

The first parameter is the URL of the request; the second is the options hash. The method option refers to the HTTP method to be used; default method is POST.