一个最简单的AJAX实例及解析
去年开始看AJAX时候所写的第一个小程序，整理了下。应该算AJAX最简单的应用了。
首先，演示一下实际运行的ajax/ajax.html' target='_blank' class='l2'>效果。点击弹出新页面中的“See Author”链接，你将会看到该页面作者。从页面提交到显示从服务器获得的结果，这段过程你将不会发现页面的重刷新。
下面给出该示例的代码：
1. ajax.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4. <title>A simple AJAX example</title>
5. <script type="text/javascript"><!--
6. function findAuthor(file){
7. var xmlObj = null;
8. if(window.XMLHttpRequest){
9. xmlObj = new XMLHttpRequest();
10. } else if(window.ActiveXObject){
11. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
12. } else {
13. return;
14. }
15. xmlObj.onreadystatechange = function(){
16. if(xmlObj.readyState == 4){
17. updateObj('author',
18. xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
19. }
20. }
21. xmlObj.open ('GET', file, true);
22. xmlObj.send ('');
23. }
24. function updateObj(obj, data){
25. var textNode = document.createTextNode(data);
26. document.getElementById(obj).appendChild(textNode);
27. }
28. //--></script>
29. </head>
30. <body>
31. <h1>A simple AJAX program</h1>
32. <p id="obj">This page is powered by <a id='link' href="data.xml"
33. title="View the author."
34. οnclick="findAuthor('data.xml'); this.style.display='none'; return false">See
35. Author.</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
36. </body>
37. </html>
2.data.xml
1. <?xml version="1.0" encoding="UTF-8"?>
2. <author>
3. <name>www.jsfchina.org</name>
4. </author>
解析下。
该例应该算是最简单的ajax应用了。为了尽求简单性，这里没有使用到任何服务器端技术，诸如servlet,cgi等等。这里并没有使用到任何业务方法，而是直接从服务器的一个xml文档(data.xml)中读取数据。为了简洁性，本例将JavaScript文件也集成到了ajax.html中，实际应用中完全可以独立出去使用。
该例通过点击链接，激发了一个javascript的方法然后进行交互处理。
AJAX的核心是XMLHttpRequest，本例通过下列代码创建这个对象
1. var xmlObj = null;
2. if(window.XMLHttpRequest){
3. xmlObj = new XMLHttpRequest();
4. } else if(window.ActiveXObject){
5. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
6. } else {
7. return;
8. }
if(window.XMLHttpRequest)处理了浏览器是mozilla的情况，而if (window.ActiveXObject)则处理了浏览器为IE的情况，目的都是一个：创建了一个XMLHttpRequest对象。创建这个对象的目的就是让XMLHttpRequest对象与服务器交互，而不影响用户正在浏览的页面。这也是AJAX称谓的由来，异步javascript交互xml 处理。
创建好XMLHttpRequest对象之后，调用的函数将会监听该对象状态的变化，即onreadystatechange属性。XMLHttpRequest对象有5个状态，从0－4的整数，也就是说onreadystatechange调用的函数（示例中function (){...}）将会执行4次。示例中我们在该对象处于完成状态(readyState=4)时进行处理（此时服务器已经传回所有信息），为id为 “author”的span对象添加了一个textNode节点，该textNode是data.xml文档中name节点的第一个子元素的值。
好了，这就是完成一次异步交互所需要的步骤。
以下是一些注意点。
第一，本例中使用的http的GET方法，你也可以使用POST，但是要设定Content-Type值，即 xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，这个方法用来设置了MIME类型。还有一点要注意，这些方法最好都大写，否则在firefox下将没有作用。
第二，xmlObj.open ('GET', file, true)。该方法会建立与服务器的链接，‘GET’指明了http调用方法；file指明了调用的url；true指明了该调用是异步处理，可以省略，默认为'true'。
第三，xmlObj.send(para)向服务器发出请求。是以POST向服务器发出request，其参数格式为:name=namevalue&so=on
首先，演示一下实际运行的ajax/ajax.html' target='_blank' class='l2'>效果。点击弹出新页面中的“See Author”链接，你将会看到该页面作者。从页面提交到显示从服务器获得的结果，这段过程你将不会发现页面的重刷新。
下面给出该示例的代码：
1. ajax.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4. <title>A simple AJAX example</title>
5. <script type="text/javascript"><!--
6. function findAuthor(file){
7. var xmlObj = null;
8. if(window.XMLHttpRequest){
9. xmlObj = new XMLHttpRequest();
10. } else if(window.ActiveXObject){
11. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
12. } else {
13. return;
14. }
15. xmlObj.onreadystatechange = function(){
16. if(xmlObj.readyState == 4){
17. updateObj('author',
18. xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
19. }
20. }
21. xmlObj.open ('GET', file, true);
22. xmlObj.send ('');
23. }
24. function updateObj(obj, data){
25. var textNode = document.createTextNode(data);
26. document.getElementById(obj).appendChild(textNode);
27. }
28. //--></script>
29. </head>
30. <body>
31. <h1>A simple AJAX program</h1>
32. <p id="obj">This page is powered by <a id='link' href="data.xml"
33. title="View the author."
34. οnclick="findAuthor('data.xml'); this.style.display='none'; return false">See
35. Author.</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
36. </body>
37. </html>
2.data.xml
1. <?xml version="1.0" encoding="UTF-8"?>
2. <author>
3. <name>www.jsfchina.org</name>
4. </author>
解析下。
该例应该算是最简单的ajax应用了。为了尽求简单性，这里没有使用到任何服务器端技术，诸如servlet,cgi等等。这里并没有使用到任何业务方法，而是直接从服务器的一个xml文档(data.xml)中读取数据。为了简洁性，本例将JavaScript文件也集成到了ajax.html中，实际应用中完全可以独立出去使用。
该例通过点击链接，激发了一个javascript的方法然后进行交互处理。
AJAX的核心是XMLHttpRequest，本例通过下列代码创建这个对象
1. var xmlObj = null;
2. if(window.XMLHttpRequest){
3. xmlObj = new XMLHttpRequest();
4. } else if(window.ActiveXObject){
5. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
6. } else {
7. return;
8. }
if(window.XMLHttpRequest)处理了浏览器是mozilla的情况，而if (window.ActiveXObject)则处理了浏览器为IE的情况，目的都是一个：创建了一个XMLHttpRequest对象。创建这个对象的目的就是让XMLHttpRequest对象与服务器交互，而不影响用户正在浏览的页面。这也是AJAX称谓的由来，异步javascript交互xml 处理。
创建好XMLHttpRequest对象之后，调用的函数将会监听该对象状态的变化，即onreadystatechange属性。XMLHttpRequest对象有5个状态，从0－4的整数，也就是说onreadystatechange调用的函数（示例中function (){...}）将会执行4次。示例中我们在该对象处于完成状态(readyState=4)时进行处理（此时服务器已经传回所有信息），为id为 “author”的span对象添加了一个textNode节点，该textNode是data.xml文档中name节点的第一个子元素的值。
好了，这就是完成一次异步交互所需要的步骤。
以下是一些注意点。
第一，本例中使用的http的GET方法，你也可以使用POST，但是要设定Content-Type值，即 xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，这个方法用来设置了MIME类型。还有一点要注意，这些方法最好都大写，否则在firefox下将没有作用。
第二，xmlObj.open ('GET', file, true)。该方法会建立与服务器的链接，‘GET’指明了http调用方法；file指明了调用的url；true指明了该调用是异步处理，可以省略，默认为'true'。
第三，xmlObj.send(para)向服务器发出请求。是以POST向服务器发出request，其参数格式为:name=namevalue&so=on