The following example shows how to invoke a process using AJAX with jQuery. The scripts used for the request require jQuery 1.3.2+
(http://www.jquery.com
) and
json2.js
(
http://www.JSON.org/json2.js
). The
json2.js
script is used to convert a JSON object to a string.
var loanRequestJSON = {"loanProcessRequest":
{"xmlns":"http:\/\/schemas.active-endpoints.com\/sample\/LoanRequest\/2008\/02\/loanRequest.xsd",
"loanType":{"$t":"Automobile"},
"firstName":{"$t":"John"},
"lastName":{"$t":"Smith"},
"dayPhone":{"$t":"2039299400"},
"nightPhone":{"$t":"2035551212"},
"socialSecurityNumber":{"$t":"123-45-6789"},
"amountRequested":{"$t":"15000"},
"loanDescription":{"$t":"Application to finance the purchase of a Toyota Prius"},
"otherInfo":{"$t":"Down payment is US$7500"},
"responseEmail":{"$t":"
john.smith@example.com
"}
}
};
// convert JSON to string using function in json2.js script
var jsonStr = JSON.stringify(loanRequestJSON);
// Send jQuery AJAX POST to http://localhost:8080/active-bpel/services/JSON/humantaskProcessDemoService
$.ajax( {
url : "http://localhost:8080/active-bpel/services/JSON/humantaskProcessDemoService",
type : "POST",
contentType : "application/json; charset=utf-8",
data : jsonStr, // JSON payload
dataType : "json", // expected return data type
cache : false,
success : function(aJsonResponse, aTextStatus) {
// callback function on success
alert("status=" + aJsonResponse.status.$t);
},
error : function(aXmlHttpReq, aTextStatus, aErrorThrown) {
// callback function when an error occurs - including faults.
// code that checks for response status code and data
// to determine the type of error and fault.
// var resp_contentType = aXmlHttpReq.getResponseHeader("Content-Type");
// var http_statusCode = aXmlHttpReq.status;
// var http_statusMsg = aTextStatus;
}
});
The
AE_AJAX_SERVICE_UTIL
Javascript object in the
ae-avc-util.js
script included with the SDK provides has a helper function
postJSON(url, jsonRequest, successCallbackFn, faultCallbackFn, errorCallbackFn)
to POST JSON data.
var loanRequestJSON = {"loanProcessRequest":
{"xmlns":"http:\/\/schemas.active-endpoints.com\/sample\/LoanRequest\/2008\/02\/loanRequest.xsd",
"loanType":{"$t":"Automobile"},
"firstName":{"$t":"John"},
"lastName":{"$t":"Smith"},
"dayPhone":{"$t":"2039299400"},
"nightPhone":{"$t":"2035551212"},
"socialSecurityNumber":{"$t":"123-45-6789"},
"amountRequested":{"$t":"15000"},
"loanDescription":{"$t":"Application to finance the purchase of a Toyota Prius"},
"otherInfo":{"$t":"Down payment is US$7500"},
"responseEmail":{"$t":"john.smith@example.com"}
}
};
AE_AJAX_SERVICE_UTIL.postJSON(
// service url
"http://localhost:8080/active-bpel/services/JSON/humantaskProcessDemoService",
// JSON request object (not string)
loanRequestJSON,
// success callback of JSON data
function(aJsonResponse) {
alert("status=" + aJsonResponse.status.$t);
},
// fault callback of JSON data
function(aJsonFault) {
// handle fault
},
// http error callback
function(aStatusCode, aStatusMessage) {
// handle transport error
}
);
Here is another example that uses the WS-HumanTask (WSHT) API
getMyTasks
operation via JSON. This example fetches tasks using the API and populates a HTML table with the results.
<! -- html snippet -->
<table cellpadding="2" border="1">
<thead>
<tr><th colspan="5">Get My Tasks Response (from JSON):</th></tr>
<tr><th>Task ID</th> <th>Status</th><th>Owner</th>
<th>PresentationName</th><th>PresentationSubject</th></tr>
</thead>
<! -- the table body will be populated using JavaScript -->
<tbody id="taskList">
</tbody>
</table>
// getMyTasks reqests
var getMyTasksRequest = {
"getMyTasks" : {
"xmlns" : "http://www.example.org/WS-HT/api/xsd",
"taskType" : { "$t" : "TASKS" },
"genericHumanRole" : { "$t" : "POTENTIAL_OWNERS" },
"status" : { "$t" : "READY" },
"maxTasks" : { "$t" : "10" }
}
};
// send JSON
AE_AJAX_SERVICE_UTIL.postJSON(
// task-client service url
"
http://localhost:8080/active-bpel/services/JSON/AeB4PTaskClient-taskOperations
",
// req.
getMyTasksRequest,
// success callback of JSON data
function(aJsonResponse) {
// display results in a table
populateTaskList(aJsonResponse);
},
// fault callback of JSON data
function(aJsonFault) {
alert("Fault!");
},
// http error callback
function(aStatusCode, aStatusMessage) {
alert("Transport error: " + aStatusCode + " " + aStatusMessage);
}
);
//
// This function takes a getMyTasksResponse element (in JSON) and populates
// the tasks in an HTML table.
//
function populateTaskList(aJsonResponse) {
// Note: aJsonResponse contains getMyTasksResponse object)
// clear current contents by removing all children of the table (table rows)
$("#taskList").empty();
// check to make sure response exists.
if (!aJsonResponse.getMyTasksResponse) {
alert("Response 'getMyTasksResponse' expected.");
return;
}
// get list of task abstracts (//htdt:getMyTasksResponse/htdt:taskAbstract)
var taskAbstracts = AE_JSON_NODE_UTIL.getElements
(aJsonResponse.getMyTasksResponse.taskAbstract);
var i;
// for each taskAbstract, build the html row and append to table tbody.
for (i = 0; i < taskAbstracts.length; i++) {
var html = "<tr>";
html += "<td>" + AE_JSON_NODE_UTIL.getText(taskAbstracts[i].id, "n/a") + "</td>";
html += "<td>" + AE_JSON_NODE_UTIL.getText(taskAbstracts[i].status, "n/a") + "</td>";
html += "<td>" + AE_JSON_NODE_UTIL.getText(taskAbstracts[i].actualOwner, "n/a") + "</td>";
html += "<td>" + AE_JSON_NODE_UTIL.getText(taskAbstracts[i].presentationName, "n/a") + "</td>";
html += "<td>" + AE_JSON_NODE_UTIL.getText(taskAbstracts[i].presentationSubject, "n/a") + "</td>";
html += "</tr>";
// append to table
$("#taskList").append(html);
};
}
