一个关于javascript Ajax解析XML的原始实例

        该实例首先需要创建数据库，数据库Test唯一表test,该表具有三个列分别为c1,c2,c3, int型，请自行建立数据库并插入几行测试数据。

        然后我们希望能将数据库中的数据读取出来，我在此处只是将数据库数据以数据集的方式存放在本地中，并将数据拼装成xml的形式，这不是重点，但还是需要我们去做，我将它封装在DBOperate.cs类中，这里采用C#语言：

       DBOperate.cs:

       //连接字符串
        private readonly static String connectionString =
            "Data Source=.;Initial Catalog=Test;Integrated Security=True";

 

        /// <summary>
        /// 填充数据集
        /// </summary>
        /// <param name="ds"></param>
        /// <param name="sql"></param>
        public void SetDataSet(DataSet ds,String sql)
        {
            SqlDataAdapter ada = new SqlDataAdapter(sql,connectionString);
            ada.Fill(ds);
        }

       

         /// <summary>
        /// 获取XML格式的字符串
        /// </summary>
        /// <returns></returns>
        public String GetXMLData()
        {
            string sql = "select * from test";
            //创建数据集
            DataSet ds = new DataSet("Test");
            this.SetDataSet(ds, sql);
            //解析数据
            DataTable dt = ds.Tables[0];
            string showData = "<?xml version='1.0' encoding='utf-8'?>/n";
            //xml字符串
            showData += "<Root>/n";
            foreach (DataRow item in dt.Rows)
            {
                showData += "<item>/n<c1>" + item[0].ToString() + "</c1>/n";
                showData += "<c2>" + item[1].ToString() + "</c2>/n";
                showData += "<c3>" + item[2].ToString() + "</c3>/n";
                int sum = (int)item[0] + (int)item[1] + (int)item[2];
                showData += "<c4>" + sum.ToString() + "</c4>/n</item>/n";
            }
            showData += "</Root>";

        }

            return showData;

        }

注意这里xml的定义格式为:

<Root>

    <item>

         <c1>..</c1><c2>..</c2><c3>..</c3><c4>..</c4>

    </item>

    ...

</Root>

接下来，我需要创建一个aspx页面用于响应ajax请求，该页面html没有任何内容，仅在cs文件中编码,

代码如下：

         ResponseTest.aspx.cs

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {

                   this.ResponseOperate();
            }
            catch (Exception ex)
            {
                throw ex;
            }

 

        /// <summary>
        /// 响应操作
        /// </summary>
        public void ResponseOperate()
        {
            Response.Clear();
            Response.Buffer = true;

            //设置响应类型为xml
            Response.ContentType = "text/xml";
            Response.Charset = "utf-8";

            DBOperate operate = new DBOperate();
            string strXml = operate.GetXMLData();

            //输出响应流

            Response.Write(strXml);
            Response.Flush();
            Response.End();
        }

 

好了，终于要步入正题了，接下来我们用javascript执行ajax请求，ResponseTest页面，这里我们先建立一个页面ajaxRequestTest.aspx页面,注意所有页面都是放在同级目录下，该页面body内容如下：

        <form id="form1" runat="server">
    <div style="text-align: center;">
        <table cellpadding="1" border="1" cellspacing="1" id="tabScreen" style="text-align: center;">
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
                <td>C4</td>
            </tr>
        </table>
    </div>
    <div style="text-align: center">
        <input type="button" name="ajaxRequest" id="ajaxRequest" οnclick="ajaxRequestDemo()"
            value="Ajax populate the data using the asynchronous request" accesskey="f" />
    </div>
    <div>
        <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Iframe synchronous data show"></asp:Label>
        <iframe id="content1" src="iframeTest.aspx"></iframe>
    </div>
    </form>

注意这里我首先定义了一个表格，该表格有四个列，分别对应xml格式文本的C1,C2,C3,C4,然后我定义了一个按钮，这个按钮将触发一个ajax请求，注意ajaxRequestDemo函数会在下边讲解,这个页面的特别之处在于我还在这里定义了一个iframe,他将超链接到iframeTest.aspx页面，我的意图是通过该页面的javascript代码，同时通过ajax请求更改iframeTest.aspx和本页的表格内容,所以

还需要在iframeTest.aspx页面中定义个表格，表格id为iframeTable，请自行添加该页面，接下来我们编写javascript代码：

<script type="text/javascript">

     /*
 执行ajax异步请求填充数据操作
 */
 //XmlHttpRequest对象
 var xmlHttpRequest ;
 function ajaxRequestDemo(){

  //创建XMLHttpRequest对象
  try{
   xmlHttpRequest =  new XMLHttpRequest();
  }catch(trymicrosoft){
   try{
    xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(othermicrosoft){
    try{
     xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    }catch(fail){
     alert("Create Object Fail!!!!!"); 
    }
   }
  }
  //定义url
  var url = "Demo.aspx";
  //打开请求
  xmlHttpRequest.open("Get",url,true);
  //设置回调函数
  xmlHttpRequest.onreadystatechange=getDateNext;
  //发送请求
  xmlHttpRequest.send(null);
 }

</script>

由上可以看出Ajax请求的步聚是：

1.定义XMLHttpRequest对象,上面的示例中，由于不同浏览器XMLHttpRequest对象的创建方式不尽相同因此需要做异常处理，这里是为了支持不同浏览器

2.定义url,该url不能作为异域调用，否则会发生网络错误，这是因为Ajax 采用一种沙箱安全模型，这里不予过多讲解，如果需要传递数据可以在url后动态绑定参数，格式如url?a=a1&b=b1&c=c1;其中a,b,c就是参数名称,a1,b1,c1就是参数的值

3.建立到服务器的请求,这需要使用XMLHttpRequest对象的open方法，该方法的原型如下：

XmlHttpRequest.open(requestType,url,[asynch],[username],[password]);

Reutrn:void,该方法的参数具体说明如下：

     ·request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
　　·url：要连接的 URL。
　　·asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
　　·username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
　　·password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。  

一般情况下虽然asynch默认为true但如果是异步调用建议将true写上，因为这是一种良好的编程习惯

4.设置回调函数,设置回调函数的属性是onreadystatechange,只要将其设置为函数名称即可

5.发送请求，可以使用send(StrParams);方法中的StrParams指代要传递的参数字符串，它的作用与上面动态构造Url的参数是一样的可以将"?"号后的字符串写入send方法中，值得注意的是它与上面的Get方式是不同的，它采用的是Post方式，这需要我们设定需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单形式如下：

xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

设置头信息前必须在open方法中设置提交类型为Post方式后在设定，如果我们采用的Get方式可以将

StrParams设置为null.

接下来我们设置回调函数：

          /*
  Ajax请求回调函数
 */
 function getDateNext(){
   if(xmlHttpRequest.readyState==4){ 
    if(xmlHttpRequest.status==200){
        //获得响应文本
     var responseText = xmlHttpRequest.responseText;
     //首先转换XML文档
     var xmlDoc;
     try
                    {
                       xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(responseText);
                    }
                    catch(e)
                    {
                      try
                      {
                        parser=new DOMParser();
                        xmlDoc=parser.parseFromString(text,"text/xml");
                      }
                      catch(e) {alert(e.message)}
                    }
     //解析结构加入表格
     var items = xmlDoc.getElementsByTagName("item");
     for(var i = 0;i<items.length;i++){
         var tr = document.all("tabScreen").insertRow();
         var td0 = tr.insertCell();
         td0.innerText=items[i].childNodes[0].text;
         var td1 = tr.insertCell();
         td1.innerText=items[i].childNodes[1].text;
         var td2 = tr.insertCell();
         td2.innerText=items[i].childNodes[2].text;
         var td3 = tr.insertCell();
         td3.innerText=items[i].childNodes[3].text;
     }
     //控制iframe内部内容
     //获取表格对象
     var table = window.parent.content1.document.getElementById("iframeTable");
     //.....此处省略控制iframe中Table代码,table对象已获得
    }
   }
 }
回调函数中的重要部分即是responseText,它表示返回的文本内容，此处为了使用xml节点分析函数，所以将其xmlDoc格式，服务器在完成请求后要通过onreadystatechange属性设置的函数名称查找要调用的方法并调用它这是事实，但是并非仅仅就是在服务器完成请求后调用，这里需要讲解一下HTTP就绪状态，HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态

0：请求没有发出（在调用 open() 之前）。

1：请求已经建立但还没有发出（调用 send() 之前）。

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。

3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。

4：响应已完成，可以访问服务器响应并使用它。

但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？比如我们遇到禁止访问资源的403错误，因此我们需要再次检查Http状态，这就需要XmlHttpRequest的status属性来进行判断，一般的当status的值为200时表示一切顺利。

好了，现在可以运行你的程序了，希望这次ajax之旅能够带给你对使用原始的ajax技术的充分理解!但是使用js来构造ajax的手法，到底是笨拙的手法，比如上面的代码可读性很低，而且有些地方还很不完善，我在这里不多讲了，如果使用当前最为流行的jQuery的话，上述问题会很轻易的解决，我会在后面的博客贴上，jQuery版的，但是仅将js代码改版，希望本编文章能带给你们对ajax的原始体验.