ASP.NET AJAX(一) Ajax的开始

Ajax的操作主要通过XMLHttpRequest,对于不同浏览器有不同的创建ActiveXObject的方法。其中XMLHttpRequest主要有open、send、setRequestHeader、getResponeHeader、getAllResponseHeader、abort方法和readyState、onreadystatechange、status、statusText、responseXML、的属性。

最原始的例子是这样的，html布局如下:

<body>
    <form id="form1" runat="server">
    <table id="credentials">
        <tr><td>userName:</td><td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td></tr>
        <tr><td>password</td><td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td></tr>
        <tr><td></td><td><button id="btnSubmit" onclick="submitCallBack();" type="button">Submit</button></td></tr>
    </table>
    <table id="employeeInfo" style="display: none;">
        <tr><td>Your Infomation</td></tr>
        <tr><td>firstName:</td><td><span id="firstName"></span></td></tr>
        <tr><td>lastName:</td><td><span id="lastName"></span></td></tr>
        <tr><td>Employee ID:</td><td><span id="employeidName"></span></td></tr>
        <tr><td>DepartmentName:</td><td><span id="departmentName"></span></td></tr>
    </table>
    </form>
</body>

主要做了一个输入用户名和密码和隐藏的经ajax调用后显示用户信息的界面，如下所示。

其javascript代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
     var request;
    if (!window.XMLHttpRequest) {
        window.XMLHttpRequest = function window$XMLHttpRequest() {
            var progIDS = ["Maxml2.XMLHTTP", "Microsoft.XMLHTTP"];

            for (var i = 0; i < progIDS.length; i++) {
                try {
                    var xmlHttp = new ActiveXObject(progIDS[i]);
                    return xmlHttp;
                }
                catch (ex) { };
            }
            return null;
        }
    }

    window.employes = function window$employes(firstName, lastName, employeId, departmentName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.employeId = employeId;
        this.departmentName = departmentName;
    }

    function deserialize() {
        var delimeter = "|";
        var responseIndex = 0;
        var delimiterIndex;
        var response = request.responseText;

        delimiterIndex = response.indexOf(delimeter, responseIndex);
        var firstName = response.substring(responseIndex, delimiterIndex);
        responseIndex = delimiterIndex + 1;

        delimiterIndex = response.indexOf(delimeter, responseIndex);
        var lastName = response.substring(responseIndex, delimiterIndex);
        responseIndex = delimiterIndex + 1;

        delimiterIndex = response.indexOf(delimeter, responseIndex);
        var employeId = response.substring(responseIndex, delimiterIndex);
        responseIndex = delimiterIndex + 1;

        delimiterIndex = response.indexOf(delimeter, responseIndex);
        var departmentName = response.substring(responseIndex, delimiterIndex);
        return new employes(firstName, lastName, employeId, departmentName);
    }

    function readStateChangeCallback() {
        if (request.readyState == 4 && request.status == 200) {
            var credentials = document.getElementById("credentials");
            credentials.style.display = "none";
            var employeeInfoTable = document.getElementById("employeeInfo");
            employeeInfoTable.style.display = "block";

            var employee = new deserialize();

            var firstNameSpan = document.getElementById("firstName");
            firstNameSpan.innerText = employee.firstName;

            var lastNameSpan = document.getElementById("lastName");
            lastNameSpan.innerText = employee.firstName;

            var employeidNameSpan = document.getElementById("employeidName");
            employeidNameSpan.innerText = employee.employeid;

            var departmentNameSpan = document.getElementById("departmentName");
            departmentNameSpan.innerText = employee.departmentName;
        }
   }

    window.credentials = function window$credentials(userName, password) {
        this.userName = userName;
        this.password = password;
    }

    function serialize(credentials) {
        var requestBody = "";
        requestBody += "txtUserName";
        requestBody += "=";
        requestBody += encodeURIComponent(credentials.userName);
        requestBody += "&";
        requestBody += "txtPassword";
        requestBody += "=";
        requestBody += encodeURIComponent(credentials.password);
        return requestBody;
    }

    function submitCallBack() {
        var userName = document.getElementById("txtUserName");
        var password = document.getElementById("txtPassword");
        var cred = new credentials(userName.value, password.value);
        var body = serialize(cred);

        request = new XMLHttpRequest();
        request.open("POST", document.form1.action);
        request.onreadystatechange = readStateChangeCallback;
        request.setRequestHeader("MyCustomeHeader", "true");
        request.setRequestHeader('Content-Type', 'Application/x-www-form-urlencoded');
        request.send(body);
    }
</script>

credentials是发往服务端进行验证的对象，employes是客户端要展现的信息对象，serialize和deserialize也就是将credentials和employes处理的函数，因为采用原始的字符串形式，显得稍复杂，可以用xml格式或json格式进行简化。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (!window.XMLHttpRequest) {
      window.XMLHttpRequest = function window$XMLHttpRequest() {
          var progIDS = ["Maxml2.XMLHTTP", "Microsoft.XMLHTTP"];

          for (var i = 0; i < progIDS.length; i++) {
              try {
                  var xmlHttp = new ActiveXObject(progIDS[i]);
                  return xmlHttp;
              }
              catch (ex) { };
          }
          return null;
      }
  }

上面的代码也就是初始化XMLHttpRequest，根据不同的浏览器，初始化不同的对象而已。submitCallBack()也就是“确定”按钮的单击相应时间，将用户名、密码按Post格式组装好后发送HTTP请求，并设置回调函数为readStateChangeCallback，接着添加了自定义的http消息头部信息，其中"MyCustomeHeader”用于在服务端是否是异步加载，后者'Content-Type'的设置使得服务端可以用Request来访问提交的数据。回调函数readStateChangeCallback中request.readyState == 4 && request.status == 200表示异步调用成功返回，接着将http相应的值赋到给指定的位置，在设置employeeInfo为可见。

最后需要关注的是服务端代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void Page_Load(object sender, EventArgs e)
{
    if (Request.Headers["MyCustomeHeader"] != null)
    {
        if (Request.Form["txtPassword"] == "password" &&
            Request.Form["txtUserName"] == "username")
        {
            Response.Write("Shahrm|Khosravi|22223333|Some Department");
            Response.End();
        }
        else
        {
            throw new Exception("Wrong credentials");
        }
    }
}