Main Page
Our main page contains four buttons linked to Javascript functions performing Ajax calls:... <body> <h1>Welcome To REST With Ajax !!!</h1> <button type="button" onclick="RestGet()">GET</button> <button type="button" onclick="RestPut()">PUT</button> <button type="button" onclick="RestPost()">POST</button> <button type="button" onclick="RestDelete()">DELETE</button> </body> ...
Javascript
Our Javascript file contains the four functions:var prefix = "/spring-rest-with-ajax"; var RestGet = function() { $.ajax({ type: 'GET', url: prefix + "/MyData/" + Date.now(), dataType: 'json', async: true, success: function(result) { alert("At " + result.time + ": " + result.message); }, error: function(jqXHR, textStatus, errorThrown) { alert(jqXHR.status + " " + jqXHR.responseText); } }); } var RestPut = function() { var JSONObject= { "time": Date.now(), "message": "User PUT call !!!" }; $.ajax({ type: 'PUT', url: prefix + "/MyData", contentType: "application/json; charset=utf-8", data: JSON.stringify(JSONObject), dataType: 'json', async: true, success: function(result) { alert("At " + result.time + ": " + result.message); }, error: function(jqXHR, textStatus, errorThrown) { alert(jqXHR.status + " " + jqXHR.responseText); } }); } var RestPost = function() { $.ajax({ type: 'POST', url: prefix + "/MyData", dataType: 'json', async: true, success: function(result) { alert("At " + result.time + ": " + result.message); }, error: function(jqXHR, textStatus, errorThrown) { alert(jqXHR.status + " " + jqXHR.responseText); } }); } var RestDelete = function() { $.ajax({ type: 'DELETE', url: prefix + "/MyData/" + Date.now(), dataType: 'json', async: true, success: function(result) { alert("At " + result.time + ": " + result.message); }, error: function(jqXHR, textStatus, errorThrown) { alert(jqXHR.status + " " + jqXHR.responseText); } }); }
Controller
Our controller captures the REST calls and returns a JSON. In a real applications, one would perform CRUD operations rather than returning JSONs:@Controller @RequestMapping(value = "/MyData") public class MyRESTController { @RequestMapping(value="/{time}", method = RequestMethod.GET) public @ResponseBody MyData getMyData( @PathVariable long time) { return new MyData(time, "REST GET Call !!!"); } @RequestMapping(method = RequestMethod.PUT) public @ResponseBody MyData putMyData( @RequestBody MyData md) { return md; } @RequestMapping(method = RequestMethod.POST) public @ResponseBody MyData postMyData() { return new MyData(System.currentTimeMillis(), "REST POST Call !!!"); } @RequestMapping(value="/{time}", method = RequestMethod.DELETE) public @ResponseBody MyData deleteMyData( @PathVariable long time) { return new MyData(time, "REST DELETE Call !!!"); } }
Running The Example
Once compiled, the example can be run with mvn tomcat:run. Then, browse:http://localhost:8585/spring-rest-with-ajax/
The main page will be displayed:
If you click on any button, a pop-up will be displayed:
See here for more about REST • More Spring related posts here.
No comments:
Post a Comment