Introduction
This chapter demonstrates about the Prototype.js with AJAX which is the better technique to create more interactive web applications by using XML, HTML, JavaScript and CSS and following are the concepts covered in this chapter.
- About AJAX
- Ajax Methods
Description
AJAX known as Asynchronous JavaScript and XML. AJAX is another strategy for making better, faster, and more intelligent web applications with the assistance of XML, HTML, CSS and Java Script.
Prototype framework empowers you to manage Ajax brings in a simple and easy way which is additionally safe. Prototype additionally deals with JavaScript code came back from a server and gives assistant classes for polling. Ajax usefulness is contained in the global Ajax object.
Ajax Request
Ajax request is the general purpose ajax requester which handles the life cycle of the request and which manage the boilerplate and for custom needs which plug in the callback functions the syntax for the Ajax request as shown below.
[code]
new Ajax.Request(url[, options])
[/code]
With the above syntax which Starts and procedures an AJAX request which handles the life-cycle of the request, handles the boilerplate, and which gives you a chance to connect to callback capacities for custom needs.
In the discretionary options hash, user typically give a onComplete as well as onSuccess callback, unless user are in the edge situation where he getting a JavaScript-typed response, which will consequently be evaluated. For a full list of basic alternatives and callbacks, see Ajax Options.
The main legitimate approach to make a requester is through the new operator. When the object is made, it starts the request, then which continues processing it for the duration of its life-cyle.
Ajax Response
Ajax requests are asynchronous, which implies user should have callbacks that will handle the information from a response. Callback methods are passed in the alternatives hash when making a request The code below demonstrates to making the Ajax request.
[code]
new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport) {
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function() { alert('Something went wrong...') }
});
[/code]
Following are the two call backs in the hash are shown below.
- onSuccess
- onFailure
Description
In order to handle the requests and responses in easy way Ajax have some methods which are briefly explained below.
Ajax.Request()
The AJAX method starts and process an AJAX request. Which object is a universally useful AJAX requester: which handles the life-cycle of the request, it handles the standard, and gives have a chance to connect to callback capacities for custom needs.
[code]
new Ajax.Request(url[, options]);
[/code]
The code below demonstrates the periodical updater by simply calling the stop method. If user need to re-enable by calling the start method as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function SubmitRequest() {
new Ajax.Request('/cgi-bin/ajax.cgi', {
method: 'get',
onSuccess: successFunc,
onFailure: failureFunc
});
}
function successFunc(response) {
if (200 == response.status) {
alert("Call is success");
}
var container = $('notice');
var content = response.responseText;
container.update(content);
}
function failureFunc(response) {
alert("Call is failed" );
}
</script>
</head>
<body>
<p>Click submit button see how current notice changes.</p>
<br />
<div id = "notice">Current Notice</div>
<br />
<br />
<input type = "button" value = "Submit" onclick = "SubmitRequest();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Ajax.Response()
The Ajax.Response is the object go as the initial argument of all Ajax requests for callbacks. The code below demonstrates the status of response text as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function SubmitRequest() {
new Ajax.Request('/cgi-bin/ajax.cgi', {
method: 'get',
onSuccess: successFunc,
onFailure: failureFunc
});
}
function successFunc(response) {
if (200 == response.status) {
alert("Call is success");
}
var container = $('notice');
var content = response.responseText;
container.update(content);
}
function failureFunc(response) {
alert("Call is failed" );
}
</script>
</head>
<body>
<p>Click submit button to see how current notice changes.</p>
<br />
<div id = "notice">Current Notice</div>
<br />
<br />
<input type = "button" value = "Submit" onclick = "SubmitRequest();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Ajax is a best technique for creating web applications.
- Ajax requests are asynchronous by default.
- Ajax functionality contain global Ajax object.