Home思洋影视事业部网站建设知识库
0 Comments

AJAX与XML文件进行交互式通信

发布于：2012-11-22  |   作者：广州网站建设  |   已聚集：人围观
AJAX与XML文件进行交互式通信

现在来回顾下AJAX模式实现的原理。首先在客户端创建一个XMLHttpRequest对象，这是AJAX的核心，用来与服务器进行异步通信。然后为该对象的onreadystatechange属性添加一个事件，当对象的readyState改变时就会触发指定的事件，这时发送请求读取服务器端的XML数据了。最后利用getElementsByTagName解析responseXML返回的值，完成数据的最后处理。广州网站建设

通过上面的执行可以看出，XML是AJAX数据传输的核心，那么什么是XML呢？下面从不同角度给出相应的解释。广州网站建设

XML指可扩展标记语言（EXtensible Markup Language）。

XML是一种标记语言，类似HTML。

XML的设计宗旨是传输数据，而非显示数据。

XML标签没有被预定义，需要自行定义标签。

XML被设计为具有自我描述性。

XML是W3C的推荐标准。

XML被设计为传输和存储数据，其核心是存储数据信息。它不同于HTML被设计用来显示数据，其焦点是数据的外观。可以更简要的描述为HTML旨在显示信息，而XML旨在传输信息。目前XML的应用已经无所不在，已经被作为各种应用程序之间进行数据传输的最常用的工具，并且在信息存储和描述领域变得越来越流行。

下面通过一个例子，来直观地了解AJAX是如何与XML文件进行交互式通信的。广州网站建设

（1）创建一个标准的XML文档用来存储数据。文件命名为Ajax.xml内容如下：



    
	
  1. 
		<?xml version="1.0" encoding="utf-8" ?> 
    2. 
	
  2. 
		<family> 
    3. 
	
  3. 
		<member> 
    4. 
	
  4. 
		   <name>Mark</name> 
    5. 
	
  5. 
		   <doing>task1</doing> 
    6. 
	
  6. 
		</member>   
    7. 
	
  7. 
		<member> 
    8. 
	
  8. 
		   <name>Annie</name> 
    9. 
	
  9. 
		   <doing>task2</doing> 
    10. 
	
  10. 
		</member>   
    11. 
	
  11. 
		<member> 
    12. 
	
  12. 
		   <name>Nathan</name> 
    13. 
	
  13. 
		   <doing>task3</doing> 
    14. 
	
  14. 
		</member>   
    15. 
	
  15. 
		<member> 
    16. 
	
  16. 
		   <name>Rob</name> 
    17. 
	
  17. 
		   <doing>task4</doing> 
    18. 
	
  18. 
		</member>   
    19. 
	
  19. 
		<member> 
    20. 
	
  20. 
		   <name>Chris</name> 
    21. 
	
  21. 
		   <doing>task5</doing> 
    22. 
	
  22. 
		</member> 
    23. 
	
  23. 
		</family> 
    24. 




	 

（2）创建一个文件名为AjaxDemo.html的文件，来读取和处理XML文档的数据，获得数据后再通过一个2列5行的表格显示出来。具体的代码如下：

广州网站设计


    
	
  1. 
		<html> 
    2. 
	
  2. 
		<head> 
    3. 
	
  3. 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
	
  4. 
		<title>Ajax-xml</title> 
    5. 
	
  5. 
		<script type="text/JavaScript"> 
    6. 
	
  6. 
		<!--  
    7. 
	
  7. 
		function GetXmlHttpObject(){  
    8. 
	
  8. 
		xmlHttp=null;  
    9. 
	
  9. 
		try{  
    10. 
	
  10. 
		   xmlHttp = new XMLHttpRequest();      //针对Firefox、Opera及Safari浏览器  
    11. 
	
  11. 
		}  
    12. 
	
  12. 
		catch(e){  
    13. 
	
  13. 
		   try{  
    14. 
	
  14. 
		    xmlHttp = new ActiveObject("Msxml2.XMLHTTP");  
    15. 
	
  15. 
		                                              //针对Internet Explorer 6.0+  
    16. 
	
  16. 
		   }  
    17. 
	
  17. 
		   catch(e){  
    18. 
	
  18. 
		    try{  
    19. 
	
  19. 
		     xmlHttp = new ActiveObject("Microsoft.XMLHTTP");  
    20. 
	
  20. 
		                                              //针对Internet Explorer 5.5+  
    21. 
	
  21. 
		    }  
    22. 
	
  22. 
		    catch(e){  
    23. 
	
  23. 
		     alert('对不起!您的浏览器不支持AJAX');       //弹出错误提示信息（AJAX失败）  
    24. 
	
  24. 
		     return false;  
    25. 
	
  25. 
		    }  
    26. 
	
  26. 
		   }  
    27. 
	
  27. 
		}  
    28. 
	
  28. 
		return xmlHttp;  
    29. 
	
  29. 
		}  
    30. 
	
  30. 
		//改变状态  
    31. 
	
  31. 
		function state_Changed(){  
    32. 
	
  32. 
		if(xmlHttp.readyState!=4)return;  
    33. 
	
  33. 
		if(xmlHttp.status!=200){  
    34. 
	
  34. 
		   alert('加载XML文件失败');                    //弹出错误提示信息（XML失败）  
    35. 
	
  35. 
		   return;  
    36. 
	
  36. 
		}  
    37. 
	
  37. 
		txt="<table border='1'>";  
    38. 
	
  38. 
		x=xmlHttp.responseXML.documentElement.getElementsByTagName("member");  
    39. 
	
  39. 
		for (i=0;i<x.length;i++)  
    40. 
	
  40. 
		   {  
    41. 
	
  41. 
		   txttxt=txt + "<tr>";  
    42. 
	
  42. 
		   xxx=x[i].getElementsByTagName("name");      //传回名称为name的元素集合  
    43. 
	
  43. 
		     {  
    44. 
	
  44. 
		     try  
    45. 
	
  45. 
		       {  
    46. 
	
  46. 
		       txttxt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";  
    47. 
	
  47. 
		       }  
    48. 
	
  48. 
		     catch (er)  
    49. 
	
  49. 
		       {  
    50. 
	
  50. 
		       txttxt=txt + "<td> </td>";  
    51. 
	
  51. 
		       }  
    52. 
	
  52. 
		     }  
    53. 
	
  53. 
		   xxx=x[i].getElementsByTagName("doing");     //传回名称为doing的元素集合  
    54. 
	
  54. 
		     {  
    55. 
	
  55. 
		     try  
    56. 
	
  56. 
		       {  
    57. 
	
  57. 
		       txttxt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";//子节点的值  
    58. 
	
  58. 
		       }  
    59. 
	
  59. 
		     catch (er)  
    60. 
	
  60. 
		       {  
    61. 
	
  61. 
		       txttxt=txt + "<td> </td>";  
    62. 
	
  62. 
		       }  
    63. 
	
  63. 
		     }  
    64. 
	
  64. 
		   txttxt=txt + "</tr>";  
    65. 
	
  65. 
		   }  
    66. 
	
  66. 
		txttxt=txt + "</table>";  
    67. 
	
  67. 
		document.getElementById('name').innerHTML = txt;        //为name元素赋值  
    68. 
	
  68. 
		}  
    69. 
	
  69. 
		function showXml(url){  
    70. 
	
  70. 
		xmlHttp = GetXmlHttpObject();  
    71. 
	
  71. 
		if(xmlHttp!=null){  
    72. 
	
  72. 
		   xmlHttp.onreadystatechange = state_Changed;          //修改对象状态  
    73. 
	
  73. 
		   xmlHttp.open("GET",url,true);  
    74. 
	
  74. 
		   xmlHttp.send(null);  
    75. 
	
  75. 
		}  
    76. 
	
  76. 
		}  
    77. 
	
  77. 
		//--> 
    78. 
	
  78. 
		</script> 
    79. 
	
  79. 
		</head> 
    80. 
	
  80. 
		<body> 
    81. 
	
  81. 
		<p><span id="name"></span></p> 
    82. 
	
  82. 
		<form><input type="button" value="显示XML" id="ok" name="ok" 
    83. 
	
  83. 
		    onclick="showXml('Ajax.xml')" /></form> 
    84. 
	
  84. 
		</body> 
    85. 
	
  85. 
		</html> 
    86. 




	广州网站设计

（3）在浏览器中执行AjaxDemo.html文件，预览效果如图9.3所示。


	
		

			
				
		

		

			
				图9.3  AJAX与XML文件数据通信
		

	



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机