Prototype - AJAX Response() Method

Quiz

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;

Output

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>

Output

prototype_ajax_tutorial.htm

Print Page