此实例既是一个AJAX的实例，同事也是一个js解析xml的实例。 对想学习ajax和js解析XML的新手来说，是一个不错的实例。 希望对大家有帮助。此实例设计到两个文件。一个是 test.php文件，改文件里
注：本网站为码农们提供的大量编程教程：，，，，，，，等等，如有兴趣，大家可以学习。
test.php文件代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'&
&title&js ajax经典实例之解析xml&/title&
&script type="text/javascript"&
//使用工厂的方法来创建xmlHttpRequest对象
function createXmlHttpRequest(){
var xmlHttpRequest=
if(window.ActiveXObject){
//以下代码是IE中创建xmlHttpRequest对象的方法
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
//以下代码是其他浏览器中创建xmlHttpRequest对象的方法
xmlHttpRequest = new XMLHttpRequest();
return xmlHttpR
function getData(){
//如果xmlHttpRequest对象创建成功，就开始请求服务器
var xmlHttpRequest=createXmlHttpRequest();
if(xmlHttpRequest){
//打开请求,第一个参数表示请求的类型(get或post)，第二个参数表示请求的服务器地址,第三个参数表示是否异步(异步指的可以同时执行，同步则表示执行完步骤一，然后才能执行步骤二)
xmlHttpRequest.open("get","xml.php",true);
//设置xmlHttpRequest对象的onreadystatechange事件，onreadystatechange存储函数（或函数名），每当xmlHttpRequest对象的readyState 属性改变时，就会调用该函数。readyState存有 xmlHttpRequest的状态。从 0 到 4 发生变化，0表示请求未初始化，1表示服务器连接已建立，2表示请求已接收 3表示请求处理中 4表示请求已完成，且响应已就绪，
xmlHttpRequest.onreadystatechange=function(){
if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//当请求完成且状态为ok的时候，下面会解析ajax返回的xml.
var xml=xmlHttpRequest.responseXML;//接受服务器返回的xml对象，并存储在xml变量中
//下面解析xml；
var persons=xml.getElementsByTagName("person");
var str="";
for(var i=0;i&persons.i++){
var fc= persons[i];
var name=fc.getElementsByTagName("name")[0].innerHTML;
var age=fc.getElementsByTagName("age")[0].innerHTML;
var weight=fc.getElementsByTagName("weight")[0].innerHTML;
var height=fc.getElementsByTagName("height")[0].innerHTML; str+="name:"+name+"&&age:"+age+"&&weight:"+weight+"&&height:"+height+"&br/&"
document.getElementById("data").innerHTML=
xmlHttpRequest.send();
&input type="button" value="获取数据" onclick="getData();"/&
&div id="data"&&/div&
xml.php文件代码如下： &
header("Content-type:text/xml");
$arr=array(
array("name"=&"张三","age"=&"16","weight"=&"50","height"=&"160"),
array("name"=&"李四","age"=&"17","weight"=&"51","height"=&"165"),
array("name"=&"王二","age"=&"18","weight"=&"55","height"=&"170"),
array("name"=&"javior","age"=&"20","weight"=&"68","height"=&"179")
$xml="&?xml version='1.0' encoding='gb2312'?&";
$xml.="&persons&";
foreach($arr as $k=&$v){
$xml.="&person&";
$xml.="&name&".$v["name"]."&/name&";
$xml.="&age&".$v["age"]."&/age&";
$xml.="&weight&".$v["weight"]."&/weight&";
$xml.="&height&".$v["height"]."&/height&";
$xml.="&/person&";
$xml.="&/persons&";
原文地址：
Javascript知识点必读详解AJAX工作原理以及实例讲解（通俗易懂） - 推酷
详解AJAX工作原理以及实例讲解（通俗易懂）
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX 实例解释
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
&div id=&myDiv&&&h3&Let AJAX change this text&/h3&&/div&
&button type=&button& onclick=&loadXMLDoc()&&Change Content&/button&
接下来，在页面的 head 部分添加一个 &script& 标签。该标签中包含了这个 loadXMLDoc() 函数：
&script type=&text/javascript&&
function loadXMLDoc()
.... AJAX script goes here ...
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject(&Microsoft.XMLHTTP&);
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject(&Microsoft.XMLHTTP&);
XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open(&GET&,&test1.txt&,true);
xmlhttp.send();
规定请求的类型、URL 以及是否异步处理请求。
：请求的类型；GET 或 POST
：文件在服务器上的位置
：true（异步）或 false（同步）
将请求发送到服务器。
：仅用于 POST 请求
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
一个简单的 GET 请求：
xmlhttp.open(&GET&,&demo_get.asp&,true);
xmlhttp.send();
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open(&GET&,&demo_get.asp?t=& + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open(&GET&,&demo_get2.asp?fname=Bill&lname=Gates&,true);
xmlhttp.send();
一个简单 POST 请求：
xmlhttp.open(&POST&,&demo_post.asp&,true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open(&POST&,&ajax_test.asp&,true);
xmlhttp.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
xmlhttp.send(&fname=Bill&lname=Gates&);
setRequestHeader(
向请求添加 HTTP 头。
: 规定头的名称
: 规定头的值
url - 服务器上的文件
open() 方法的&
&参数是服务器上文件的地址：
xmlhttp.open(&GET&,&ajax_test.asp&,true);
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open(&GET&,&ajax_test.asp&,true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
Async = true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById(&myDiv&).innerHTML=xmlhttp.responseT
xmlhttp.open(&GET&,&test1.txt&,true);
xmlhttp.send();
Async = false
如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
xmlhttp.open(&GET&,&test1.txt&,false);
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xmlhttp.open(&GET&,&test1.txt&,false);
xmlhttp.send();
document.getElementById(&myDiv&).innerHTML=xmlhttp.responseT
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText
获得字符串形式的响应数据。
responseXML
获得 XML 形式的响应数据。
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById(&myDiv&).innerHTML=xmlhttp.responseT
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
&文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName(&ARTIST&);
for (i=0;i&x.i++)
txt=txt + x[i].childNodes[0].nodeValue + &&br /&&;
document.getElementById(&myDiv&).innerHTML=
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById(&myDiv&).innerHTML=xmlhttp.responseT
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个
的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction()
loadXMLDoc(&ajax_info.txt&,function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById(&myDiv&).innerHTML=xmlhttp.responseT
好了，以上都是摘自W3C上的权威指南，是关于ajax的一些基本的概念，原理以及简单的用法，希望对大家有帮助
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致