Before we go deep into the technology lets have a refresh with traditional web-processing,Ajax web-processing
Traditional web-processing:
----------------------------------
With traditional web pages and applications, every time a user clicks on something, the browser sends a request to the server, and the server responds with a whole new page.
Now ,lets see the Ajax web-processing
Using Ajax, your pages and applications only ask the server for what they really need—just the parts of a page that need to change, and just the parts that the server has to provide.
now,lets write a simple Ajax program that gives current time and date of your machine.(In order to work with Ajax you need to have a basic knowledge on javascript,hrml,any one scripting language(php/jsp/asp...etc).
Html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax Data base</title>
<script type="text/javascript">
var x;
function demo()
{
if(window.XMLHttpRequest)
{
x=new XMLHttpRequest();
}
else
{
x=new ActiveXObject("Microsoft.XMLHTTP");
}
x.onreadystatechange=function()
{
if(x.readyState==4 && x.status==200)
{
document.getElementById("dat").innerHTML=x.responseText;
}
}
x.open("GET","database.jsp", true);
x.send();
}
</script>
</head>
<body>
<center>
<h5>THis is a demo on database
</h5></center>
<button type="button" onclick="demo()">GetDate</button>
<div id="dat"></div>
</body>
</html>
This looks like new to every one,but it is simple to understand.
1.An AJAX code is written inside a javascript function.
2.In order to connect this page to the server we need a request object,you will get this by using var x=new XMLHttpRequest(); but the problem is ,this will work only for browsers like mozilla ,netscape,safari...etc [doesn't work with internet explorer].
3.to work with internet explorer we need an ActiveXobject as show in program.
4.Now we have an object of request so,if there is any changes occured(user clicks on something) send that changes by using request object.
5.finally we have to specify to which page of server request will go? we do this by send("GET","database.jsp",null) method.
database,jsp
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
out.print(new Date());
%>
output:
on clicking get data you will get(observe that your page will not loaded at this moment )
Traditional web-processing:
----------------------------------
With traditional web pages and applications, every time a user clicks on something, the browser sends a request to the server, and the server responds with a whole new page.
Using Ajax, your pages and applications only ask the server for what they really need—just the parts of a page that need to change, and just the parts that the server has to provide.
now,lets write a simple Ajax program that gives current time and date of your machine.(In order to work with Ajax you need to have a basic knowledge on javascript,hrml,any one scripting language(php/jsp/asp...etc).
Html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax Data base</title>
<script type="text/javascript">
var x;
function demo()
{
if(window.XMLHttpRequest)
{
x=new XMLHttpRequest();
}
else
{
x=new ActiveXObject("Microsoft.XMLHTTP");
}
x.onreadystatechange=function()
{
if(x.readyState==4 && x.status==200)
{
document.getElementById("dat").innerHTML=x.responseText;
}
}
x.open("GET","database.jsp", true);
x.send();
}
</script>
</head>
<body>
<center>
<h5>THis is a demo on database
</h5></center>
<button type="button" onclick="demo()">GetDate</button>
<div id="dat"></div>
</body>
</html>
This looks like new to every one,but it is simple to understand.
1.An AJAX code is written inside a javascript function.
2.In order to connect this page to the server we need a request object,you will get this by using var x=new XMLHttpRequest(); but the problem is ,this will work only for browsers like mozilla ,netscape,safari...etc [doesn't work with internet explorer].
3.to work with internet explorer we need an ActiveXobject as show in program.
4.Now we have an object of request so,if there is any changes occured(user clicks on something) send that changes by using request object.
5.finally we have to specify to which page of server request will go? we do this by send("GET","database.jsp",null) method.
database,jsp
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
out.print(new Date());
%>
output:
Không có nhận xét nào:
Đăng nhận xét