Release 2.x‎ > ‎Development‎ > ‎

Javascript: prototype

Introduction

This page demonstrates several examples of using the OpenPTK RESTful interface with the javascript and prototype. The examples below show how to use the HTTP Accept header to request each of the 4 representation outputs supported (JSON, XML, HTML, and text), and display the results.

Test html page with javascript examples operations

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/transitional.dtd">

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>OpenPTK JSON Prototype Tests</title>
      <script type="text/javascript" src="../include/openptk.js" ></script>
      <script type="text/javascript" src="../include/prototype.js"></script>
   </head>
   <body>
      <h1>OpenPTK JSON Prototype Tests</h1>

      <FORM>
         <INPUT TYPE="button" VALUE="Contexts"
                onClick="showResource('contexts', 'contexts/')">
         <INPUT TYPE="button" VALUE="Context"
                onClick="showResource('context', 'contexts/Person-MySQL-JDBC/')">
         <INPUT TYPE="button" VALUE="Subjects"
                onClick="showResource('subjects', 'contexts/Person-MySQL-JDBC/subjects/')">
         <INPUT TYPE="button" VALUE="Subject"
                onClick="showResource('subject', 'contexts/Person-MySQL-JDBC/subjects/jbauer/')">
      </FORM>

   </body>
</html>
<script type="text/javascript">
   function showResource(resourcetype, resource) {
      var url = '/openptk/resources/' + resource;

      new Ajax.Request(url, {
         method:'get',
         requestHeaders: {Accept: 'application/json'},
         parameters:'',
         onSuccess: function(transport){
           var resourceresponse = transport.responseJSON;
           // var resourceresponse = transport.responseText.evalJSON(true);

            switch(resourcetype)
            {
               case 'contexts':
                  displayContexts(resourceresponse);
                  break;
               case 'context':
                  displayContext(resourceresponse);
                  break;
               case 'subjects':
                  displaySubjects(resourceresponse);
                  break;
               case 'subject':
                  displaySubject(resourceresponse);
                  break;
               default:
                  alert("Invalid Resource Type : "+resourcetype);
            }

         },
         onFailure:function(){ alert('Something went wrong...') }
      });

      return false;
   }


   function displayContexts(contexts)
   {
      alert("Contexts:  " + contexts.response.length +  "\nURI:  "+ contexts.response.uri);
   }

   function displayContext(context)
   {
      alert("Context:  " + context.response.context.uniqueid  + "\nURI:  "+ context.response.uri + "\nDescription:  " + context.response.context.description + "\nOperations:  " + context.response.context.operations);
   }

   function displaySubjects(subjects)
   {
      alert("Subjects:  " + subjects.response.length + "\nURI:  "+ subjects.response.uri);
   }

   function displaySubject(subject)
   {
      alert("Subject  URI" + subject.response.uri  + "\nFirstname:  "+ subject.response.subject.firstname + "\nLastname:  "+ subject.response.subject.lastname + "\nEmail:  "+ subject.response.subject.email+ "\nUnique Id:  "+ subject.response.subject.uniqueid);
   }

</script>