妹味6：ajax与ajax封装

浏览数：41 / 时间：2015年06月09日

（功能）ajax能且仅能从服务器读取文件

（环境）需要服务器环境才能测试，可以用工具建立本地服务器环境

（缓存）解决缓存问题：url加时间戳让每次请求地址唯一，如 url=‘abc.txt?t=‘+new Date().getTime();

（编码）请求的文件必须与网页的编码一致，否则乱码

（处理）eval()处理请求结果很方便，自动分割。但据说eval有很多问题，除了ajax中，其它地方暂时不要乱用。

（实例）请求数据并在同一个块内显示、json数据处理、分页数据请求

ajax函数四步：

1.创建ajax对象

2.连接服务器

3.发送请求

4.接收返回

//用一个不存在的变量：出错
//用一个不存在的属性：undefined

ajax封装函数(可以直接使用)：

// 开始----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 结束----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

请求状态监控
onreadystatechange事件
readyState属性：请求状态
     0（未初始化）还没有调用open()方法
     1（载入）已调用send()方法，正在发送请求
     2（载入完成）send()方法完成，已收到全部响应内容
     3（解析）正在解析响应内容
     4（完成）响应内容解析完成，可以在客户端调用了
status属性：请求结果（200：成功； 404、300+、500+：都是有错误，如未找到文件）
responseText：请求得到的内容

// 简单ajax()使用(加时间戳) =============================================================

// 须先引入上面封装的ajax()函数

// 向服务器请求 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()对结果进行分割处理 ===========================================================

// 普通数组数据处理

// json数据处理

// 分页数据请求 ====================================================================

// 须先引入上面封装的ajax()函数

               });
          };
     }
}

<body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

妹味6：ajax与ajax封装