Prototype - AJAX Response() Method


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

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

Advertisements