Copyright © tutorialspoint.com

Prototype AJAX Response() Method

previous next


Advertisements

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:

PropertyTypeDescription
statusNumberThe HTTP status code sent by the server.
statusTextStringThe HTTP status text sent by the server.
readyStateNumberThe request's current state. 0 corresponds to "Uninitialized", 1 to "Loading", 2 to "Loaded", 3 to "Interactive" and 4 to "Complete".
responseTextStringThe text body of the response.
responseXMLdocument Object
or null
The XML body of the response if the content-type of the request is set to application/xml. null otherwise.
responseJSONObject, Array
or null
The JSON body of the response if the content-type of the request is set to application/json. null otherwise.
headerJSONObject, Array
or null
Auto-evaluated content of the X-JSON header if present. null otherwise. This is useful to transfer small amounts of data.
requestObjectThe request object itself (an instance of Ajax.Request or Ajax.Updater).
transportObjectThe 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:

MethodTypeDescription
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.


previous next