Tuesday, July 06, 2010

AJAXExample - Collection of some Good AJAX Example

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: