Journey from Basic to Advance Java: jQuery/Ajax

jQuery:

jQuery is a javascript framework that makes working with the DOM easier by building lots of high level functionality that can be used to search and interact with the DOM. By using we can make Ajax calls.
For used of jQuery we need to include the jquery.js file in our program. This file you can download from google.

AJAX:

AJAX is a denomination of several programming techniques. AJAX is not a specific technology but a combination of varying technologies to provide a new functionality. AJAX is not a new programming language, but a new way to use existing standards. Whenever you request a new set of data from web site, it clears the whole page and loads the new one. AJAX is used to circumvent this behavior and allow new data to be retrieved without modifying the whole page.

ajax is an asynchronous.
Its asynchronous in that it doesn't lock up the browser. If you fire an Ajax request, the user can still work while the request is waiting for a response. When the server returns the response, a callback runs to handle it.
You can make the xmlhttprequest synchronous if you want, and if you do, the browser locks up while the request is outstanding (so most of the time this is innapropriate)

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Differentiate Between jQuery and AJAX are.

jQuery is a lightweight javascript library that ease the writting of javascript by levelling the differences between browsers and giving a common, simplified syntax. jQuery performs some commonly desired things so that author's don't need to reinvent some common wheels. jQuery focuses more on interactions with HTML elements. jQuery simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. jQuery Libraries can be downloaded jquery.com.

jQuery handles Front End tasks while AJAX handles backend (server calls)

jQuery does all the work on the front end, therefore you would need to have a full understanding of it in order to properly set-up your page. You would not need to learn the exact mechanisms of AJAX in order to utilize it as jQuery gives you an AJAX command to retrieve whichever data you need from the server.

AJAX and jQuery are often used together

AJAX can’t be utilized with simple HTML since HTML doesn’t allow the page to be changed after it has fully loaded. In order to use AJAX, you would need a client side scripting language that allows you to detect the actions of the user and modify elements on the page accordingly. jQuery does that exactly, that is why both are often used together to present web pages that a user can interact with easily without repetitive loading.

Disadvantages with AJAX and jQuery

Although the use of jQuery and AJAX makes the browsing experience a lot better for the user, the effect to the server hosting these files are not as desirable. Every time you make another AJAX request, a new connection to the server is made. Too many connections can sometimes be difficult for the server to cope with. Most hosting companies have made steps in order to prevent overloads since jQuery and AJAX are truly here to stay.

In short.
1. jQuery is a lightweight client side scripting library while AJAX is a combination of technologies used to provide asynchronous data transfer.
2. jQuery and AJAX are often used in conjunction with each other.
3. jQuery is primarily used to modify data on the screen dynamically and it uses AJAX to retrieve data that it needs without changing the current state of the displayed page.
4. Heavy usage of AJAX functions often cause server overload due to the greater number of connections made.

1.How to hide your label using jquery.

following example includes the jquery.js file in to html file
<html>
< head>
<script src="jquery.js"></script>
</head>
</html>
Now following example for hiding the label .
<html>
< head>
<script src="jquery.js"></script>
<script>
Function myfun()
{
$(“#lab1”).hide();

}
</head>
<body>
<label name=”lab1” id=”lab1” onclick=”myfun()”>hi</lable>
</html>

The “$” symbol is the indication of jquery and “#” symbol is used before the id of element. So in above example “#lab1” refer label element.

2)Dynamically select option of select tag

$(“#material1 option:contains(<%=mt%>)”).attr(‘selected’, ‘selected’);
OR
$('# material1 option[value="<%= mt %>"]').attr("selected", "selected");

This is above example the ‘mt’ is jsp variable and I am checking that if the jsp value is exist in select tag then its set else its not set.
The second way you can select option value comparing the option value.
Some time u generate dynamically select tag and after next you applying above code for select option tag value but it will not work because some time your loading select tag its takes time so next statement will execute that time u need to execute code for select option tag value after some time so you need to write following way.

setTimeout(function()
    {
        $("#"+mod+" option:contains(<%=mo%>)").attr('selected', 'selected');
    }, 100);

This setTimeOut() will execute inside statement after 100 secods.

5)for cheking value is empty or not using jquery and if its empty then set focus on specific element using id.

Function fempty()
{
if((($("#cproduct").val())==""))
{ alert("Please Select Product Name.!");
$('#cproduct').focus();
}
}
The “cprodudt” is the id of your form element.
Eg.
<select name=”cproduct” id=”cproduct” onblur=”fempty()”>
<option value=””>Select</option>
<option value=”Gujarat”></option>
<option value=”Karnataka”>Karanataka</option>
</select>
I called the above function when user losses focus from the select tag.
if user is not select value of option then I will display message and set the focus again there only.

6)dynamically change the action value of form and submitting.

Function myfun()
{
window.document.frmbar.action="Logout.jsp";
window.document.frmbar.submit();
}
The above “frmbar” is the form name .now Just u need to call the above function. Then it will call the Logout.jsp file.

7)how to fill select option tag value base on other select tag using jquery in jsp page.

->first you need to create jsp file for establish connection with database.
Connection.jsp
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*" %>
<%!
    Connection con;
    String sql="";
    ResultSet rs;
    Statement stmt;
%>

<%
   try
    {
         Class.forName("com.mysql.jdbc.Driver").newInstance();
         con = DriverManager.getConnection("jdbc:mysql://localhost/cricketdb", "root", "");
         stmt=con.createStatement();


   }
catch(SQLException sa)
{
     out.println("Error loading driver:" + sa.getMessage());
}
%>
->second step create jsp file which contain select tag
Cricket.jsp
<html>
<head>
    <title>Cricket View Data</title>
<script src="jquery.js"></script>
<script>

    function fillplayer()
    {

        var countryv=document.getElementById("country").value;

        var url="connectCricket.jsp?country="+countryv;

        $.ajax({
            url:url,
            type:"POST",
            success:function(results)
            {
                alert(results);
                document.getElementById('player').innerHTML=results;

            },
            error:function(data)
            {
                alert('error'+data);
            }
            });

    }
    </script>
    </head>
    <body>
    <form name="nm">
    select Country<select name="country" id="country" onchange="fillplayer()">
            <option value="">Select</option>
            <option value="india">india</option>
            <option value="pakistan">Pakistan</option>
            </select>
            <br/>


            <select name="player" id="player">
                <option>Select players</option>
            </select>

    </form>
    </body>
    </html>

->Third is when user change country name and it request to this file and bring data from database and send response.
connectCricket.jsp
<%@ include file="connect.jsp"%>
<%
   String country=request.getParameter("country");


   sql="select *from players where country='"+country+"'";
   rs=stmt.executeQuery(sql);

   String buffer="";
   while(rs.next())
   {

       buffer=buffer+"<option value='"+rs.getString("pname")+"'>"+rs.getString("pname")+"</option>";
   }
   out.println(buffer);
%>
Here whatever you print it will store in response object.
for above example you need to create database name cricketdb and table names players which have follwoing fields.
country varchar2(10)
pname varchar2(10))
.
8.How to remove white spaces from the string?
assume you have following variable which contain white space then replace function of JavaScript that replaces space with blank
str="    how"
str=str.replace(/\s/g,'');
now your str contain
str="how"

9.How to extract digits from string and which is available at end of string?in="row1";
num=in.match(/\d+$/);
now this num will contains the 1
how to convert String in to array using delimeter
res="hi,how,are";
s=new Array;
s = res.split(",");

10.How to convert String in to array using delimiter?
res="hi,how,are";
s=new Array;
s = res.split(",");

now your s is an array which contains the values
s[0]="hi"
s[1]="how"
s[2]="are"

11.How to used try and catch block in javascript?
         try
           {
               //code to be monitor

            }
            catch(err)
            {
            alert("erro"+err);

            }
now put the code inside try block which statement you want to monitor and when any error will occurs it will execute catch block.
This above example generate error dividebyzero so its display erro message

Journey from Basic to Advance Java

Pages

jQuery/Ajax