How to send ajax request from jsp to server using jQuery

On:

Ajax Request…What?

Ajax stands for Asynchronous Javascript and XML. It is a client side technology which is used for creating dynamic web pages. Its main use is in scenarios where you want to send some data from the browser to the server and / or fetch data from the server Without Page Refresh. That’s right…without page refresh.

With ajax you don’t need to load the page again and again to show the refreshed data coming from the server. It is also used when you need to refresh a particular area of your web page. Refresh here means changing the content of a particular area.
For Example, on Facebook page you might have seen Notifications changing automatically on the side bar while you are on the same page. That is ajax.

Sending an ajax request from jsp to a server url involves the following code:

Let’s say we have a button on whose click we have to send the request. On this button’s click we call a function called sendRequest:

function sendRequest(){
//jQuery syntax for sending ajax request
$.ajax({
//options follow
url:'receiveRequest', //the url at which you want to send request
data:'id='+1 //the request parameters which are to be sent to server.
type:'Post', //type of request. Possible values are Get, Post, Put, Delete
success: function(){ //callback function to be invoked when the request is successfully returns
alert(“Request Successful”);
});

Details :
ajax call is initiated by jQuery’s ajax() method. There are various options available in this method but required ones have been used in the above code sample. Brief explanation of those options follows :

  • url – Every request has a url which handles the incoming request and returns the response. This url is provided in the url option.
  • data – A request may have some optional parameters associated with it. For example, if you are validating that a user with a given email id already exists in the system, then you should send that e-mail id along with the request for validation. This e-mail id will be sent as a parameter along with the request. The parameter to be sent along with the request is given in this option along with the name of the parameter. The value sent from the browser will be retrieved at the server using this parameter name. A request with parameter email will look like : http://myUrl?email=connect@codippa.com. Where email is the name of the parameter.
  • type – Indicates the type of http request. Possible types include GET, POST, DELETE, PUT.
  • success – Callback method which is automatically invoked when the request successfully returns from the server. This method may be used to change the content of the page using the data returned from the server.

 

Let’s tweak in :

  1. Ajax call is always written in javascript and so it is invoked from client side.
  2. A request is considered successful when it returns a response code of 200.
  3. If the url specified in the request does not exist on the server, then a response code of 404 is returned.
  4. If the server method returns a response back to jsp (or any other view) then it may be easily retrieved in the success callback method. You need to add an argument in the method signature as:
    <>success: function(response){}
  5. The response argument in the success callback method contains the response sent by the server.
  6. There are several options available in jQuery for ajax request such as complete, async, timeout etc. For complete list of options and other details, check this out.
  7. If the server is using Spring controller then the controller method for above request would be:
  // Specifies the url and the method type. They should match the request
  //options on jsp else this would never be called
  @RequestMapping(value=“receiveRequest”, method=RequestMethod.POST)
  // Request from the browser sends a parameter given in the 'data' option of the ajax request
  public void receiver(@RequestParam("id") String id){}

Was this post helpful?? Great!!! Make it helpful for others too. Share it…

Leave a Reply