AJAX技术基础
AJAX简介
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
很多初学者都以为AJAX是一门是一种新的编程语言，其实它只是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
AJAX基本原理
从图中我们可以看出，在客户端的用户界面通过Javascript引用Ajax引擎，Ajax引擎调用HttpRequest对象（已经被Javascript封装，直接声明即可！）访问WEB服务器，WEB服务器将获得的数据结果生成XML的形式返回至页面前端，并生成对应的HTML+CSS。
Ajax实例01
Demo01.html文件内容如下
<html>
<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<scripttype="text/javascript">
functionloadXMLDoc1()
{
//声明一个对象
varxmlhttp;
//解决浏览器兼容问题
if(window.XMLHttpRequest)
{
//IE7+, Firefox, Chrome, Opera, Safari版本的浏览器使用
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5浏览器使用
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
//xmlhttp对象的onreadystatechange是此对象的成员。每当 readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
/*
xmlhttp.readyState的值有5个,从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200:"OK"
404: 未找到页面
*/
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
*/
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./Demo01.php",true);
xmlhttp.send();
}
functionloadXMLDoc2()
{
//声明一个对象
varxmlhttp;
//解决浏览器兼容问题
if(window.XMLHttpRequest)
{
//IE7+, Firefox, Chrome, Opera, Safari版本的浏览器使用
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5浏览器使用
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
//xmlhttp对象的onreadystatechange是此对象的成员。每当 readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
/*
xmlhttp.readyState的值有5个,从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200:"OK"
404: 未找到页面
*/
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
*/
var txt="";
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("author");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue +"<br />";
}
alert(x);
document.getElementById("myDiv2").innerHTML=txt;
}
}
xmlhttp.open("GET","./Demo01.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX实例Demo01</h2>
<buttontype="button" onclick="loadXMLDoc1()">请求数据,返回形式为字符串！</button>
<divid="myDiv1"></div>
<buttontype="button" onclick="loadXMLDoc2()">请求数据,返回形式为XML文件的内容！</button>
<divid="myDiv2"></div>
</body>
</html>Demo01.php的内容
<?php echo“我是获取到的数据！”; ?>
Demo01.xml的内容
<?xmlversion="1.0" encoding="utf-8"?> <bookstore> <bookcategory="children"> <titlelang="en">Harry Potter</title> <author>JK. Rowling</author> <year>2005</year> <price>29.99</price> </book> <bookcategory="cooking"> <titlelang="en">Everyday Italian</title> <author>GiadaDe Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <bookcategory="web" cover="paperback"> <titlelang="en">Learning XML</title> <author>ErikT. Ray</author> <year>2003</year> <price>39.95</price> </book> <bookcategory="web"> <titlelang="en">XQuery Kick Start</title> <author>JamesMcGovern</author> <author>PerBothner</author> <author>KurtCagle</author> <author>JamesLinn</author> <author>VaidyanathanNagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore>
提示：为了您的方便，我上传了本次实例的附件，您也可以下载试验！
