XMLHttpRequest的亲密接触（2.1）—

XMLHttpRequest的亲密接触（2.1）——简单示例

　　本文只为描述机制，例子很简单，见笑。

　　XMLHttpRequest这个对象的作用：用于在后台与服务器交换数据。本文以一个简单代码示例，既是整理，也是总结。

主要功能：

　　客户浏览器输入两个数，服务器相加计算，结果返回客户端；

技术路线：

　　客户浏览器在两个Textbox中输入两个数，通过XMLHttpRequest发送请求并传递消息，经过服务器运算，将结果返回给客户浏览器，并在第三个Textbox显示出。

技术方案：

　　以html为页面即*.htm（不加入任何asp.net控件和代码）；

　　以javascript传递消息；

　　以*.aspx为服务器页面（但不加任何页面元素，仅用cs中的pageload方法写服务功能）；

具体方法：

　　1、新建项目“ASP.NET空Web应用程序”，以减少MS自带的一群没用的代码。

　　2、添加新项“HTML页”，取名为“HomePage.htm”，手动写入如下代码，即三个textbox和一个button

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>SimpleCalculation</title>
 5 </head>
 6 <body>
 7     <input id="textbox1" type="text" style="100px; height:20px; font-weight:bold" />
 8     &nbsp+&nbsp
 9     <input id="textbox2" type="text" style="100px; height:20px; font-weight:bold" />
10     &nbsp=&nbsp
11     <input id="textbox3" type="text" style="100px; height:20px; font-weight:bold" />
12     <input name="try" type="button" value="GET SUM" />
13 </body>
14 </html>

3、右键添加一个空“Web窗体”（*.aspx）作为服务器页面备用，名为“WebService.aspx”，稍后用来实现服务器功能。

4、“修改”第2步中代码：用Javascript写入button的“onclick”事件，即通过XMLHttpRequest发送请求和消息的实现。至此，客户页面及其功能代码已完成，完整代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>SimpleCalculation</title>
 5     <script type="text/javascript">
 6         var xmlHttpReq; //定义XMLHttpRequest对象
 7         function sendRequest() {
 8             var para1 = document.getElementById("textbox1").value;//获取第一个参数
 9             var para2 = document.getElementById("textbox2").value;//获取第二个参数
10             var url = "WebService.aspx?pa1=" + para1 + "&pa2=" + para2; //组成URL请求
11 
12             if (window.XMLHttpRequest){//IE7+，chrome，ff等
13                 xmlHttpReq = new XMLHttpRequest();
14             }
15             else if (window.ActiveXObject) {//IE5、IE6等
16                 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
17             }
18 
19             if (xmlHttpReq) {//发送请求并传递消息
20                 xmlHttpReq.open("GET", url);
21                 xmlHttpReq.onreadystatechange = callback;
22                 xmlHttpReq.send(null);
23             }
24         } //end function
25 
26         function callback() {//回调函数
27             alert(xmlHttpReq.readyState.toString()); //非必要，只是为查看状态变化
28             if (xmlHttpReq.readyState == 4) {
29                 if (xmlHttpReq.status == 200) {
30                     document.getElementById("textbox3").value = xmlHttpReq.responseText;
31                 }
32                 else {
33                     alert("服务器返回状态：" + xmlHttpReq.statuesText);
34                 }
35             }
36         }//end function
37     </script>
38 </head>
39 <body>
40     <input id="textbox1" type="text" style="100px; height:20px; font-weight:bold" />
41     &nbsp+&nbsp
42     <input id="textbox2" type="text" style="100px; height:20px; font-weight:bold" />
43     &nbsp=&nbsp
44     <input id="textbox3" type="text" style="100px; height:20px; font-weight:bold" />
45     <input name="try" type="button" value="GET SUM" onclick="sendRequest()" />
46 </body>
47 </html>

5、写一步处理服务器捕捉请求（URL）之后的处理代码，右键WebService.aspx ->查看代码（极其简单，其实这种简单的功能完全可以直接用页面JS实现，再次强调仅为表述“机制”而写本文）

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 
 8 namespace mySecondWebsite
 9 {
10     public partial class WebService : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             Response.Clear();
15             string a = Request.QueryString["pa1"];//用QueryString捕捉请求中的参数
16             string b = Request.QueryString["pa2"];//QueryString为“集合”，后面要用方括号
17             int c = int.Parse(a) + int.Parse(b);
18             Response.Write(c.ToString());//通过response对象返回
19             Response.End();
20         }
21     }
22 }

6、实现页面效果(chrome)

至此，示例已全部完成。当初我关心的，而且总是弄不清的就是，页面用户元素，也就是页面变量是如何“流动”的，在上述示例中，两个“textbox”中相当于“用户变量”，第三个“textbox”是服务器处理后的返回结果。

依旧还有问题：

听说这个是Rest风格，我弄不太明白，等高手，什么是rest风格？可否有高手能形象点说明？