Shown below is a very basic implementation using AJAX (Asynchronous JavaScript and XML).
The XML file is produced by authXML.php. The parameters are the same as they were for auth.php
A typical request would look like http://indianmensa.org/db/services/auth/authXML.php?user=11010015&pass=somepass.
If you are using the City parameter it should look like http://indianmensa.org/db/services/auth/authXML.php?user=11010015&pass=somepass&City=Ko
The response XML has the following format
<response>
<code>0</code>
<message>Invalid User.</message>
</response>
Scripting
HTML
Username : <input type="text" id="user" class="form-text" />
Password : <input type="password" id="pass" class="form-text" />
<input type="submit" value="Query" class="form-button" onClick="validateUser();" />
<div id="serverResponse" align="center"></div>
As you can see the HTML is very simple. You can use tables to format your input. Notice that we have use form elements but we have not used the <form> tag. This is because we are not submitting this form to any page using an HTTP request. The values of these fields are picked up by Javascript. The result in this case is written into the div, however you would typically use this result to allow access to some kind of resource.
Javascript
<script type="text/javascript" language="javascript">
var xmlHttp = createXMLHTTPRequestObject();
function WriteDiv(ID,parentID,sText)
{
if (document.layers)
{
var oLayer;
if(parentID){oLayer = eval('document.' + parentID + '.document.' + ID + '.document');}
else{oLayer = document.layers[ID].document;}
oLayer.open();
oLayer.write(sText);
oLayer.close();
}
else if (parseInt(navigator.appVersion)>=5&&navigator.appName=="Netscape")
{document.getElementById(ID).innerHTML = sText;}
else if (document.all)
{document.all[ID].innerHTML = sText;}
}
function createXMLHTTPRequestObject()
{
var xmlHTTP;
if (window.ActiveXObject)
{
try
{xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");}
catch(e1){xmlHTTP=false;}
}
else
{
try{xmlHTTP = new XMLHttpRequest();}
catch(e2){xmlHTTP=false;}
}
if (!xmlHTTP){alert ("Error creating XML Http Request");}
else {return xmlHTTP;}
}
function validateUser()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
user = encodeURIComponent(document.getElementById("user").value);
pass = encodeURIComponent(document.getElementById("pass").value);
xmlHttp.open("GET",'http://indianmensa.org/db/services/auth/authXML.php?user='+user+'&pass='+pass,true);
xmlHttp.onreadystatechange = getAuthDetails;
xmlHttp.send(null);
}
else
{setTimeout('validateUser()',1000);}
}
function getAuthDetails()
{
if (xmlHttp.readyState== 4)
{
if (xmlHttp.status == 200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
rsp = xmlDocumentElement.getElementsByTagName("code").item(0);
code = "Code : "+rsp.firstChild.data;
rsp = xmlDocumentElement.getElementsByTagName("message").item(0);
msg = " | Message : "+rsp.firstChild.data;
WriteDiv ('serverResponse','null',code+msg);
//document.getElementById('serverResponse').innerHTML=code+msg;
}
}
}
</script>
|
