AF
HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
AF
1. Feel Free to ask and submit anything on Anyforum.in and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.



javascript-ajax: What is Ajax ?

Please give me a simple example of AJAX with source code .

javascript x 33
ajax x 7
Posted On : 2013-12-03 18:50:51.0
profile Rishi Kumar - anyforum.in Rishi Kumar
523188250048
up-rate
10
down-rate

Answers


AJAX is the acronym of Asynchronous javascript and XML. It´s used to load the page content asynchronously. It prevents the pages to load it again and again, If we want to modify, get the content in a part of a web page, we can use ajax. We don´t need to load the whole page again. So in this way it improves the performance and user experience.
Let´s see the simple example of Ajax, in which we search the name input by a text-field from the database. In following example we are using JDBC to connect the application to the database. In AJAX we send the request to a page to get the content of a part of a web page. In this example we are going to create two pages:
1. HTML Page having Ajax Code.
2. JSP Page having JDBC code.

1) Welcome.html :
--------------------------

<html>
<head>
<script>
var request;
function sendInfo()
{
var v=document.myform.userName.value;
var url="index.jsp?val="+v;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}

try
{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}
catch(e){alert("Unable to connect to server");}
}

function getInfo(){
if(request.readyState==1 || request.readyState==2 || request.readyState==3){
document.getElementById(´location´).innerHTML="<h3>Your request is being processed</h3>";
}
if(request.readyState==4){
var val=request.responseText;
document.getElementById(´location´).innerHTML=val;
}
}

</script>
</head>

<body>
<marquee><h1>This is an example of ajax</h1></marquee>

<form name="myform">
Search:<input type="text" name="userName" onkeyup="sendInfo()">
<div id="location"></div>
</form>

</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------

2) index.jsp :
-------------------
<%@ page import="java.sql.*" %>
<%
String n=request.getParameter("val");
if(n.length()>0){
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/anyforum","username","password");

PreparedStatement ps=con.prepareStatement("select * from student where name like ´"n+"%´");
ResultSet rs=ps.executeQuery();
out.print("<table border=´5´ cellspacing=5 cellpadding=2>");
while(rs.next()){
out.print("user name already exist");
}
out.print("</table>");

con.close();
}catch(Exception e){e.printStackTrace();}
}//end of if
%>
--------------------------------------------------------------------------------------------------------------------------------------
As in Welcome.html :
request.onreadystatechange=getInfo : call the getInfo function defined in java script on each state change.
request.open("GET",url,true) : GET is the request method if you want to use POST request, replace GET by POST.
request.send() : sends the request to the url defined in request.open("GET",url,true)
request.readyState : returns the integer value which may vary between 1 to 4.
1 means request has been sent.
2 means request has been received.
3 means response has been sent after processing the request.
4 means response has been received.

Posted On : 2013-12-03 19:39:08
Satisfied : 2 Yes  0 No
profile Garima Gupta - anyforum.in Garima Gupta
596129560202
Reply This Thread
up-rate
8
down-rate



Post Answer
Please Login First to Post Answer: Login login with facebook - anyforum.in