《Ajax.基础教程》例子

书中部分例子服务端使用的是JAVA SERVLET 这里我使用的是ASP.NET

示例1：读取XML文档

DEMO1.Html 文件

<script type="text/javascript">
     var xmlHttp;
        //创建XMLHttpRequest对象
        function createXMLHttpRequest() {
        //IE不同版本
            if (window.ActiveXObject) {
                try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
                catch (e) {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}             
            }
        //非IE
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }
              //被调用的函数
        function startRequest(request) {
            requestType = request;
            createXMLHttpRequest();
            var url = " demo1.xml";
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", url, true);
            xmlHttp.send(null);
        }
        //状态改变的时候触发的事件函数
        function handleStateChange() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    if (requestType == "south") {
                        GetSouth();
                    }
                    else if (requestType = "all") {
                        GetAll();
                    }
                }
            }
        }
        function GetSouth() {
            var xmlDoc = xmlHttp.responseXML;
            var southNode = xmlDoc.getElementsByTagName("south")[0];
            var provincesNode = southNode.getElementsByTagName("province");
            outputList("南部省份:",provincesNode); 
        }
        function GetAll() {
            var xmlDoc = xmlHttp.responseXML;
            var allProvincesNode = xmlDoc.getElementsByTagName("province");
            outputList("全部省份:", allProvincesNode);
        }
        function outputList(title, provinces) {
            var out = title;
            var currentProvince = null;
            for (var i = 0; i < provinces.length; i++) {
                currentProvince = provinces[i];
                out = out + ""n-" + currentProvince.childNodes[0].nodeValue; 
            }
            alert(out);
        }
    </script>
<input type="button" id="GetSouth" value="获取南部省" 
onclick="startRequest('south');" />
<input type="button" id="GetAll" value="获取全部省份" onclick="startRequest('all');"/>

demo1.xml文档

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <provinces>
 3   <south>
 4     <province>jx</province>//note节点内的文本其实是此节点的子节点
 5     <province>gz</province>
 6     <province>fj</province>
 7   </south>
 8   <north>
 9     <province>hb</province>
10     <province>hnj</province>
11     <province>sx</province>
12   </north>
13   <west>
14     <province>xj</province>
15     <province>gs</province>
16     <province>xz</province>
17   </west>
18   <east>
19     <province>js</province>
20     <province>zj</province>
21     <province>sd</province>
22   </east>
23 </provinces>

示例2:分别使用GET和POST 方法(只是向服务器SEND简单的查询字符串)

DEMO2.html文件

 1 <script type="text/javascript">
 2         var xmlHttp;
 3         //创建XMLHttpRequest对象
 4         function createXMLHttpRequest() {
 5         //IE
 6             if (window.ActiveXObject) {
 7                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 8             }
 9         //非IE
10             else if (window.XMLHttpRequest) {
11                 xmlHttp = new XMLHttpRequest();
12             }
13         }
14         //返回查询字符串
15         function createQueryString() {
16             var firstName = document.getElementById("firstName").value;
17             var middleName = document.getElementById("middleName").value;
18             var birthday = document.getElementById("birthday").value;
19             var querystring = "firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;
20             return querystring;
21         }
22         function doRequestUsingGET() {
23             createXMLHttpRequest();
24             var queryString = " GetAndPostExample.ashx?";
25             queryString = queryString + createQueryString()
26         + "&timeStamp=" + new Date().getTime();
27             xmlHttp.onreadystatechange = handleStateChange;
28             xmlHttp.open("GET", queryString, true);
29             xmlHttp.send(null);
30         }
31         function doRequestUsingPOST() {
32             createXMLHttpRequest();
33             var url = " GetAndPostExample.ashx?timeStamp=" + new Date().getTime();
34             var queryString = createQueryString();
35             xmlHttp.onreadystatechange = handleStateChange;
36             xmlHttp.open("POST", url, true);
37             //确保服务器知道请求体中有请求参数，需要调用setRequestHeader，将Content-Type值设置为application/x- www-form-urlencoded。
38             xmlHttp.setRequestHeader("Content-Type",
39                   "application/x-www-form-urlencoded;");
40             xmlHttp.send(queryString);
41         }
42         //
43         function handleStateChange() {
44             if (xmlHttp.readyState == 4) {
45                 if (xmlHttp.status == 200) {
46                  document.getElementById("serverResponse").innerText
47 = xmlHttp.responseText;
48                 }
49             }
50         }
51         <input type="text" id="firstName" /><input type="text" id="middleName" />                
52         <input type="text" id="birthday" />   
53         <input type="button"
54 value="Send parameters using GET" onclick="doRequestUsingGET();" />
55         <input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();" />    
56         <div id="serverResponse"/>
57 

GetAndPostExample.ashx文件

 1 public class GetAndPostExample : IHttpHandler {
 2     public void ProcessRequest(HttpContext context)
 3     {
 4         //context.Response.ContentType = "text/plain";
 5         string method = context.Request.HttpMethod;//判断方法是GET还是POST
 6         string firstName = null;
 7         string middleName = null;
 8         string birthday = null;
 9         if (method == "GET")
10         {
11              firstName = context.Request.QueryString["firstName"];
12              middleName = context.Request.QueryString["middleName"];
13              birthday = context.Request.QueryString["birthday"];         
14         }
15         else if (method == "POST")
16         {
17              firstName = context.Request.Form["firstName"];
18              middleName = context.Request.Form["middleName"];
19              birthday = context.Request.Form["birthday"];     
20         }
21         context.Response.Write(string.Format("姓:{0}名:{1}生日{2}", firstName, middleName, birthday));
22     }
23     public bool IsReusable {
24         get {
25             return false;
26         }
27     }
28 }
29