Edit on GitHub

JavaScript Client

Of course, you’re able to call your ServiceStack webservice from your ajax and JavaScript clients, too.

Using TypeScript

The best tooling available for Ajax clients is to use ServiceStack’s integrated TypeScript support where you can use the TypeScript JsonServiceClient with TypeScript Add ServiceStack Reference DTO’s to get the same productive end-to-end Typed APIs available in ServiceStack’s Typed .NET Clients, e.g:

var client = new JsonServiceClient(baseUrl);

var request = new Hello();
request.Name = "World";

client.get(request)
  .then(r => console.log(r.Result));

The generated JavaScript of the TypeScript Service Client has no dependencies other than fetch-everywhere polyfill for W3C’s fetch available:

Hosted on unpkg.com CDN:

Using TypeScript JsonServiceClient in JavaScript projects

Despite its name the TypeScript JsonServiceClient can also be used in non-TypeScript projects. The /@servicestack/client follows the recommended guidance for TypeScript modules which doesn’t bundle any TypeScript .ts source files, just the generated index.js and index.d.ts Type definitions which can be imported the same way in both JavaScript and TypeScript npm projects as any other module, e.g:

import { JsonServiceClient } from "@servicestack/client";

Which can then be used with the generated DTOs from your API at /types/typescript that can either be downloaded and saved to a local file e.g. dtos.ts or preferably downloaded using the [@servicestack/cli][4] npm tool:

$ npm install -g @servicestack/cli

Then download the DTOs of a remote ServiceStack API with:

$ typescript-ref http://yourdomain.org dtos.ts

For JavaScript projects that haven’t configured transpilation of TypeScript, you’ll need to use TypeScript to generate the dtos.js JavaScript version which can be used instead:

$ tsc dtos.ts 

Use the –module compiler flag if needing to generate a specific module version, e.g:

$ tsc -m ES6 dtos.ts

The generated dtos.js can then be used with the JsonServiceClient to provide a succinct Typed API:

import { GetConfig } from './dtos';

let client = new JsonServiceClient('/');

let response = await client.get(new GetConfig());

Updating DTOs

To update your generated DTOs when your server API changes, run typescript-ref without any arguments:

$ typescript-ref 

Which will update to the latest version of dtos.ts. This can be easily automated with an [npm script][5], e.g:

{
  "scripts": {
    "dtos": "cd path/to/dtos && typescript-ref && tsc -m ES6 dtos.ts",
    }
}

Which will let you update and compile the dtos with:

$ npm run dtos

The [TechStacks][6] (Vue/Nuxt) and [React Native Mobile App][7] (React) are examples of JavaScript-only projects using the TypeScript JsonServiceClient in this way.

jQuery JsonServiceClient

We also provide our older jQuery JsonServiceClient which mimics the .NET Clients in functionality that we make use of in our Redis Admin UI and suitable for use when needing to support older browsers without W3C’s fetch or a polyfill:

Although most dynamic languages like JavaScript already include support for HTTP and JSON where in most cases it’s easier to just use the libraries already provided. Here are a couple of examples from Backbones Todos and Redis StackOverflow that uses jQuery to talk to back-end ServiceStack JSON services:

Using jQuery Ajax APIs:

$.getJSON("http://localhost/Backbone.Todo/todos", function(todos) {
    alert(todos.length == 1);
});

$.post("questions", { 
  UserId: authUser.Id, Title: title, Content: body, Tags: dtoTags 
}, refresh);

JSV Service Client

In our pursuit to provide the fastest end-to-end communication we’ve also developed a JsvServiceClient in JavaScript that uses the fast JSV Format:

JSV is marginally faster than safe JSON in modern browsers (marginally slower than Eval) but because of the poor JS and String Performance in IE7/8 it performs over 20x slower than IE’s native eval().