Ajax实现异步操作实例_针对XML格式的请求数据

ゝ一纸荒年。 2022-03-27 09:52 78阅读 0赞

js分类中有一节【原生js异步请求,XML解析】主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析，今天我将用一个实例来说明具体要如何操作.

前台的参数类型也是XML使用的是jquery：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function test(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>xmlString =</code> 
      <code>"&lt;bookstore&gt;"</code> 
      <code>+</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"&lt;book Type='必修课' ISBN='7-111-19149-2'&gt;"</code> 
      <code>+</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"&lt;title&gt;数据结构&lt;/title&gt;"</code> 
      <code>+</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"&lt;author&gt;严蔚敏&lt;/author&gt;"</code> 
      <code>+</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"&lt;price&gt;30.00&lt;/price&gt;"</code> 
      <code>+</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"&lt;/book&gt;&lt;/bookstore&gt;"</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$.ajax({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>type:&nbsp;</code> 
      <code>"post"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>url:&nbsp;</code> 
      <code>"Hand/Ajax.ashx"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>data:&nbsp;</code> 
      <code>"strxml="</code> 
      <code>+xmlString,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>datatype:</code> 
      <code>"xml"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>success: function(xml){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//根据resultText更新页面</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"success"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert($(xml).find(</code> 
      <code>'Table1'</code> 
      <code>).find(</code> 
      <code>'title'</code> 
      <code>).text());</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>error:function(XMLResponse){alert(XMLResponse.responseText)}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

前台出入的是XML格式的参数，后台该如何操作呢？这个有针对XML读写，这里就简单的说明一下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>XmlDocument xdoc =&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>XmlDocument();&lt;br&gt;</code> 
      <code>//xml字符串操作</code> 
     </div> 
     <div> 
      <code>xdoc.LoadXml(strxml);</code> 
      <code>//读取xml字符串strxml</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

// Add a price element.添加一个节点
       XmlElement newElem = doc.CreateElement("price");
       newElem.InnerText = "10.95";
       doc.DocumentElement.AppendChild(newElem);//添加一个节点

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>xdoc.Load(fileName);</code> 
      <code>//读取xml文件fileName是文件的路径</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

以上简单说明LoadXml和Load简单用法，这里就不做详细说明。下面是后台处理前台的xml格式的参数

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>// 得到根节点bookstore</code> 
     </div> 
     <div> 
      <code>XmlNode xn = xdoc.SelectSingleNode(</code> 
      <code>"bookstore"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>// 得到根节点的所有子节点</code> 
     </div> 
     <div> 
      <code>XmlNodeList xnl = xn.ChildNodes;</code> 
     </div> 
     <div> 
      <code>// 将节点转换为元素，便于得到节点的属性值</code> 
     </div> 
     <div> 
      <code>XmlElement xe = (XmlElement)(xnl.Item(0));</code> 
     </div> 
     <div> 
      <code>// 得到Type和ISBN两个属性的属性值</code> 
     </div> 
     <div> 
      <code>string</code>&nbsp; 
      <code>bookISBN = xe.GetAttribute(</code> 
      <code>"ISBN"</code> 
      <code>).ToString();</code> 
     </div> 
     <div> 
      <code>string</code>&nbsp; 
      <code>bookType = xe.GetAttribute(</code> 
      <code>"Type"</code> 
      <code>).ToString();</code> 
     </div> 
     <div> 
      <code>// 得到Book节点的所有子节点</code> 
     </div> 
     <div> 
      <code>XmlNodeList xnl0 = xe.ChildNodes;</code> 
     </div> 
     <div> 
      <code>string</code>&nbsp; 
      <code>bookName = xnl0.Item(0).InnerText;</code> 
     </div> 
     <div> 
      <code>string</code>&nbsp; 
      <code>bookAuthor = xnl0.Item(1).InnerText;</code> 
     </div> 
     <div> 
      <code>double</code>&nbsp; 
      <code>bookPrice = Convert.ToDouble(xnl0.Item(2).InnerText);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

后台处理之后，返回xml格式的数据，当然这个前提context.Response.ContentType = "text/xml";

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>DataSet ds =&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>DataSet();</code> 
     </div> 
     <div> 
      <code>ds = GetList();</code> 
     </div> 
     <div> 
      <code>context.Response.Clear();</code> 
     </div> 
     <div> 
      <code>context.Response.Write(ds.GetXml());　</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个是jQuery+Ajax+xml的应用