Lets see how we can make server side call using pure javacscript. Below is a javascript class to make http GET request using XMLHttpRequest() object.
var HttpClient = function() { this.get = function(url, callback) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState == 4 && httpRequest.status == 200) callback(httpRequest.responseText); } httpRequest.open( "GET", url, true ); httpRequest.send( null ); } }
Usage: use httpClient object to make get call with the url passing parameter.
var client = new HttpClient(); client.get('/Home/GetItem?id=4', function(response) { // do something with response });
Controller method: In MVC controller create ActionResult method with HttpGet attribute to receive httpGet call with integer parameter id.
[HttpGet] public ActionResult GetItem(int id) { var itemId = id; //do some stuff return View(); }
Similarly we can add post function to above class, we have to set request header for the Content-type and pass data while making httpPost request.
this.post = function (url, callback, data) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState == 4 && httpRequest.status == 200) callback(httpRequest.responseText); } httpRequest.open("POST", url, true); httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); httpRequest.send(data); }
Usage: passing parameter, here we have set Id value 4 to send data with POST request. On sucess show some message.
var data = "Id=" + 4; client.post('/Home/GetItem', function (response) { console.log('done successfully.'); }, data);
Controller Method: In MVC controller create same Action method above GetItem with HttpPost attribute. To get the data use Request.Form with the parameter name to receive send data.
[HttpPost] public ActionResult GetItem() { var itemId = Request.Form["Id"]; //do some stuff return View(); }
We have learn above how to send httpGet and httpPost request using simple javascript. It can be used while loading a widget or container data.