ajax用途可以用来读取后台数据,实现分页等等功能。
ajax不难,今天我们来写一个属于自己的一个ajax库。
知识点:
1. 编写 Ajax 库,AJAX 请求步骤
2. 创建 ajax 对象:XMLHttpRequest
3. 在 IE6 下兼容 XMLHttpRequest 的解决方案:ActiveXObject("Microsoft.XMLHTTP")
4. window属性与变量的关系
5. 用 window 属性来处理 IE6 的兼容性问题
6. 连接服务器:oAjax.open()
7. 同步与异步的区别
8. 发送请求:oAjax.send()
9. 接收返回:oAjax.onreadystatechange、readyState 属性、oAjax.status、oAjax.responseText
10. 封装 AJAX 函数
代码:
function ajax(url, fnSucc, fnFaild)
{
//1.创建ajax对象
var oAjax=null;
if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法, url, 是否异步)
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接收返回
//OnReadyStateChange
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功:'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild();
}
}
}
};
}
0 (未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
ajax数据类型:
json , txt , xml
用法:写一个简单的分页:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分页</title>
</head>
<body>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var ul = document.getElementById("ul1");
var oa = document.getElementsByTagName("a");
//循环三个标签
for ( var i = 0; i<oa.length; i++){
//索引
oa[i].index = i;
oa[i].onclick = function(){
// 读取数据
ajax( "page"+ ( this.index + 1)+ ".txt", function( str ){
var pageData = eval( str );
//清空页数内容
ul.innerHTML = '';
for ( var i =0; i < pageData.length; i++){
//创建li元素
var li = document.createElement("li");
li.innerHTML = "<em>"+pageData[i].user + "</em>"+pageData[i].pass;
ul.appendChild(li);
}
});
}
}
};
</script>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>