Ajax的client部分(更健壮的代码)

Ajax的闪光点在于client端的JS能代表用户向server发出异步请求，主要是通过XMLHttpRequest对象实现的，
但精华点在于JS能够对server端的响应进行DOM或CSS操作，使得页面有更新，从而带来丰富的客户体验。

1. client端的精华点：
JS的DOM操作实现页面内容的更新；
JS的DOM、CSS操作实现页面外观和布局的更新；
<此部分的突破点在掌握JS的常用方法，及面向对象特性>

2. client端的核心，使用XMLHttpRequest对象（创建对象；发送异步请求；响应处理/回调函数；）
a) XMLHttpRequest的创建， 考虑到浏览器的兼容性更好的代码如下：

// 创建一个XMLHttpRequest对象
var xmlHttp = createXmlHttpRequestObject();
// 如下函数创建一个XMLHttpRequest对象(安全可靠的)
function createXmlHttpRequestObject()
... {
varxmlHttp;
//非IE
try
...{
xmlHttp=newXMLHttpRequest();
}
catch(e)
...{
//IE的所有版本
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
...{
xmlHttp=newActiveXObject(XmlHttpVersions[i]);
}
catch(e)
...{}
}
}
if(!xmlHttp)
...{
alert("ErrorcreatingtheXMLHttpRequestObject.");
}
else
...{
returnxmlHttp;
}
}

b) 使用XMLHttpRequest对象 发送异步请求：

// event-driven的异步请求
function mouseon()
... {
if(xmlHttp)
...{
//如果XMLHttpRequest忙则不再向Server发送请求
if(!(xmlHttp.readyState==0||xmlHttp.readyState==4))
...{
alert("Cannotconnecttoserver,pleasetryagainlater.");
}
else
...{
try
...{
//open
xmlHttp.open("GET","serverTXT.txt",true);
//设置回调函数,一定要在send之前
xmlHttp.onreadystatechange=handleRequestStateChange;
//send,其中send的部分为消息体,如果是POST方式，需要将请求通过send发送到server端
xmlHttp.send(null);
}
catch(e)
...{
alert("Cannotconnecttoserver: "+e.toString());
}
}
}
}

c) 响应处理/回调函数：

// 回调函数
function handleRequestStateChange()
... {
varshowDIV=document.getElementById("show");
if(xmlHttp.readyState==1)
...{
showDIV.innerHTML+="Requeststatus:1(loading)<br/>";
}elseif(xmlHttp.readyState==2)
...{
showDIV.innerHTML+="Requeststatus:2(loaded)<br/>";
}elseif(xmlHttp.readyState==3)
...{
showDIV.innerHTML+="Requeststatus:3(interactive)<br/>";
}elseif(xmlHttp.readyState==4)
...{
//server端状态为200(OK)
if(xmlHttp.status==200)
...{
try
...{
//获取server端的响应(repsonseText版)
response=xmlHttp.responseText;
showDIV.innerHTML+="Requeststatus:4(complete).serversaid<br/>";
showDIV.innerHTML+=response;
}
catch(e)
...{
alert("Errorreadingtheresponse:"+e.toString());
}
}
//server端状态不是200(OK)
else
...{
alert("Therewasaproblemretrievingthedata: "+xmlHttp.statusText);
}
}
}

3. responseText,responseXML
a) 解析XML文档的方法使用DOM或者XPath<更有效>

4. client端JS的错误及异常处理：
a) 各个浏览器抛出异常的方法不太一样(Firefox, opera, IE)
try{}catch(e){}结构
b) 针对不同浏览器捕获异常的方法
IE，通常可以通过点击浏览器左下角的JS错误查看JS异常；
FireFox,通常情况下是没有给出显示错误，需要查看Error console获得

c)以XML结构验证的方法显式地抛出异常

function mouseout()
... {
if(xmlHttp)
...{
try
...{
//open
xmlHttp.open("GET","serverXML.xml",true);
//设置回调函数,一定要在send之前
xmlHttp.onreadystatechange=handleRequestStateChangeXML;
//send,其中send的部分为消息体,如果是POST方式，需要将请求通过send发送到server端
xmlHttp.send(null);
}
catch(e)
...{
alert("Cannotconnecttoserver: "+e.toString());
}
}
}

function handleRequestStateChangeXML()
... {
varshowDIV=document.getElementById("show");
if(xmlHttp.readyState==4)
...{
//server端状态为200(OK)
if(xmlHttp.status==200)
...{
try
...{
//获取server端的响应(responseXML版)
response_xml=xmlHttp.responseXML;

//捕获IE和Opera潜在的错误
if(!response_xml||!response_xml.documentElement)
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}
//捕获FireFox的潜在错误
varrootNodeName=response_xml.documentElement.nodeName;
if(rootNodeName=="parsererror")
...{
throw("InvalidXMLstructure: "+xmlHttp.responseText);
}

//确认了XML结构正确，下一步解析XML
xmlRoot=response_xml.documentElement;
personArray=xmlRoot.getElementsByTagName("person");

showText="";
for(vari=0;i<personArray.length;i++)
...{
showText+=personArray.item(i).firstChild.data+"<br/>";
}

showDIV.innerHTML+="Requeststatus:4(complete).serversaid<br/>";
showDIV.innerHTML+=showText;
}
catch(e)
...{
alert("Errorreadingtheresponse:"+e.toString());
}
}
//server端状态不是200(OK)
else
...{
alert("Therewasaproblemretrievingthedata: "+xmlHttp.statusText);
}
}
}

5. JavaScript操作DOM很常见，下面举例一个 JS操作CSS进行响应的例子

// 主要是通过设置DOM元素的className属性为CSS文件中定义的style
function setStyle1()
... {
oDIV=document.getElementById("content");
oDIV.className="style1";
}

function setStyle2()
... {
oDIV=document.getElementById("content");
oDIV.className="style2";
}