WebService

A WebService is a component that initiates and processes an AJAX request. This component is an abstraction of the XMLHttpRequest object.

To initialize a web service component:

{name: "getWeather", kind: "WebService",
  url: "http://somewebsite.com/weather.json",
  onSuccess: "gotWeather",
  onFailure: "gotWeatherFailure"}

To initiate the AJAX request:

this.$.getWeather.call({location: "Sunnyvale CA"});

Note: You can set any of the published properties via the setter function, e.g., setUrl(). For example, if you need to change the URL before initiating the AJAX request, you can do this:

this.$.getWeather.setUrl("http://somewebsite.com/Sunnyvale+CA/weather.json");
this.$.getWeather.call();

The params argument of call() can be either a JavaScript object or a string. The JavaScript object form will be converted to an application/x-www-form-urlencoded automatically; use the string form if you need to pass arguments to the server in a different format, but be sure to also set this to your own string. Also be sure to set the contentType property.

(Please see the "Published Properties" section below for a full list of available options.)

All 2xx responses are treated as success, as well as 0 and unknown status. To process the AJAX response:

gotWeather: function(inSender, inResponse, inRequest) {
  this.results = inResponse;
}

If the handleAs property is set to "json" (default), the content of the responseText property will automatically be converted into a JavaScript object.

To handle failure:

gotWeatherFailure: function(inSender, inResponse, inRequest) {
  enyo.log("got failure from getWeather");
}

A third parameter, inRequest, is always passed to the event handler functions. It contains a lot of details about the request, including a reference to the actual XHR object. For example, status code can be retrieved via inRequest.xhr.status.

You can obtain HTTP response headers from the XHR object using getResponseHeader. For example, to get Content-Type in the response headers:

inRequest.xhr.getResponseHeader("Content-Type")

The default HTTP method is GET; to make a POST request, set the method property to "POST". Here is an example of making a POST request:

{name: "login", kind: "WebService",
  url: "http://myserver.com/login",
  method: "POST",
  onSuccess: "loginSuccess",
  onFailure: "loginFailure"}

this.$.login.call({username: "foo", password: "bar"});

Note: WebService requests to fetch local files will fail when using the Google Chrome browser unless you start the browser with the --allow-file-access-from-files command-line switch.

Published Properties