AJAX技术基础
AJAX简介
AJAX即“AsynchronousJavascriptAndXML”（异步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
<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=newXMLHttpRequest(); } 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+,从0到4发生变化。 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成，且响应已就绪 */ /* xmlhttp.status的值一般有两个： 200:"OK" 404:未找到页面 */ if(xmlhttp.readyState==4&&xmlhttp.status==200) { /* 将对应的元素的值改为xmlhttp.responseText responseText：获得字符串形式的响应数据。 responseXML：获得XML形式的响应数据。 */ vartxt=""; 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>
<?PHP echo“我是获取到的数据！”; ?>
Demo01.xml的内容
<?xmlversion="1.0"encoding="utf-8"?> <bookstore> <bookcategory="children"> <titlelang="en">HarryPotter</title> <author>JK.Rowling</author> <year>2005</year> <price>29.99</price> </book> <bookcategory="cooking"> <titlelang="en">EverydayItalian</title> <author>GiadaDeLaurentiis</author> <year>2005</year> <price>30.00</price> </book> <bookcategory="web"cover="paperback"> <titlelang="en">LearningXML</title> <author>ErikT.Ray</author> <year>2003</year> <price>39.95</price> </book> <bookcategory="web"> <titlelang="en">XQueryKickStart</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>
