Ajax简单例子
Ajax(Asynchronous Javascript+XML)是一种以异步方式从服务器获取数据的技术，用户单击了一个链接，不用重新载入整个页面，也能够获取新的数据。
创建XHR（XMLHttpRequest的简称）对象的时候，IE浏览器和非IE浏览器是不同的：
var xhr;
xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE浏览器
xhr = new XMLHttpRequest(); //非IE浏览器
open()函数
eg.
xhr.open("get","example.php",false);
第一个参数："get"、"post"等
第二个参数：URL，相对于当前页面或绝对路径
第三个参数：true/false，是否异步发送请求
send()函数
必须有一个参数，作为请求主体发送的数据，不需要通过请求主体发送数据必须传入null
XHR对象的属性
responseText：作为相应主体被返回的文本
responseXML：如果响应内容是"text/xml"或"application/xml"，这个属性中将保存包含着相应数据的XML文档，对于非XML数据，属性值为null
status：响应的HTTP状态
200-成功
304-请求的资源没有被修改，可以使用浏览器缓存的版本
statusText：HTTP的状态说明
readyState：请求/响应过程中的当前活动阶段
0-未初始化，尚未调用open()方法
1-启动。已调用open()方法，尚未调用send()方法
2-发送。已调用send()方法，还没收到响应
3-接收。已接收到部分响应数据
4-完成。已经全部接收
只要readyState属性值发生改变，都会触发一次readyStatechange事件，触发函数例子：
xhr.onreadystatechange = function(){do something...};
abort()函数
接收到响应之前用于取消异步请求
下面的例子是跟着php100视频教程写的，这是个很好的学PHP的教程，视频可以到php100网站下载。
这里用了3个文件：index.html , ajax.js , for.php
点击index.html的链接，会触发ajax.js中的Fetch函数，然后ajax.js中的Fetch函数取到for.php中的数据之后，显示在index.html页面上。
index.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="ajax.js"></script> </head> <body> <a href="#" onclick="Fetch('1')">1</a> <a href="for.php?id=2">2</a> <a href="for.php?id=3">3</a> <div id="show"></div> </body> </html>
ajax.js文件：
var xmlHttp; function S_xmlhttprequest() { if(window.ActiveXObject) {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//alert("IE浏览器！"); } else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();//alert("非IE浏览器！"); } } function Fetch(url) { S_xmlhttprequest(); xmlHttp.open("get","for.php?id="+url,true); xmlHttp.onreadystatechange = Response; xmlHttp.send(null); } function Response() { if(xmlHttp.readyState == 1) { document.getElementById('show').innerHTML = "loading..."; } if(xmlHttp.readyState == 4) { if(xmlHttp.Status == 200) { var v = xmlHttp.responseText; document.getElementById("show").innerHTML = v; } } }
for.php文件：
<?php $id = $_GET['id'];
sleep(2); //停顿两秒，显示loading……效果，但是只有IE9可以，Chrome和Opera不行，不知为何 if($id) { for($i = 0; $i < 10; $i++) echo $id; } exit(); ?>
上面例子在IE9中测试没问题，但在Chrome和Opera中点了1之后要么就没反应，要么就一直显示loading，不知是什么情况，还没找到问题所在。
