Learn Prototype
Prototype Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Prototype AJAX Response() Method
This AJAX Ajax.Response is the object passed as the first argument of all Ajax requests callbacks.
This is a wrapper around the native xmlHttpRequest object. It normalizes cross-browser issues while adding support for JSON via the responseJSON and headerJSON properties.
Properties of the Ajax.Response object:
Property | Type | Description |
status | Number | The HTTP status code sent by the server. |
statusText | String | The HTTP status text sent by the server. |
readyState | Number | The request's current state. 0 corresponds to "Uninitialized", 1 to "Loading", 2 to "Loaded", 3 to "Interactive" and 4 to "Complete". |
responseText | String | The text body of the response. |
responseXML | document Object or null | The XML body of the response if the content-type of the request is set to application/xml. null otherwise. |
responseJSON | Object, Array or null | The JSON body of the response if the content-type of the request is set to application/json. null otherwise. |
headerJSON | Object, Array or null | Auto-evaluated content of the X-JSON header if present. null otherwise. This is useful to transfer small amounts of data. |
request | Object | The request object itself (an instance of Ajax.Request or Ajax.Updater). |
transport | Object | The native xmlHttpRequest object itself. |
Example:
Following is the example to show the usage of status and responseText properties:
<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>
|
Here is the content of ajax.cgi
#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "This content is returned by AJAX cgi ";
print "Current Time " . localtime;
|
To understand it in better way you can Try it yourself.
Methods of the Ajax.Response object:
Method | Type | Description |
getHeader(name) | String or null | Returns the value of the requested header if present. null otherwise. |
getAllHeaders() | String or null | Returns a string containing all headers separated by a line break. |
getResponseHeader(name) | String | Returns the value of the requested header if present. Throws an error otherwise. This is just a wrapper around the xmlHttpRequest object.s native method. Prefer it's shorter counterpart getHeader. |
getAllResponseHeaders() | String | Returns a string containing all headers separated by a line break. Throws an error otherwise. This is just a wrapper around the xmlHttpRequest object's native method. Prefer it.s shorter counterpart getAllHeaders. |
Example:
Following is the example to show the usage of getAllHeaders() and getResponseHeader(name) methods:
<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
});
}
function successFunc(response){
var content = response.getAllHeaders();
var container = $(header1);
container.update(content);
var content = response.getResponseHeader('Content-Type');
var container = $(header2);
container.update(content);
}
</script>
</head>
<body>
<p>Click submit button to see the result:</p>
<br />
<div id="header1">All Headers</div>
<div id="header2">Content Type</div>
<br />
<br />
<input type="button" value="Submit" onclick="SubmitRequest();"/>
</body>
</html>
|
To understand it in better way you can Try it yourself.
|
|
|