Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

pui.AjaxRequest serves as a cross-browser compatible wrapper for the browser’s "XMLHttpRequest" object used to initiate HTTP requests for server-side resources from client-side scripts -- i.e. JavaScript code.

 

Usage

To make Ajax requests, an pui.AjaxRequest object is first created using the new keyword and one of the 2 available constructors.

After the object is created, options may be specified by setting properties on the object. Once all desired options are set, the request can be transmitted using the send() method on the object. Responses are processed by providing handler functions using the object’s onfail, onsuccess, and onready properties.

 

Constructors

pui.AjaxRequest(string url)

...

This form of the constructor accepts an options object as a parameter. Any of the available properties on the pui.AjaxRequest object can be set during object creation using this constructor by including the appropriate property name/value pairs in the options parameter.

 

Properties

async - Boolean value that determines if the request will be sent synchronously or asynchronously. In an asynchronous request, processing of the script does not wait for the completion of the HTTP request. Synchronous requests cause the script to stop executing when the request is sent, and then to restart when the response is received. Valid values are Boolean true or false. The default value if not specified is true.

...

postData - String containing the POST data to send to the HTTP server with the request. Used only with POST requests. The POST data should be in the form of standard URL encoded name/value pairs.

reqData - (Requires AjaxLibrary 1.59 or Profound UI 6.3.0 or newer) String containing data to send to the HTTP server with PUT or POST requests. The data should be in the same format as you specify in the content-type option of the headers parameter.  If no content-type is provided, URL encoded name/value pairs are assumed.

suppressAlert - Boolean value that controls whether or not to display HTTP error messages. By default, the pui.AjaxRequest object will automatically report any HTTP failure states with an alert box. This property can be set to false if you do not want these alerts to display. Other alert messages that result from improper use of the pui.AjaxRequest object (such as giving an invalid HTTP request method) will result in alert box messages that cannot be suppressed.

...

user - String containing the user name to send to the server. Used when the HTTP server requires user authentication.

 

Events

onfail - This event fires when the pui.AjaxRequest object has received a failed response from the HTTP server. Either a named or anonymous function can be specified for this event.

...

onsuccess - This event fires when the pui.AjaxRequest object has received a successful response from the HTTP server. Either a named or anonymous function can be specified for this event.

 

Methods

abort() - Aborts a request that is in process. This method is valid only when using an asynchronous request.

...

setRequestHeader(headerLabel, headerValue) - Sets HTTP headers to be sent with the request. headerLabel is a string containing the name of the desired HTTP header to set, such as 'content-type'. headerValue is a string that contains the corresponding value, such as 'text/xml'.

 

pui.AjaxRequest Examples

Sending an asynchronous GET request:

...

Code Block
javascript
javascript

var ajaxRequest = new
pui.AjaxRequest("getInfo.pgm?referenceNumber=123&customerNumber=456");
ajaxRequest.onsuccess = function(ajaxRequest) {
  alert(ajaxRequest.getResponseText());
}
ajaxRequest.send();

...

Code Block
javascript
javascript

var ajaxRequest = new pui.AjaxRequest("getInfo.pgm");
ajaxRequest.method = "post";
ajaxRequest.async = false;
ajaxRequest.suppressAlert = true;
ajaxRequest.postData = "customerName=" + encodeURIComponent("David Russo") + "&customerNumber=" + encodeURIComponent("H52N-100");
ajaxRequest.onsuccess = infoHandler;
ajaxRequest.onfail = failHandler;
ajaxRequest.send();
function infoHandler(ajaxRequest) {
  alert(ajaxRequest.getResponseText());
}
function failHandler(ajaxRequest) {
  alert(ajaxRequest.getStatusMessage());
}

...

Code Block
javascript
javascript

var ajaxRequest = new pui.AjaxRequest({
  url: "getInfo.pgm",
  method: "post",
  async: true,
  suppressAlert: true,
  params: {
    customerName: "David Russo",
    customerNumber: "H52N-100"
  },
  onsuccess: infoHandler,
  onfail: failHandler
});
ajaxRequest.send();

function infoHandler(ajaxRequest) {
  alert(ajaxRequest.getResponseText());
}

function failHandler(ajaxRequest) {
  alert(ajaxRequest.getStatusMessage());
}