Skip to content

dev'http_api'example_html js

Usagi Ito edited this page Jan 16, 2018 · 1 revision

HTML+JavaScriptによる使用例

4.0.0.13 以降は #52 の対応により HTML+JavaScript から実行中の G4 の APIs をモダンウェブブラウザーを用いても扱いやすくなった。この記事では HTML+JavaScript で作られた API アプリケーションの簡単な実装例を示す。

Source

JavaScript コードを含む HTML とモダンウェブブラウザーから G4 APIs を叩くにあたり必要十分な例を単一の .html コードを示す。 tester.html などのファイルとして保存し、モダンウェブブラウザーで file:// スキームにより直接、あるいは適当な httpd を用いてアクセスすれば試用できる。

<script>
function test()
{
  var x = new XMLHttpRequest()
  x.open
  ( document.getElementById( 'request_method' ).value
  , document.getElementById( 'request_url' ).value
  )
  x.addEventListener
  ( 'readystatechange'
  , function()
    {
      document.getElementById( 'response_status' ).innerHTML = this.status + ' ' + ( this.statusText.length > 0 ? this.statusText : 'unknown-error ( connection refused or CORS error maybe )' )
      switch ( this.readyState )
      { case this.HEADERS_RECEIVED:
        document.getElementById( 'response_header' ).innerHTML = this.getAllResponseHeaders()
        break
        
        case this.DONE:
        document.getElementById( 'response_body' ).innerHTML = this.responseText
      }
    }
  )
  x.setRequestHeader( 'Content-Type', document.getElementById( 'request_content_type' ).value )
  switch ( document.getElementById( 'request_method' ).value )
  { case 'GET':
      x.send
      ( encodeURIComponent
        ( document.getElementById( 'request_get_key' ).value + '=' + document.getElementById( 'request_body' ).value
        )
      )
      break
    default:
      x.send( document.getElementById( 'request_body' ).value )
  }
}
</script>

<h1>G4 API Tester</h1>

<h2>Request JSON</h2>
<div>Method: 
  <select id="request_method">
    <option value="GET">GET</option>
    <option value="POST" selected>POST</option>
  </select>
</div>
<div>URL: <input id="request_url" size="80" value="http://127.0.0.1:50080/api/json-rpc-2.0/" /></div>
<div>Get-Key: <input id="request_get_key" size="80" value="request" /></div>
<div>Content-Type: <input id="request_content_type" size="80" value="application/json" /></div>
<div>Body: <textarea id="request_body" cols="80" rows="16">{ "jsonrpc": "2.0"
, "id": null
, "method": "GetProductVersionObject"
}</textarea></div>
<div><button onclick="test()">test</button></div>

<h2>Response</h2>
<h3>Status</h3>
<div id="response_status"></div>
<h3>Header</h3>
<pre id="response_header"></pre>
<h3>Body</h3>
<pre id="response_body"></pre>

Image

image

Clone this wiki locally
You can’t perform that action at this time.