AJAXExample : Is collection of some good AJAX Example.AjaxDatabaseExample.html:
<html>
<head>
<script type="text/javascript">
function showName(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getName.jsp?q="+str,true);
xmlhttp.send();
}
script>
head>
<body>
<form action="">
<select name="name" onchange="showName(this.value)">
<option value="">Select ID:option>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
form>
<br />
<div id="txtHint">Details of the ID:div>
body>
html>
AJAXInbuildFunction.html:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==2)
{
alert("2");
xmlhttp.responseText = "Server Connection established";
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
if (xmlhttp.readyState==3)
{
alert("3");
xmlhttp.responseText = "Request received";
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
script>
head>
<body>
<div id="myDiv"><h2>Let AJAX change dddddddddddv this texth2>div>
<button type="button" onclick="myFunction()">Change Contentbutton>
body>
html>
cd_catalog.xml:
<XML>
<ARTIST>This is test of Ajax for XML.
This is test of Ajax for XML2.
ARTIST>
<CUSTID>Cust ID 1CUSTID>
<ADDID>Address 1ADDID>
<TELEPHONEID>Telephone 1TELEPHONEID>
XML>
FirstAjaxPage.html:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
script>
head>
<body>
<div id="myDiv"><h2>Let AJAX change siddhu this texth2>div>
<button type="button" onclick="loadXMLDoc()">Change Contentbutton>
body>
html>
gethint.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title heretitle>
head>
<body>
<%
String inputString = (String)request.getParameter("q");
System.out.println("Value of inputString is:"+inputString);
String ans = "";
if(inputString.contains("s"))
{
ans = "siddharatha";
}
if(inputString.contains("d"))
{
ans = "dhumale";
}
if (ans.equals(""))
{
response.getWriter().write("no suggestion");
}
else
{
response.getWriter().write(ans);
}
System.out.println("Value of ans is:"+ans);
%>
body>
html>
getName.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title heretitle>
head>
<body>
<%
String inputString = (String)request.getParameter("q");
System.out.println("Value of inputString is:"+inputString);
String ans = "";
if(inputString.contains("s"))
{
ans = "siddharatha";
}
if(inputString.contains("d"))
{
ans = "dhumale";
}
if (ans.equals(""))
{
response.getWriter().write("no suggestion");
}
else
{
response.getWriter().write(ans);
}
System.out.println("Value of ans is:"+ans);
%>
body>
html>
RunTimeText.html:
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.jsp?q="+str,true);
xmlhttp.send();
}
script>
head>
<body>
<h3>Start typing a name in the input field below:h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
form>
<p>Suggestions: <span id="txtHint">span>p>
body>
html>
Test.html:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
var txt="";
var txt1="";
var txt2="";
var txt3="";
x=xmlDoc.getElementsByTagName("ARTIST");
y=xmlDoc.getElementsByTagName("CUSTID");
z=xmlDoc.getElementsByTagName("ADDID");
a=xmlDoc.getElementsByTagName("TELEPHONEID");
alert("x.length:"+x.length);
alert("y.length:"+y.length);
alert("z.length:"+z.length);
alert("a.length:"+a.length);
for (i=0;i
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
alert("x["+i+"]:"+txt);
}
for (i=0;i
{
txt1=txt + y[i].childNodes[0].nodeValue + "
";
alert("y["+i+"]:"+txt1);
}
for (i=0;i
{
txt2=txt2 + z[i].childNodes[0].nodeValue + "
";
alert("z["+i+"]:"+txt2);
}
for (i=0;i
{
txt3=txt3 + a[i].childNodes[0].nodeValue + "
";
alert("a["+i+"]:"+txt3);
}
document.getElementById("myDiv").innerHTML=txt+txt1+txt2+txt3;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
script>
head>
<body>
<h2>My CD Collection:h2>
<div id="myDiv">div>
<button type="button" onclick="loadXMLDoc()">Get my CD
collectionbutton>
body>
html>
TwoAjaxCall.html:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.jsp?q="+str,true);
xmlhttp.send();
}
script>
head>
<body>
<div id="myDiv"><h2>Let AJAX change siddhu this texth2>div>
<button type="button" onclick="loadXMLDoc()">Change Contentbutton>
<h3>Start typing a name in the input field below:h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
form>
<p>Suggestions: <span id="txtHint">span>p>
body>
html>
No comments:
Post a Comment