Ajax Example: Server information

From virtualMV2015wiki
Jump to: navigation, search
 Home  JavaScript, Ajax <

Introduction

Overview

AjaxFunctions.js

function fnGetXMLHTTPRequest() {
   var req =  false;
   try { req = new XMLHttpRequest(); }// for Firefox 
   catch (err) {
      try { req = new ActiveXObject("Msxml2.XMLHTTP"); }//some versions of IE
      catch (err) {
         try { req = new ActiveXObject("Microsoft.XMLHTTP");} //other versions of IE
         catch (err) { req = false; }
      }
    }
    return req;
}

AjaxExample.php

<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?>
      <serverinfo>
        <info>On the Server it is ".date('H:i:s')." on ".date('M d, Y').".</info>
      </serverinfo>";
?>


Icon Example.png

Example AjaxExample.php: Shows what is returned by the server

AjaxExample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
 
<style>
.displaybox {
       width: 300px; height: 50px; border: 1px solid #808080;
       margin-right:auto;margin-left:auto; background-color: #F6F9ED;
			 font-weight:bold; cursor: pointer;}
</style>
 
<script src="AjaxFunctions.js" type="text/javascript"></script>
<script type="text/javascript">
function fnGetServerInfo() {
  var strPage = 'AjaxExample.php';
  var strURL = strPage +"?rand="+parseInt(Math.random()*999999999999999);
  objRequest.open("GET", strURL, true);
  objRequest.onreadystatechange = fnHTTPResponse;
  objRequest.send(null);
}
 
function fnHTTPResponse() {
  if (objRequest.readyState == 4) {
    if(objRequest.status == 200) {
       var strInfo = objRequest.responseXML.getElementsByTagName("info")[0];
       document.getElementById('ShowInfo').innerHTML = strInfo.childNodes[0].nodeValue;
    }
  } else {
    document.getElementById('ShowInfo').innerHTML = '<img src="AjaxLoad.gif"/>';
  }
}
var objRequest = fnGetXMLHTTPRequest();
 
</script>
 
</head>
 
<body>
<div style ="text-align:center;">
   <h1>Ajax Demonstration 1</h1>
   <p>move you mouse over the box to show the server information <br />
	 (only the box will be refreshed!)</p>
   <div id="ShowInfo" class="displaybox" onmouseover="javascript:fnGetServerInfo();"></div>
</div>
 
</body>
</html>


Icon Example.png

Example AjaxExample.html: Shows the AJAX working

 

Verhaart, M. (2017). Ajax Example: Server information. Retrieved December 18, 2017, from http://www.virtualmv.com/wiki/index.php?title=Ajax_Example%3A_Server_information