jQuery AJAX Examples

Basically...

Send GET, POST, PUT, and DELETE requests via AJAX to the Rollcall server. These four HTTP request methods correspond to the four CRUD verbs (Create = POST, Retrieve = GET, Update = PUT, Delete = DELETE). The requests are made to Rollcall's resource collection URLs.

Have a look at the Wikipedia article on REST (Representational State Transfer) if you're not familiar with this style of web services.

But first, a major caveat (Same Origin Policy)

Due to browser security constraints, you cannot easily fetch data via JavaScript from a URL on a different domain/port than the one the page is being served from. For example, if Rollcall is at http://rollcall.example.org/ and the web page with your JavaScript is on http://www.example.org/, the browser will block AJAX requests to the Rollcall URL. See http://en.wikipedia.org/wiki/Same_origin_policy for details.

There are two possible workarounds:

• Put Rollcall behind a Reverse Proxy (for example via Apache's mod_proxy). This is the preferred method, but the setup is too involved to explain here.
• Use JSONP for your requests.

If you go the JSONP route note that since JSONP requests are always GETs, you must fake POST, PUT, and DELETE requests by specifying the request method you actually want to use in a special _method parameter. For example, to make a POST request to http://rollcall.example.org/users.json, you would actually make a GET request to http://rollcall.example.org/users/users.json?_method=POST.

Examples

To retrieve a User with ID 5:

Plain JSON (i.e. via Reverse Proxy)	JSONP
```js jQuery.ajax({ url: '/users/5.json', success: function(data) { alert('User '+data.user.id+' is '+data.user.username+'!') } }) ```	```js jQuery.ajax({ url: 'http://rollcall.example.org/users/5.json', dataType: 'jsonp', success: function(data) { alert('User '+data.user.id+' is '+data.user.username+'!') } }) ```

You can also retrieve a User by their username, like this:

Plain JSON (i.e. via Reverse Proxy)	JSONP
```js jQuery.ajax({ url: '/users/jsmith.json', success: function(data) { // do something with the user data } }) ```	```js jQuery.ajax({ url: 'http://rollcall.example.org/users/jsmith.json', dataType: 'jsonp', success: function(data) { // do something with the user data } }) ```

To create a new User, send a POST request along with the User's data:

Plain JSON (i.e. via Reverse Proxy)	JSONP
```js jQuery.ajax({ url: '/users.json', method: 'POST', data: { user: { username: 'jdoe', display_name: 'John Doe', password: 'secret', kind: 'Instructor', metadata: { 'hair colour': 'Brown' } } }, success: function(data) { alert("User "+data.user.username+" created with ID "+data.user.id+"!") }, error: function(data, statusCode) { alert("ERROR: "+data) } }) ```	```js jQuery.ajax({ url: 'http://rollcall.example.org/users.json', dataType: 'jsonp', data: { _method: 'POST', user: { username: 'jdoe', display_name: 'John Doe', password: 'secret', kind: 'Instructor', metadata: { 'hair colour': 'Brown' } } }, success: function(data) { if (data.error) alert("ERROR: "+data.error) else alert("User "+data.user.username+" created with ID "+data.user.id+"!") } }) ```

To authenticate a user (i.e. start a session for a user):

Plain JSON (i.e. via Reverse Proxy)	JSONP
```js jQuery.ajax({ url: '/sessions.json', method: 'POST', data: { session: { username: 'jdoe', password: 'topsecret' } }, success: function(data) { alert("Authenticated! Your token is: "+data.session.token) }, error: function(data, statusCode) { alert("ERROR: "+data) } }) ```	```js jQuery.ajax({ url: '/sessions.json', data: { _method: 'POST', session: { username: 'jdoe', password: 'topsecret' } }, success: function(data) { if (data.error) alert("ERROR: "+data.error) else alert("Authenticated! Your token is: "+data.session.token) } }) ```

To validate a session token and retrieve user info from the session:

Plain JSON (i.e. via Reverse Proxy)	JSONP
```js jQuery.ajax({ url: '/sessions/validate_token.json', method: 'GET', data: { token: }, success: function(data) { console.log(data.session) console.log(data.session.user) }, error: function(data, statusCode) { alert("ERROR: "+data) } }) ```	```js jQuery.ajax({ url: '/sessions/validate_token.json', dataType: 'jsonp', data: { _method: 'GET', token: }, success: function(data) { if (data.error) alert("ERROR: "+data.error) else alert("Token is valid for user: "+data.session.user.username) } }) ```

For detailed information on all of the available resource URLs and their parameters, have a look at the API Docs.