Ajax中的XML

前端之家收集整理的这篇文章主要介绍了Ajax中的XML前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、从服务器端输出xml格式数据

  1. <%@ WebHandler Language="C#" Class="GetUser" %>
  2.  
  3. using System;
  4. using System.Web;
  5. using System.Xml;
  6. using System.Xml.Serialization;
  7. using System.Text;
  8. using BookShopBLL;
  9. using BookShopModels;
  10.  
  11. public class GetUser : IHttpHandler {
  12. public void ProcessRequest (HttpContext context) {
  13. context.Response.ContentType = "text/xml";//xml类型
  14.  
  15. if (context.Request.QueryString["loginId"]!=null)
  16. {
  17. //1.根据地址参数获取实体类
  18. Users user = UserManager.GetUserByLoginId(context.Request.QueryString["loginId"].ToString());
  19.  
  20. if (user!=null)
  21. {
  22. XmlWriter writer = null;
  23. try
  24. {
  25. //2.创建一个XMLSerializer对象
  26. XmlSerializer serializer = new XmlSerializer(user.GetType());
  27.  
  28. //3.将XMLWriter对象赋值为XMLTextWriter对象
  29. writer = new XmlTextWriter(context.Response.OutputStream,Encoding.UTF8);
  30.  
  31. //4.调用序列化方法
  32. serializer.Serialize(writer,user);
  33. }
  34. finally
  35. {
  36. if (writer!=null)
  37. {
  38. //5.关闭写入器
  39. writer.Close();
  40. }
  41. }
  42. }
  43. }
  44. }
  45. public bool IsReusable {
  46. get {
  47. return false;
  48. }
  49. }
  50.  
  51. }
生成的xml文件 结果如图:



二、使用XMLDocument

后置代码

  1. if (!Page.IsPostBack)
  2. {
  3. if (Session["loginid"]!=null)
  4. {
  5. this.ltlUser.Text = string.Format("您好,"
  6. +"<span onmouSEOver='getUser(this.innerHTML)' "
  7. //关闭closeUser()方法用来关闭显示的div
  8. +"onmouSEOut='closeUser()'>{0}</span>"
  9. +"<a href='Menbership/UserExit.aspx'>【注销】</a>",Session["loginid"].ToString()
  10. );
  11. }
  12. }

显示用户信息的html文档代码
  1. <asp:Literal ID="ltlUser" runat="server" >
  2. <a href="UserLogin.aspx">登录</a><a href="Register.aspx">【免费注册</a>
  3. </asp:Literal>
  4. <div id="userinfo" style="display:none;">
  5. <p>
  6. <label>
  7. 姓名:
  8. </label>
  9. <label id="Name">
  10. </label>
  11. </p>
  12. <p>
  13. <label>
  14. 地址:
  15. </label>
  16. <label id="Address">
  17. </label>
  18. </p>
  19. <p>
  20. <label>
  21. 电话:
  22. </label>
  23. <label id="Phone">
  24. </label>
  25. </p>
  26. <p>
  27. <label>
  28. Mail:
  29. </label>
  30. <label id="Mail">
  31. </label>
  32. </p>
  33. </div>

Css代码
  1. <style type="text/css">
  2. #userinfo
  3. {
  4. position: absolute;
  5. padding: 5px 5px 5px 5px;
  6. left: 80px;
  7. top: 30px;
  8. background-color: #FAFAD2;
  9. display: block;
  10. width: 220px;
  11. height: 80px;
  12. color: #000;
  13. overflow: hidden;
  14. border: solid 1px #F7F7F7;
  15. }
  16. </style>

实现javascript函数完成用户信息显示
  1. <script language ="javascript" type="text/javascript" >
  2.  
  3. function closeUser() {
  4. document.getElementById("userinfo").style.display = "none";
  5. }
  6.  
  7. function CreateXmlHttpRequest() {
  8. if (window.ActiveXObject) {//如果是IE浏览器
  9. return new ActiveXObject("Microsoft.XMLHTTP");
  10. }
  11. else if (window.XMLHttpRequest) {//非IE浏览器
  12. return new XMLHttpRequest();
  13. }
  14. }
  15.  
  16. function getUser(loginId) {
  17. if (loginId != "") {
  18. var url = "ajaxHandler/GetUser.ashx?loginId=" + loginId;
  19. var xhr = CreateXmlHttpRequest();
  20.  
  21. //设置回调函数
  22. xhr.onreadystatechange = function () {
  23.  
  24. if (xhr.readyState == 4
  25. && xhr.status == 200) {
  26.  
  27. document.getElementById("userinfo").style.display = "inline";
  28.  
  29. var dom = xhr.responseXML; //得到XMLDocument对象
  30. //获取节点数据
  31. document.getElementById("Name").innerHTML = dom.getElementsByTagName("Name")[0].text;
  32. document.getElementById("Address").innerHTML = dom.getElementsByTagName("Address")[0].text;
  33. document.getElementById("Phone").innerHTML = dom.getElementsByTagName("Phone")[0].text;
  34. document.getElementById("Mail").innerHTML = dom.getElementsByTagName("Mail")[0].text;
  35. }
  36. };
  37. xhr.open("GET",url,true);
  38. xhr.send(null);
  39. }
  40. }
  41. </script>

以上效果支持IE浏览器!!!结果如图:

猜你在找的Ajax相关文章