HowTo:Use AJAX and REST in a Web Page to POST data
From AT&T Support Wiki
HowTo:Use AJAX and REST in a Web Page to POST data
|
For: Designers See more: |
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
