Web | This Site

Learn Prototype
Prototype Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

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

Advertisement

Online Image Processing

Indian Baby Names