HTML and CSS Reference
In-Depth Information
The Ajax Program
EXAMPLE 18.13
<html>
<head><title>Get method Ajax form</title>
<link rel="stylesheet" type="text/css" href="ajaxGETstyle.css" />
<script type="text/javascript" src="ajaxCreateRequest.js ">
</script>
<script type="text/javascript">
1
function goAjax(){
var ajaxRequest=createRequest() ;
if(ajaxRequest != false){
2
ajaxRequest.onreadystatechange = function(){
3
var textObj=document.getElementById("message") ;
if(ajaxRequest.readyState == 4){
//alert(ajaxRequest.status);
if(ajaxRequest.status==200){
4
textObj.innerHTML=ajaxRequest.responseText;
}
}
else if(ajaxRequest.status == 404){
textObj.innerHTML="Resource unavailable";
}
else{
textObj.innerHTML="Error!!";
}
}
var namevalue=
5 encodeURIComponent(document.getElementById("username").value)
var phonevalue=
encodeURIComponent(document.getElementById("userphone").value)
6 ajaxRequest.open("GET","http://localhost/ajaxform.php?username="+
namevalue+"&userphone="+phonevalue, true);
ajaxRequest.setRequestHeader('If-Modified-Since',
'Sat, 03 Jan 2010 00:00:00GMT');
7 ajaxRequest.send(null);
}
else{alert("Browser encountered a problem!");}
} // End goAjax()function
</script>
</head>
<body>
8
<form action="" >
Your name: <input type="text" size=50 id=username
name='username' /> <br />
<p>
Your phone: <input type="text" size=50 id=userphone
name="userphone" /><br />
Search WWH ::




Custom Search