编写自己的一个ajax库。

2017-10-12 07:37:47来源:CSDN作者:Web_Struggle人点击

分享

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();				}			}		}	};}


readyState属性:请求状态
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>


























最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台