HowTo:Use AJAX and REST in a Web Page to POST data

HowTo:Use AJAX and REST in a Web Page to POST data

From LongJump Support Wiki

HowTo:Use AJAX and REST in a Web Page to POST data
Jump to: navigation, search

For:   Designers
Level: Advanced
Time: 15 minutes

See more:
    ◾ HowTo Guides

This example adds a new entry to the ultra-simple Customers object in the Sample Order Processing System. To keep the example as simple as possible, the data is hard-wired into the script.

Considerations
  • In this case, we'll use a synchronous request, because we don't want the rest of the page to render until after the attempted POST has completed.
  • A unique key has been defined for the Customer object, so only the first POST should succeed. Subsequent POSTs should fail.
  • POST requests return 201 when successful (unlike other REST requests, which return 200).
<html>
<head>
<script type="text/javascript">
function createNewCustomer()
{
    // Create the communications object.
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
   
    // Set up the request to send XML data to the server.
    // Make it synchronous, so we know how page rendering should proceed
    async = false;
    resource = "/networking/rest/record/customer?alt=json";
    data =
      "<platform>                                      \
          <record>                                     \
              <customer_name>Ian</customer_name>       \
              <company_address>SoHo</company_address>  \
          </record>                                    \
      </platform>"
;
   
    xmlhttp.open("POST", resource, async);    
    xmlhttp.setRequestHeader("Content-type", "application/xml");
                                       // or "application/json"
    xmlhttp.send(data);
   
    var text = "";
    //text = "<pre>" + xmlhttp.responseText + "</pre>";  //For debugging
       
    // Echo the return value.  Success = 201
    var reply = eval('(' + xmlhttp.responseText + ')');
    if (xmlhttp.readyState==4) {
      if (xmlhttp.status==201) {
        text += "Customer added successfully.<br/>";
        text += "Record ID: " + reply.platform.message.id;
      }
      else {
        text += "Customer add failed.<br/>";
        text += "HTTP Status = " + xmlhttp.status + "<br/>";
        text += "Platform Status = " + reply.platform.message.code + "<br/>";
        text += reply.platform.message.description;
      }      
    }
    document.getElementById("myDiv").innerHTML=text;
}
</script>
</head>

<body>
    <div id="myDiv"><h2>Click the button to create a new customer.</h2></div>
    <button type="button" onclick="createNewCustomer()">Ok</button>
</body>

</html>

The result of a successful POST looks like this:

Customer added successfully.
Record ID: 313913951


Learn more: AJAX and REST: POST/PUT Syntax

Personal tools