（功能）ajax能且仅能 从服务器读取文件
（环境）需要服务器环境才能测试，可以用工具建立本地服务器环境
（缓存）解决缓存问题：url加时间戳让每次请求地址唯一，如 url=‘abc.txt?t=‘+new Date().getTime();
（编码）请求的文件必须与网页的编码一致，否则乱码
（处理）eval()处理请求结果很方便，自动分割。但据说eval有很多问题，除了ajax中，其它地方暂时不要乱用。
（实例）请求数据并在同一个块内显示、json数据处理、分页数据请求
ajax函数四步：
1.创建ajax对象
2.连接服务器
3.发送请求
4.接收返回
//用一个不存在的变量：出错
//用一个不存在的属性：undefined
ajax封装函数(可以直接使用)：
// 开始----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function ajax(url, fnSucc, fnFaild){
//1.创建ajax对象
var oAjax=null;
if(window.XMLHttpRequest){ // 对ie6来说，window.XMLHttpRequest 是一个undefined属性，为假；其它浏览器是存在的，为真。若此处为 XMLHttpRequest ，则ie6中无法通过，报错。
oAjax=new XMLHttpRequest(); // ie6不认
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6专属
}
//2.连接服务器
oAjax.open(‘GET‘, url, true); //open(方法, url, 是否异步)
//3.发送请求
oAjax.send();
//4.接收返回
//OnReadyStateChange
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){ //请求状态已完成：0未初始化、1发送请求、2收到全部响应内容、3对加密内容解析、4内容解析完成可以使用了
if(oAjax.status==200){ //请求结果：已经成功获取指定url的内容。
fnSucc(oAjax.responseText); //设置解析完的结果为传入的成功函数的参数，使用后续函数操作
}else{
if(fnFaild){ //如果获取内容失败且存在失败时处理函数，则执行
fnFaild();
}
}
}
};
}
// 结束----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
请求状态监控
onreadystatechange事件
readyState属性：请求状态
0（未初始化）还没有调用open()方法
1（载入）已调用send()方法，正在发送请求
2（载入完成）send()方法完成，已收到全部响应内容
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用了
status属性：请求结果（200：成功； 404、300+、500+：都是有错误，如未找到文件）
responseText：请求得到的内容
// 简单ajax()使用(加时间戳) =============================================================
// 须先引入上面封装的ajax()函数
window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘abc.txt?t=‘+new Date().getTime(),function(str){
alert(str);
});
};
}
// 向服务器请求 1.txt 2.txt 3.txt并显示到同一个内容框里 =======================================
// 须先引入上面封装的ajax()函数
window.onload=function (){
var aBtn=document.getElementsByTagName(‘input‘);
var oDiv=document.getElementById(‘div1‘);
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function (){
ajax(this.index+1+‘.txt?t=‘+new Date().getTime(), function (str){ //function(str){}成功后执行的匿名函数。
oDiv.innerHTML=str;
});
};
}
};
// eval()对结果进行分割处理 ===========================================================
// 普通数组数据处理
window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘data.txt?t=‘+new Date().getTime(),function(str){
//str->‘[1,2,3,4]‘
var arr=eval(str);
alert(arr[3]); //此时结果为4。若不进行eval()处理那么返回的结果是一个字符串，结果为2
});
};
}
// json数据处理
window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘data.json?t=‘+new Date().getTime(),function(str){
//str-> [{a: 12, b: 5}, {a: 8, b: 9}]
var arr=eval(str);
alert(arr[0].b); //此时结果为5。eval()对数据分割成多维数组
});
};
}
// 分页数据请求 ====================================================================
// 须先引入上面封装的ajax()函数
window.onload=function(){
var oUl=document.getElementById(‘ul1‘);
var aBtn=document.getElementsByTagName(‘a‘);
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
// 需要请求的三个文件名为：page1.txt page2.txt page3.txt
ajax(‘page‘+(this.index+1)+‘.txt?t=‘+new Datd().getTime(),function(str){
var aData=eval(str);
oUl.innerHTML=‘‘;
for(i=0;i<aData.length;i++){
var oLi=document.createElement(‘li‘);
//page1.txt中的数据为：[{user: ‘blue‘, pass: ‘123‘}, {user: ‘aaa‘, pass: ‘jjfhier‘}, {user: ‘leo‘, pass: ‘123456‘}] （另两个类似）
oLi.innerHTML=‘<strong>‘+aData[i].user+‘</strong><i>‘+aData[i].pass+‘</i>‘; //此处输出格式根据需要更改
oUl.appendChild(oLi);
}
});
};
}
}
<body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
