Skip to main content

Development

Introduction to jQuery Ajax

Concept

This blog is intended for novice to understand jQuery Ajax functionality and its integration with servlet by creating a simple project.

 What is JQuery Ajax?

Ajax (Asynchronous Java Script and XML) enables exchanging data between client and server and updating parts of web page without reloading the entire page. jQuery provides easy to use API for Ajax. Data types, text, html, xml, json, jsonp and script are handled.

The following methods are available in jQuery framework to make arbitrary Ajax requests:

          Method                                         Description
 jQuery.ajax() Performs asynchronous HTTP (Ajax) request
 jQuery.ajaxPrefilter() Handles custom Ajax options or modifies existing options before each request is sent and before being processed by $.ajax()
 jQuery.ajaxSetup() Sets default values for Ajax requests. Its use is not recommended
 jQuery.ajaxTransport() Creates an object and handles actual transmission of Ajax data

 

The sample program elucidates how to construct jQuery Ajax request and implement a servlet. In the example, we populate a table dynamically using ajax every time a name is entered in a textbox.

Requisites for Development Environment set up:

  1. JDK 7.0_60
  2. Tomcat v7.0
  3. Eclipse Java EE IDE for Web Developer Luna (4.4.0)
  4. jquery-2.1.1.min.js

Steps to implement:

  1. Create a dynamic web project with project structure as shown below.                                                                                                      1
  1. Create a html page, AjaxJquery.html with textbox, button and table.                                                                                                                            2
  1. Next, create $.ajax() request to send name in asynchronous HTTP GET request to JqueryServlet.

It encompasses following properties:

         Parameter                                              Description
 url  String containing the url to which the request is sent (mandatory)
 method  Specifies the HTTP method to use for the request (‘POST’, ‘GET’, ‘PUT’)
 data  Data to be sent to the server. It can be plain object ({key1: ‘value1’, key2: ‘value2’}),  String (key1=value1&key2=value2) or Array
 done  Method that is called if the request succeeds. It accepts one or more arguments, all of which are functions. Each callback function takes 3 arguments, the data returned from the server, a string describing the status and the jqXHR (jQuery XML Http Request) object. Other callbacks supported include fail and always
 datatype  Can be text, html, xml, json, jsonp and script. Depending on the data type set the response will be preprocessed before being passed to the success handler

 

3

  1. Create HttpServlet class, JqueryServlet.java, overriding doGet() method to receive request and send response to client.                                                                                                                                                                                                                                4

 

  1. Map the servlet in web.xml, here, com.servlet.JqueryServlet is mapped to /JqueryServlet/*.                                                                                           5
  1. Deploy, run the application and observe the output.

Output :

6

References:

http://api.jquery.com/jQuery.ajax/

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Krithika Sundaram

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram