Jquery Ajax 读取XML 数据
01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %>
02.
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.
05.<html xmlns="http://www.w3.org/1999/xhtml">
06.<head runat="server">
07. <title></title>
08. <style type="text/css">
09. </style>
10. <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11. <script type="text/javascript">
12. $(document).ready(function () {
13. $("#Display").click(function () {
14. $("#message").html('');
15. $.ajax({
16. type: "GET",
17. url: "Friend.xml",
18. dataType: "xml",
19. success: function (ResponseText) {
20. var table = "<table border='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
21. $(ResponseText).find('friend').each(function () {
22. var first = $(this).find('firstName').text();
23. var last = $(this).find('lastName').text();
24. var city = $(this).find('city').text();
25. table += "<tr><td>" + first + "</td><td>" + last + "</td><td>" + city + "</td></tr>";
26. })
27. table += "</table>";
28. $("#message").append(table);
29. }
30. });
31. });
32. });
33. </script>
34.</head>
35.<body>
36. <form id="form1" runat="server">
37. <label>Display My Friends</label><br />
38. <input type="button" value="Display" id="Display" />
39. <div id="message"></div>
40. </form>
41.</body>
42.</html>
02.
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.
05.<html xmlns="http://www.w3.org/1999/xhtml">
06.<head runat="server">
07. <title></title>
08. <style type="text/css">
09. </style>
10. <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11. <script type="text/javascript">
12. $(document).ready(function () {
13. $("#Display").click(function () {
14. $("#message").html('');
15. $.ajax({
16. type: "GET",
17. url: "Friend.xml",
18. dataType: "xml",
19. success: function (ResponseText) {
20. var table = "<table border='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
21. $(ResponseText).find('friend').each(function () {
22. var first = $(this).find('firstName').text();
23. var last = $(this).find('lastName').text();
24. var city = $(this).find('city').text();
25. table += "<tr><td>" + first + "</td><td>" + last + "</td><td>" + city + "</td></tr>";
26. })
27. table += "</table>";
28. $("#message").append(table);
29. }
30. });
31. });
32. });
33. </script>
34.</head>
35.<body>
36. <form id="form1" runat="server">
37. <label>Display My Friends</label><br />
38. <input type="button" value="Display" id="Display" />
39. <div id="message"></div>
40. </form>
41.</body>
42.</html>
01.<?xml version="1.0" encoding="utf-8" ?>
02.<friends>
03. <friend>
04. <name>
05. <firstName>Guo</firstName>
06. <lastName>Hu</lastName>
07. </name>
08. <address>
09. <province>Shanghai</province>
10. <city>PuDong</city>
11. </address>
12. </friend>
13. <friend>
14. <name>
15. <firstName>Lei</firstName>
16. <lastName>Hu</lastName>
17.
18. </name>
19. <address>
20. <province>hubei</province>
21. <city>xiantao</city>
22. </address>
23. </friend>
24. <friend>
25. <name>
26. <firstName>JunWen</firstName>
27. <lastName>Li</lastName>
28. </name>
29. <address>
30. <province>hubei</province>
31. <city>wuhan</city>
32. </address>
33. </friend>
34. <friend>
35. <name>
36. <firstName>Jinhao</firstName>
37. <lastName>Liu</lastName>
38. </name>
39. <address>
40. <province>ShanXi</province>
41. <city>Taiyuan</city>
42. </address>
43. </friend>
44. <friend>
45. <name>
46. <firstName>Cheng</firstName>
47. <lastName>Fang</lastName>
48. </name>
49. <address>
50. <province>GuangDong</province>
51. <city>GuangZhou</city>
52. </address>
53. </friend>
54.</friends>
02.<friends>
03. <friend>
04. <name>
05. <firstName>Guo</firstName>
06. <lastName>Hu</lastName>
07. </name>
08. <address>
09. <province>Shanghai</province>
10. <city>PuDong</city>
11. </address>
12. </friend>
13. <friend>
14. <name>
15. <firstName>Lei</firstName>
16. <lastName>Hu</lastName>
17.
18. </name>
19. <address>
20. <province>hubei</province>
21. <city>xiantao</city>
22. </address>
23. </friend>
24. <friend>
25. <name>
26. <firstName>JunWen</firstName>
27. <lastName>Li</lastName>
28. </name>
29. <address>
30. <province>hubei</province>
31. <city>wuhan</city>
32. </address>
33. </friend>
34. <friend>
35. <name>
36. <firstName>Jinhao</firstName>
37. <lastName>Liu</lastName>
38. </name>
39. <address>
40. <province>ShanXi</province>
41. <city>Taiyuan</city>
42. </address>
43. </friend>
44. <friend>
45. <name>
46. <firstName>Cheng</firstName>
47. <lastName>Fang</lastName>
48. </name>
49. <address>
50. <province>GuangDong</province>
51. <city>GuangZhou</city>
52. </address>
53. </friend>
54.</friends>
