码迷,mamicode.com
首页 > Web开发 > 详细

妹味6:ajax与ajax封装

时间:2014-11-28 16:09:35      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   color   os   使用   sp   java   

功能)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>

妹味6:ajax与ajax封装

标签:style   http   io   ar   color   os   使用   sp   java   

原文地址:http://www.cnblogs.com/he-lian/p/4128617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!