本文导入自一个特别古老的 WordPress 博客,内容可能会显得太年轻、太简单,不具有太大参考价值! 了解详情»
AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)现在已经进入了各种各样的web2.0网站。它的最大特色就是在不重新加载整个页面的情况下完成对局部内容的改变(想想我们的微博吧)。

之前和@blueset聊天时候提到了使用AJAX动态显示新数据。本文是比较基础的入门指导,目标如下:
  • 显示服务器传来的文字数据
  • 解析服务器传来的XML
  • 间隔一段时间自动更新数据
欲知如何编写,请看全文……

Hello, AJAX

现在准备好享受Ajax了吗?首先创建一个文本文件ajax_data.txt并写入如下内容

[xml]

Hello, AJAX.

[/xml]

在这个文件里面我们写入了一句话,然后再创建一个HTML文档,内容如下

[html]

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AJAX Hello</title> </head>

<body> <div id="output"></div> </body> </html>

[/html]

接下来写代码。在</div>后面插入这些代码(不要忘记了用<script>这个东西包围):

[java]

var xmlTopNotice

function updateNotice(){ xmlTopNotice=GetXmlHttpObject(); if (xmlTopNotice==null){ //alert ("你的浏览器不支持AJAX!"); return; } var url="ajax_data.txt"; xmlTopNotice.onreadystatechange=stateChanged_Top; xmlTopNotice.open("GET",url,true); xmlTopNotice.send(null); }

function stateChanged_Top(){ if (xmlTopNotice.readyState==4){ //已经加载了 document.getElementById("output").innerHTML==xmlTopNotice.responseText; } }

function GetXmlHttpObject(){ var xmlTopNotice=null; try { // Firefox, Opera 8.0+, Safari, Chrome... xmlTopNotice=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlTopNotice=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlTopNotice=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlTopNotice; }

updateNotice(); //调用这个东西就可以更新了

[/java]

打开该html文件,一会儿就可以看见屏幕上出现了“Hello, AJAX.”
.

用XML传递信息

单纯的文字数据不好搞定,那么为什么不试试XML呢?XML很直观,而且在下面程序中的XML DOM有超简易的获取某项内容的方法。

这次写一个XML文件:ajax1.xml

[xml]

<?xml version="1.0" encoding="GB2312"?> <xml> <info id="msg1">你好,AJAX</info> <info id="msg2">Hello,AJAX</info> </xml>

[/xml]
【重要知识】MIME必须是XML特有的!

大家应该都知道,每种文件都有不同的MIME类型(Content-Type)。其中XML的就是text/xml。一般服务器都会根据扩展名自动把预置的文件类型发送到访客那里。

有意思的是XML DOM解析我遇到了这种情况:我直接把上文的xml数据保存为php文件拿去解析,结果解析失败。原因是php默认MIME不会无聊到和XML一样,然而本文AJAX解析XML必须有正确的MIMIE。

很无语对吧。所以以后如果要使用php来冒充xml,在代码顶部必须有这么一句话:

<?php header("Content-Type: text/xml"); ?>

除此之外,由于 <?xml 可能会被误解析为php代码,所以该php文件第一行应该像这样代替:

<?php echo '<?xml version="1.0" encoding="GB2312"?><notice>'; ?>
这次我们的目的是获取ID为msg1的那个项(<item>)的内容。

找到之前【document.getElementById("output").innerHTML=....;】这行代码,删除,然后用以下代码替换之:

[java]

var xmlDoc=xmlTopNotice.responseXML; //把它解析成一个XML DOM document.getElementById("output").innerHTML=xmlDoc.getElementsById("msg1").childNodes[0].nodeValue;

[/java]
【重要知识】nodeValue前面为什么还要一个childNodes[0]?

现在无论是AJAX还是Flash里面的XMLNode对象,除了类似id之类直接被包在<和>之间的东西,其他都是节点,只是类型不同而已。

例如这个xml内容片段:

[xml]

<item name="words">ABC</item>

[/xml]

上面的name="words"不属于节点类,而是属性类。 然而ABC是一种节点,不过这种节点比较特别——仅是一串文字而已。

属性可用.getAttribute("name")获得。 文字节点可用.nodeValue获得。
然后测试结果是显示“你好, AJAX”!

另外,除了使用getElementById获取节点,getElementsByTagName也可以用于获取节点。 例如【.getElementsByTagName("info")】可以获取全部以【<info】开头的节点的数组。前面使用的【getElementsById("msg1")】完全可以修改为【getElementsByTagName("info")[0]】

.

自动间隔一段时间查询

这个超级好搞定的!例如前面的代码片段 [java]

function stateChanged_Top(){ if (xmlTopNotice.readyState==4){ //已经加载了 document.getElementById("output").innerHTML==xmlTopNotice.responseText; } }

[/java]

你只要在倒数第二个右大括号之前插入一段代码,让电脑过xxx毫秒之后再次运行AJAX(呼叫之前定义的updateNotice();这个东西)即可 [java]

function stateChanged_Top(){ if (xmlTopNotice.readyState==4){ //已经加载了 document.getElementById("output").innerHTML==xmlTopNotice.responseText; setTimeout('updateNotice();',1000); } }

[/java]