AJAX - Remote Server: Using Proxy Server Script to Access Remote ServerTag: AJAX, javacript, DOM, CSS, server side, proxy, server, proxy server Category: PHP Application
post: 18 Mar 2008 read: 237
AJAX Remote Server Step By Step Tutorial - part 3: Last, we modify address for access remote application. We do not access direct to calc.php now. But, we access calc.php from myserver.php. Below, complete code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Client</title>
<script type="text/javascript">
var serveraddress = "http://localhost/test/ajax/myserver.php?";
var param1;
var param2;
var params;
var xmlHttp = createXmlHttpRequestObject();
// creates XMLHttpRequest Instance
function createXmlHttpRequestObject(){
// will store XMLHttpRequest object
// at here
var xmlHttp;
// works all exceprt IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE 6 or older
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){ }
}
// return object or display error
if (!xmlHttp)
alert("Error creating the XMLHttpRequest Object");
else
return xmlHttp;
}
function process(funcCalc)
{
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML = "";
// will be continued if xmlHttp isn't void
if(!xmlHttp) return;
if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4)
{
try
{
param1 = document.getElementById("param1").value;
param2 = document.getElementById("param2").value;
params = "param1=" + param1 + "¶m2=" + param2 + "&func=" + funcCalc;
xmlHttp.open("Get", serveraddress + params, true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Can't connect to server\n" + e.toString());
}
}
else
// don't try to make server request if the XMLHttpObject is busy
{
alert("Can't connect to server, please try again later.");
}
}
function handleRequestStateChange()
{
myDiv = document.getElementById("myDivElement");
if(xmlHttp.readyState == 1)
{
myDiv.innerHTML += "Request status: 1 (loading) <br/>";
}
else if (xmlHttp.readyState == 2)
{
myDiv.innerHTML += "Request status: 2 (loaded) <br/>";
}
else if (xmlHttp.readyState == 3)
{
myDiv.innerHTML += "Request status: 3 (interactive) <br/>";
}
else if (xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
try
{
handleXMLData();
}
catch(e)
{
alert("Error reading the response: " + e.toString());
}
}
else
{
alert("Problem retrieving data:\n" + xmlHttp.statusText);
}
}
}
function handleXMLData()
{
var xmlResponse = xmlHttp.responseXML;
// error handling for IE and Opera
if (!xmlResponse || !xmlResponse.documentElement){
throw("1. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var rootNodeName = xmlResponse.documentElement.nodeName;
//error handling for Firefox
if (rootNodeName == "parseerror"){
throw("2. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlRoot = xmlResponse.documentElement;
if(rootNodeName != "datas" || !xmlRoot.firstChild){
throw("3. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlData = xmlRoot.firstChild;
var dataNodeName = xmlData.nodeName;
if (dataNodeName != "calculation"){
throw("4. Invalid XML Structure:\n " + xmlHttp.responseText);
}
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "Request status: 4 (complete). <br />Server said: ";
myDiv.innerHTML += xmlHttp.responseText;
}
</script>
</head>
<body>
Parameter #1: <input type="text" id="param1"> <br />
Parameter #2: <input type="text" id="param2"> <br />
<input type="button" value="+" onclick="process('add')">
<input type="button" value="-" onclick="process('min')">
<input type="button" value="/" onclick="process('div')">
<input type="button" value="*" onclick="process('mul')">
<div id="myDivElement" />
</body>
</html>
|
|
| Give Your Opinion | Recommend
|
