ajax的server部分(php版)
Server端的任务通常是根据Client的请求，进行逻辑操作，并将结果响应返回。这个响应通常为XML格式(因此server端需要使用PHP的DOM创建XML响应)
1.PHP使用DOM创建XML响应，供client端的JS解析然后在页面中显示;(因此需要熟练PHP的DOM API)
其实，PHP生成XML的方法有两种：
使用DOM API；（方法一）
另一种是直接将XML的内容echo出去即可；（方法二）
见示例：
HTML页面(包含三个JS触发函数：onmouseover, onmouseout, onclick; 分别触发自己的函数)
<!doctype html public "-//w3c//dtd html 4.0 tRANSITIONAL//en">
<html>
<head>
<title> Server PHP Ajax </title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<span >Default Words</span>
<div id="show"></div>
divide<input type="text" id="firstNumber"/>by
<input type="text" id="secondNumber"/>
<input type="button" value="Send" />
<div id="result"></div>
</body>
</html>
JS页面(分别定义三个JS触发函数：PHPechoXML, PHPDOMXML, 以及CSparameter)
其中有XMLHttpRequest对象创建函数，以及各自的Server响应处理函数
///////1. 创建XMLHttpRequest对象
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
...{
var xmlHttp;
try
...{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
...{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
...{
try
...{
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions);
}
catch (e) ...{}
}
}
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
///////2. JavaScript事件响应函数(onmouseover触发)
// read a file from the server
function PHPechoXML()
...{
// only continue if xmlHttp isn"t void
if (xmlHttp)
...{
// try to connect to the server
try
...{
// initiate reading a file from the server
//向Server端的PHPechoXML.php文件发送异步请求
xmlHttp.open("GET", "PHPechoXML.php", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
// display the error in case of failure
catch (e)
...{
alert("Can"t connect to server: " + e.toString());
}
}
}
///////3. JavaScript事件响应函数(onmouseout触发)
function PHPDOMXML()
...{
// only continue if xmlHttp isn"t void
if (xmlHttp)
...{
// try to connect to the server
try
...{
// initiate reading a file from the server
//向Server端的PHPDOMXML.php文件发送异步请求
xmlHttp.open("GET", "PHPDOMXML.php", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
// display the error in case of failure
catch (e)
...{
alert("Can"t connect to server: " + e.toString());
}
}
}
// handles the response received from the server，Server端状态回调函数
function handleRequestStateChange()
...{
if (xmlHttp.readyState == 4)
...{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
...{
try
...{
// read the message from the server
var xmlResponse = xmlHttp.responseXML;
//捕获IE和Opera潜在的错误
if(!xmlResponse||!xmlResponse.documentElement)
...{
throw("Invalid XML structure: "+xmlHttp.responseText);
}
//捕获FireFox的潜在错误
var rootNodeName=xmlResponse.documentElement.nodeName;
if(rootNodeName=="parsererror")
...{
throw("Invalid XML structure: "+xmlHttp.responseText);
}
//获取Server端响应的XML响应并解析，到网页中显示
// obtain the XML"s document element
xmlRoot = xmlResponse.documentElement;
// obtain arrays with book titles and ISBNs
cityArray=xmlRoot.getElementsByTagName("city");
// generate HTML output
var html = "";
// iterate through the arrays and create an HTML structure
for (var i=0; i<cityArray.length; i++)
html += cityArray.item(i).firstChild.data + "<br/>";
// obtain a reference to the <div> element on the page
myDiv = document.getElementById("show");
// display the HTML output
myDiv.innerHTML = "Server says: <br />" + html;
}
catch(e)
...{
// display error message
alert("Error reading the response: " + e.toString());
}
}
else
...{
// display status message
alert("There was a problem retrieving the data: " +
xmlHttp.statusText);
}
}
}
///////4. JavaScript事件响应函数(onclick触发)
function CSparameter()
...{
// only continue if xmlHttp isn"t void
if (xmlHttp)
...{
// try to connect to the server
try
...{
//获取form中的值
var firstNumber=document.getElementById("firstNumber").value;
var secondNumber=document.getElementById("secondNumber").value;
//设置为参数，对Server端的CSparameter.php进行异步请求
var param="firstNumber="+firstNumber+"&secondNumber="+secondNumber;
// initiate reading a file from the server
xmlHttp.open("GET", "CSparameter.php?"+param, true);
xmlHttp.onreadystatechange = handleRequestStateChangePara;
xmlHttp.send(null);
}
// display the error in case of failure
catch (e)
...{
alert("Can"t connect to server: " + e.toString());
}
}
}
//Server状态改变回调函数（Server端接受Client端传来的参数经过逻辑计算之后返回XML响应，Client端对XML进行解析，返回更新到页面中）
// handles the response received from the server
function handleRequestStateChangePara()
...{
if (xmlHttp.readyState == 4)
...{
// continue only if HTTP status is "OK"
if (xmlHttp.stat
-
相关文章
2秒记住本站域名
玩过泡泡龙吗？Readygo?Go! 再加上.Com.Cn的后缀，那就是大名小顶的ReadyGo.com.cn