See if you can modify the code of Listings 17.1 and 17.3 to present a message to
ID: 3878625 • Letter: S
Question
See if you can modify the code of Listings 17.1 and 17.3 to present a message to the user while waiting for an Ajax request to complete.
17.1
function getXMLHttpRequest()
{
try {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
catch(e) {
return new XMLHttpRequest();
}
}
function doAjax( url, query, callback, reqtype, getxml)
{
var myreq = getXMLHttpRequest();
myreq.onreadystatechange = function()
{
if( myreq.readyState == 4)
{
if( myreq.status == 200)
{
var item = myreq.responseText;
if( getxml == 1) item = myreq.responseXML;
eval(callback + '( item)');
}
}
}
if(reqtype.toUpperCase() == "POST")
{
requestPOST( url, query, myreq);
} else {
requestGET(url, query, myreq);
}
}
function requestGET(url, query, req)
{
var myRandom = parseInt(Math.random()* 99999999);
if( query == '')
{ var callUrl = url + '?rand=' + myRandom;
} else { var callUrl = url + '?' + query + '&rand=' + myRandom;
}
req.open("GET", callUrl, true);
req.send( null);
}
function requestPOST(url, query, req)
{
req.open("POST", url, true);
req.setRequestHeader(' Content-Type', 'application/ x-www-form- urlencoded');
req.send(query);
17.3
<!DOCTYPE html>
<html>
<head>
<title> Keywords Grabber </title>
<script src="myAjaxLib.js"></script>
<script>
function display(content)
{
document.getElementById("displaydiv").innerHTML = content;
}
window.onload = function()
{
document.getElementById("btn1").onclick = function()
{
var url = document.getElementById(" txt1").value;
doAjax("metatags.php", "url =" + url, "display", "post", 0);
}
}
</script>
</head>
<body>
http://<input type ="text" id ="txt1" value =""/>
<input type ="button" id ="btn1" value ="Get Keywords" />
<h3> Keywords Received: </h3>
<div id ="displaydiv"></div>
</body>
</html>
Explanation / Answer
function getXMLHttpRequest()
{
try {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
catch(e) {
return new XMLHttpRequest();
}
}
function doAjax( url, query, callback, reqtype, getxml)
{
var myreq = getXMLHttpRequest();
myreq.onreadystatechange = function()
{
//this is the place where you check for ready state and status in a while loop and display the message
while(myreq.readyState !== 4 || myreq.status !== 200){
document.getElementById("message").html("Response loading. Please wait for some time.");
}
//after it comes out of the loop, you can remove the message or display some other message.
document.getElementById("message").html("");
if( myreq.readyState == 4)
{
if( myreq.status == 200)
{
var item = myreq.responseText;
if( getxml == 1) item = myreq.responseXML;
eval(callback + '( item)');
}
}
}
if(reqtype.toUpperCase() == "POST")
{
requestPOST( url, query, myreq);
} else {
requestGET(url, query, myreq);
}
}
function requestGET(url, query, req)
{
var myRandom = parseInt(Math.random()* 99999999);
if( query == '')
{ var callUrl = url + '?rand=' + myRandom;
} else { var callUrl = url + '?' + query + '&rand=' + myRandom;
}
req.open("GET", callUrl, true);
req.send( null);
}
function requestPOST(url, query, req)
{
req.open("POST", url, true);
req.setRequestHeader(' Content-Type', 'application/ x-www-form- urlencoded');
req.send(query);
17.3
<!DOCTYPE html>
<html>
<head>
<title> Keywords Grabber </title>
<script src="myAjaxLib.js"></script>
<script>
function display(content)
{
document.getElementById("displaydiv").innerHTML = content;
}
window.onload = function()
{
document.getElementById("btn1").onclick = function()
{
var url = document.getElementById(" txt1").value;
doAjax("metatags.php", "url =" + url, "display", "post", 0);
}
}
</script>
</head>
<body>
//added a span tag to display the message
<span id="message"></span>
http://<input type ="text" id ="txt1" value =""/>
<input type ="button" id ="btn1" value ="Get Keywords" />
<h3> Keywords Received: </h3>
<div id ="displaydiv"></div>
</body>
</html>