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; 分别触发自己的函数)
JS页面(分别定义三个JS触发函数:PHPechoXML, PHPDOMXML, 以及CSparameter)
其中有XMLHttpRequest对象创建函数,以及各自的Server响应处理函数
1.PHP使用DOM创建XML响应,供client端的JS解析然后在页面中显示;(因此需要熟练PHP的DOM API)
其实,PHP生成XML的方法有两种:
使用DOM API;(方法一)
另一种是直接将XML的内容echo出去即可;(方法二)
见示例:
HTML页面(包含三个JS触发函数:onmouseover, onmouseout, onclick; 分别触发自己的函数)
<!
doctypehtmlpublic"-//w3c//dtdhtml4.0tRANSITIONAL//en"
>
< html >
< head >
< title > ServerPHPAjax </ title >
< script type ="text/javascript" src ="js.js" ></ script >
</ head >
< body >
< span onmouseover ="PHPechoXML()" onmouseout ="PHPDOMXML()" > DefaultWords </ span >
< div id ="show" ></ div >
divide < input type ="text" id ="firstNumber" /> by
< input type ="text" id ="secondNumber" />
< input type ="button" value ="Send" onclick ="CSparameter()" />
< div id ="result" ></ div >
</ body >
</ html >
< html >
< head >
< title > ServerPHPAjax </ title >
< script type ="text/javascript" src ="js.js" ></ script >
</ head >
< body >
< span onmouseover ="PHPechoXML()" onmouseout ="PHPDOMXML()" > DefaultWords </ span >
< div id ="show" ></ div >
divide < input type ="text" id ="firstNumber" /> by
< input type ="text" id ="secondNumber" />
< input type ="button" value ="Send" onclick ="CSparameter()" />
< div id ="result" ></ div >
</ body >
</ html >
JS页面(分别定义三个JS触发函数:PHPechoXML, PHPDOMXML, 以及CSparameter)
其中有XMLHttpRequest对象创建函数,以及各自的Server响应处理函数
//
/1.创建XMLHttpRequest对象
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
... {
varxmlHttp;
try
...{
//trytocreateXMLHttpRequestobject
xmlHttp=newXMLHttpRequest();
}
catch(e)
...{
//assumeIE6orolder
varXmlHttpVersions=newArray('MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP');
for(vari=0;i<XmlHttpVersions.length&&!xmlHttp;i++)
...{
try
...{
//trytocreateXMLHttpRequestobject
xmlHttp=newActiveXObject(XmlHttpVersions[i]);
}
catch(e)...{}
}
}
if(!xmlHttp)
alert("ErrorcreatingtheXMLHttpRequestobject.");
else
returnxmlHttp;
}
// /2.JavaScript事件响应函数(onmouseover触发)
// readafilefromtheserver
function PHPechoXML()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//initiatereadingafilefromtheserver
//向Server端的PHPechoXML.php文件发送异步请求
xmlHttp.open("GET","PHPechoXML.php",true);
xmlHttp.onreadystatechange=handleRequestStateChange;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// /3.JavaScript事件响应函数(onmouseout触发)
function PHPDOMXML()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//initiatereadingafilefromtheserver
//向Server端的PHPDOMXML.php文件发送异步请求
xmlHttp.open("GET","PHPDOMXML.php",true);
xmlHttp.onreadystatechange=handleRequestStateChange;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// handlestheresponsereceivedfromtheserver,Server端状态回调函数
function handleRequestStateChange()
... {
if(xmlHttp.readyState==4)
...{
//continueonlyifHTTPstatusis"OK"
if(xmlHttp.status==200)
...{
try
...{
//readthemessagefromtheserver
varxmlResponse=xmlHttp.responseXML;
//捕获IE和Opera潜在的错误
if(!xmlResponse||!xmlResponse.documentElement)
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}
//捕获FireFox的潜在错误
varrootNodeName=xmlResponse.documentElement.nodeName;
if(rootNodeName=="parsererror")
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}
//获取Server端响应的XML响应并解析,到网页中显示
//obtaintheXML'sdocumentelement
xmlRoot=xmlResponse.documentElement;
//obtainarrayswithbooktitlesandISBNs
cityArray=xmlRoot.getElementsByTagName("city");
//generateHTMLoutput
varhtml="";
//iteratethroughthearraysandcreateanHTMLstructure
for(vari=0;i<cityArray.length;i++)
html+=cityArray.item(i).firstChild.data+"<br/>";
//obtainareferencetothe<div>elementonthepage
myDiv=document.getElementById("show");
//displaytheHTMLoutput
myDiv.innerHTML="Serversays:<br/>"+html;
}
catch(e)
...{
//displayerrormessage
alert("Errorreadingtheresponse:"+e.toString());
}
}
else
...{
//displaystatusmessage
alert("Therewasaproblemretrievingthedata: "+
xmlHttp.statusText);
}
}
}
// /4.JavaScript事件响应函数(onclick触发)
function CSparameter()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//获取form中的值
varfirstNumber=document.getElementById("firstNumber").value;
varsecondNumber=document.getElementById("secondNumber").value;
//设置为参数,对Server端的CSparameter.php进行异步请求
varparam="firstNumber="+firstNumber+"&secondNumber="+secondNumber;
//initiatereadingafilefromtheserver
xmlHttp.open("GET","CSparameter.php?"+param,true);
xmlHttp.onreadystatechange=handleRequestStateChangePara;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// Server状态改变回调函数(Server端接受Client端传来的参数经过逻辑计算之后返回XML响应,Client端对XML进行解析,返回更新到页面中)
// handlestheresponsereceivedfromtheserver
function handleRequestStateChangePara()
... {
if(xmlHttp.readyState==4)
...{
//continueonlyifHTTPstatusis"OK"
if(xmlHttp.status==200)
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
... {
varxmlHttp;
try
...{
//trytocreateXMLHttpRequestobject
xmlHttp=newXMLHttpRequest();
}
catch(e)
...{
//assumeIE6orolder
varXmlHttpVersions=newArray('MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP');
for(vari=0;i<XmlHttpVersions.length&&!xmlHttp;i++)
...{
try
...{
//trytocreateXMLHttpRequestobject
xmlHttp=newActiveXObject(XmlHttpVersions[i]);
}
catch(e)...{}
}
}
if(!xmlHttp)
alert("ErrorcreatingtheXMLHttpRequestobject.");
else
returnxmlHttp;
}
// /2.JavaScript事件响应函数(onmouseover触发)
// readafilefromtheserver
function PHPechoXML()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//initiatereadingafilefromtheserver
//向Server端的PHPechoXML.php文件发送异步请求
xmlHttp.open("GET","PHPechoXML.php",true);
xmlHttp.onreadystatechange=handleRequestStateChange;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// /3.JavaScript事件响应函数(onmouseout触发)
function PHPDOMXML()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//initiatereadingafilefromtheserver
//向Server端的PHPDOMXML.php文件发送异步请求
xmlHttp.open("GET","PHPDOMXML.php",true);
xmlHttp.onreadystatechange=handleRequestStateChange;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// handlestheresponsereceivedfromtheserver,Server端状态回调函数
function handleRequestStateChange()
... {
if(xmlHttp.readyState==4)
...{
//continueonlyifHTTPstatusis"OK"
if(xmlHttp.status==200)
...{
try
...{
//readthemessagefromtheserver
varxmlResponse=xmlHttp.responseXML;
//捕获IE和Opera潜在的错误
if(!xmlResponse||!xmlResponse.documentElement)
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}
//捕获FireFox的潜在错误
varrootNodeName=xmlResponse.documentElement.nodeName;
if(rootNodeName=="parsererror")
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}
//获取Server端响应的XML响应并解析,到网页中显示
//obtaintheXML'sdocumentelement
xmlRoot=xmlResponse.documentElement;
//obtainarrayswithbooktitlesandISBNs
cityArray=xmlRoot.getElementsByTagName("city");
//generateHTMLoutput
varhtml="";
//iteratethroughthearraysandcreateanHTMLstructure
for(vari=0;i<cityArray.length;i++)
html+=cityArray.item(i).firstChild.data+"<br/>";
//obtainareferencetothe<div>elementonthepage
myDiv=document.getElementById("show");
//displaytheHTMLoutput
myDiv.innerHTML="Serversays:<br/>"+html;
}
catch(e)
...{
//displayerrormessage
alert("Errorreadingtheresponse:"+e.toString());
}
}
else
...{
//displaystatusmessage
alert("Therewasaproblemretrievingthedata: "+
xmlHttp.statusText);
}
}
}
// /4.JavaScript事件响应函数(onclick触发)
function CSparameter()
... {
//onlycontinueifxmlHttpisn'tvoid
if(xmlHttp)
...{
//trytoconnecttotheserver
try
...{
//获取form中的值
varfirstNumber=document.getElementById("firstNumber").value;
varsecondNumber=document.getElementById("secondNumber").value;
//设置为参数,对Server端的CSparameter.php进行异步请求
varparam="firstNumber="+firstNumber+"&secondNumber="+secondNumber;
//initiatereadingafilefromtheserver
xmlHttp.open("GET","CSparameter.php?"+param,true);
xmlHttp.onreadystatechange=handleRequestStateChangePara;
xmlHttp.send(null);
}
//displaytheerrorincaseoffailure
catch(e)
...{
alert("Can'tconnecttoserver: "+e.toString());
}
}
}
// Server状态改变回调函数(Server端接受Client端传来的参数经过逻辑计算之后返回XML响应,Client端对XML进行解析,返回更新到页面中)
// handlestheresponsereceivedfromtheserver
function handleRequestStateChangePara()
... {
if(xmlHttp.readyState==4)
...{
//continueonlyifHTTPstatusis"OK"
if(xmlHttp.status==200)