妹味6：ajax与ajax封装

（功能）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>