Prototype-ajax-response

提供:Dev Guides
移動先:案内検索

プロトタイプ-AJAX Response()メソッド

このAJAX _Ajax.Response_は、すべてのAjaxリクエストコールバックの最初の引数として渡されるオブジェクトです。

これは、ネイティブxmlHttpRequestオブジェクトのラッパーです。 responseJSONおよびheaderJSONプロパティを介してJSONのサポートを追加しながら、クロスブラウザーの問題を正規化します。

Ajax.Responseオブジェクトのプロパティ

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

またはヌル

The XML body of the response if the content-type of the request is set to application/xml. null otherwise.
responseJSON

Object, Array

またはヌル

The JSON body of the response if the content-type of the request is set to application/json. null otherwise.
headerJSON

Object, Array

またはヌル

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.

以下は、_status_および_responseText_プロパティの使用法を示す例です-

<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>
*ajax.cgi* のコンテンツは次のとおりです。
#!/usr/bin/perl

print "Content-type: text/html\n\n";

print "This content is returned by AJAX cgi ";
print "Current Time " . localtime;

出力

Ajax.Responseオブジェクトのメソッド

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.

以下は、_getAllHeaders()_および_getResponseHeader(name)_メソッドの使用法を示す例です-

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

出力