js 客户端与服务器端的通信

 客户端与服务器端通信一般有两种方法，隐藏iframe和使用xmlhttp对象

隐藏框架技术实现Ajax通常由4个过程组成。第一步是由用户的某种行为引发了一个对隐藏框架的请求。这包括用户单击了在可见框架页中的超链接，或者由用户的其他交互行为所引发。通常情况下，对隐藏框架页的请求仅仅是将隐藏框架页重定向到一个服务器上指定的服务端程序。对隐藏框架页的重定向将自动触发第二个过程：即向服务器发送请求。

在服务器程序完成了对请求的处理之后，将发生第三个过程：即服务器将响应发送回隐藏框架页。服务器端的响应是一个Web页面，该页面将被发送给隐藏框架。当来自服务器的响应被完全接收后，隐藏框架中的Web页面将发起与可见框架页的联系，并告知可见框架，服务器的响应已经成功。这就是第四个过程，该过程通常在隐藏框架的window.onload事件处理器中完成。

例子：

客户端代码：

[javascript]  view plain copy

1. var oHiddenFrame=null;  
2. function getServerInfo()  
3. {  
4.    if(oHiddenFrame==null)  
5.    {  
6.       oHiddenFrame=document.createElement("iFrame");  
7.       oHiddenFrame.name="hiddenFrame";  
8.       oHiddenFrame.id="hiddenFrame";  
9.       oHiddenFrame.style.height="0px";  
10.       oHiddenFrame.style.width="0px";  
11.       oHiddenFrame.style.position="absolute";  
12.       oHiddenFrame.style.visibility="hidden";  
13.       document.body.appendChild(oHiddenFrame);  
14.    }  
15.    setTimeout(function(){frames["hiddenFrame"].location.href="aa.aspx";},10);  
16. }  
17. function handleResponse(sResponseText)  
18. {  
19.    alert("服务器回应的消息是："+sResponseText);  
20. }  

HTML

[xhtml]  view plain copy

1. <p>点击按键通过隐藏框架向服务器发出请求</p>  
2. <input type="button" onclick="getServerInfo()" value="get server info" />  

 

服务器端响应的WEB页面aa.aspx

[javascript]  view plain copy

1. window.onload=function()  
2. {  
3.    parent.handleResponse("bb")  
4. }  

 

使用xmlhttp

xmlHttp是微软创建的额对象，它的本质是添加额外的用于发送和接收XML代码的功能的普通的HTTP请求。

当一个xmlHttp对象把一个http发送到服务器端，将经历若干种状态，而readyState这是描述这样它的一系列状态的一个属性值

取值   描述

0       描述一种“为初始化”状态，此时，已经创建一个xmlHttp对象，但是还没有对它初始化

1       描述一种“准备发送”状态，此时，xmlHttp对象已经调用open()方法打开一个请求，并且xmlHttp对象准备把这个请求发送到出去

2       描述一种“发送”状态，此时，xmlHttp对象已经调用send()方法将请求发送出去，但是还没有从服务器端得到相应。

3       描述一种“正在接收”状态，此时，已收到HTTP相应头部信息，但是，消息体部分还没有完全接收

4       描述一种“已加载”状态，此时，相应已经被完全接受。

 

responseText属性

这个属性包含客户端接收到的HTTP响应的文本内容，当readyState属性为0，1,2时，responseText为空字符串，当为3时，包含部分响应信息，当readyState为4时，包含完整的相应信息。

 

responseXML属性

此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。
　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

 

statusText属性

这个属性描述了HTTP状态代码文本，当且仅当readyState的值为3或4时才可用，当readySate为其它值时如果试图读取statusText将引发一个异常

 

abort()方法

可以使用该方法来取消一个http请求，从而把xmlHttp对象复位到为初始化状态

 

open()方法

打开一个请求，通常包括三个参数，提交方式：get和post，请求的URL，判断同步还是异步请求的布尔值，同步为false,异步为true.

send()方法

发送一个请求。xmlHttp对象调用send方法后，通常讲readyState属性从1变为2.它通常包含一个参数，当使用get请求时，该参数可以为空，当使用post请求时，该参数通常是请求发送的参数的字符串。

 

setRequestHeader()方法
该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

getResponseHeader()方法
getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

getAllResponseHeaders()方法
该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

例子。。验证一个用户名是否存在

客户端代码

[javascript]  view plain copy

1. var request;  
2. function createXMLHTTP()  
3. {  
4.      if(window.XMLHttpRequest)  
5.      {  
6.         return new XMLHttpRequest();  
7.      }  
8.      else if(window.ActiveXObject)  
9.      {  
10.          try  
11.          {  
12.             return new ActiveXObject("MSXML2.XMLHTTP");  
13.          }  
14.          catch(oException)  
15.          {  
16.             return new ActiveXObject("Microsoft.XMLHTTP");  
17.          }  
18.      }  
19.      else  
20.      {  
21.         throw new Error("not exists");  
22.      }  
23. }  
24.   function checkUsername()  
25.   {  
26.      var userValue=document.getElementById("username").value;  
27.         if(userValue=="")  
28.         {  
29.             alert("Please enter a user name to check!")  
30.             return;  
31.         }  
32.         var url="bb.aspx?username="+userValue;  
33.         request=createXMLHTTP();  
34.         request.open("get","bb.aspx","true");  
35.         request.onreadystatechange=function()  
36.         {  
37.            if(request.readyState==4)  
38.            {  
39.               alert(request.responseText)  
40.               checkUsername_callBack(request.responseText);  
41.            }  
42.         }  
43.         request.send(null);  
44.   }  
45.   function checkUsername_callBack(sResponseText)  
46.   {  
47.             var userValue=document.getElementById("username").value;  
48.             if(sResponseText=="available")  
49.             {  
50.                 alert("username:"+userValue+" is  available!");  
51.             }  
52.             else  
53.             {  
54.                 alert("username:"+userValue+" is not available!");  
55.             }  
56.   }  

[xhtml]  view plain copy

1. <table>  
2. <tr>  
3. <td>UserName</td>  
4. <td><input type="text" id="username" /></td>  
5. <td><input type="button" value="验证" onclick="checkUsername()"/></td>  
6. </tr>  
7. </table>  

 

服务器端bb.aspx代码

[c-sharp]  view plain copy

1. protected void Page_Load(object sender, EventArgs e)  
2. {  
3.     string username = Request.QueryString["username"];  
4.     if ("aa" == username || "bb" == username)  
5.     {  
6.         Response.Write("available");  
7.     }  
8.     //else  
9.     //{  
10.     //    Response.Write(username);  
11.     //}  
12. }