Scribd
Upload
167 views13 pages

Ajax Asynchronous Javascript and XML: Testajax - HTM

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without interfering with the display and behavior of the existing page. It uses XMLHttpRequest object to send and receive data from a web server, and can retrieve data from the server as it is needed, without compromising the user experience. The examples demonstrate how AJAX can be used to retrieve live data and update specific elements on an HTML page without reloading.

Uploaded by

angel.acena
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX or read online on Scribd
167 views13 pages

Ajax Asynchronous Javascript and XML: Testajax - HTM

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without interfering with the display and behavior of the existing page. It uses XMLHttpRequest object to send and receive data from a web server, and can retrieve data from the server as it is needed, without compromising the user experience. The examples demonstrate how AJAX can be used to retrieve live data and update specific elements on an HTML page without reloading.

Uploaded by

angel.acena
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX or read online on Scribd
You are on page 1/ 13

AJAX = Asynchronous JavaScript and XML

testAjax.htm
<html>
<body>

<script type="text/javascript">

function ajaxFunction() {

var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari
xmlHttp=newXMLHttpRequest();
}
catch(e) { // Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}

</script>
<form name="myForm">
Nombre: <input type="text" onkeyup="ajaxFunction();" name="username" />
Hora: <input type="text" name="time" />
</form></body>
</html>

Time.asp

<%
response.expires=-1
response.write(time)
%>
clientHint.js

var xmlHttp

function showHint(str) {

if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();

if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}

var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Ajax.html

<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Ajax.asp

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"'get the q parameter from URL
q=ucase(request.querystring("q"))'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if'Output "no suggestion" if no hint were found or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX Database Example

Ajax.html

<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>
</html>
selectCustomer.js

var xmlHttp

function showCustomer(str) {
xmlHttp=GetXmlHttpObject();

if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;}
var url="getcustomer.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject() {
var xmlHttp=null;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
getCustomer.asp

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop

response.write("</table>")
%>
Otro ejemplo

Ajax.html

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
Selectcd.js

var xmlHttp
function showCD(str) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
var url="getcd.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject() {
var xmlHttp=null;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Getcd.asp

<%
response.expires=-1
q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes


for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%>

Cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>


<!-- Edited by XMLSpy® -->
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>

You might also like