简单的自定义ajax类，实现ajax回调
每次实现ajax回调的时候，都需要获得一个xmlhttprequest对象，然后写回调函数，回调函数中判断readystate和status，很是繁琐，于是自己想到些一个API来包含ajax要实现的东西，调用的时候只需要向API中传入参数就可以了，非常简单。
虽然网络上有很多开源的ajaxrequest对象，包括jquery，prototype，extjs等，但是写一个自己符合自己用的对象可以按照自己习惯的方式调用，个人觉得非常之好，这样一来也加深了自己对ajax机制的理解，所以建议还是自己动手写为好。。。。
一、动手写自己的对象ajax,保存文件为myajax.js,作为一个类库
//JScript文件
//ajax请求功能函数
//作者：吴宝佑
//get调用方式：(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
//post调用方式：(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
function ajax()//ajax对象
{
function getXHR()//获取xmlhttprequest对象
{
var request=false;
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request = false;
}
}
}
return request;
}
this.get = function (openUrl,successFun)//ajax对象的get方法,通过get方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
{
var request = getXHR();
request.open("get",openUrl,true);
// request.onreadystatechange = function ()
// {
// if (request.readystate==4)
// {
// if (request.status==200)
// {
// successFun(request);
// }
// }
// };
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(null);
}
this.post = function (openUrl,sendContent,successFun)//ajax对象的post方法,通过post方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
{
var request = getXHR();
request.open("post",openUrl,true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告诉服务器发送的是文本
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(sendContent);
}
}
//ajax请求功能函数
//作者：吴宝佑
//get调用方式：(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
//post调用方式：(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
function ajax()//ajax对象
{
function getXHR()//获取xmlhttprequest对象
{
var request=false;
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request = false;
}
}
}
return request;
}
this.get = function (openUrl,successFun)//ajax对象的get方法,通过get方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
{
var request = getXHR();
request.open("get",openUrl,true);
// request.onreadystatechange = function ()
// {
// if (request.readystate==4)
// {
// if (request.status==200)
// {
// successFun(request);
// }
// }
// };
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(null);
}
this.post = function (openUrl,sendContent,successFun)//ajax对象的post方法,通过post方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
{
var request = getXHR();
request.open("post",openUrl,true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告诉服务器发送的是文本
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(sendContent);
}
}
二、调用类库myajax.js
1，新建一html文档，body标签代码如下
<body>
<input type ="text" id ="txt1" />
<input type ="button" id ="btn1" value ="get按钮" onclick ="callback_get()" />
<input type ="text" id ="txt2" />
<input type ="button" id ="btn2" value ="post按钮" onclick ="callback_post()" />
</body>
<input type ="text" id ="txt1" />
<input type ="button" id ="btn1" value ="get按钮" onclick ="callback_get()" />
<input type ="text" id ="txt2" />
<input type ="button" id ="btn2" value ="post按钮" onclick ="callback_post()" />
</body>
2，js文件如下
<script type ="text/javascript" src ="myajax.js" ></script><!--引入类库所在的js文件-->
<script type ="text/javascript" >
function callback_get()//实现get方式回调
{
var aj=new ajax();//实例化对象
var txtVal=document.getElementById ("txt1").value ;//获取文本值
var url="aj.aspx?arg="+escape(txtVal);//传递数据到指定的url
aj.get(url,update);//调用类库中的get函数,表示打开的是url,回调函数为update
function update(obj)//回调函数的实现,这里obj值的其实就是一个xmlhttprequest对象,这点可以从类库中看出来。可以把obj该为任何名字的参数,如aaa
{
alert(obj.responsetext);
}
}
function callback_post()//实现post方式回调
{
var aj=new ajax();
var txtVal=document.getElementById("txt2").value;
var sendCont="argument="+txtVal;
var url="aj.aspx?time="+new Date(); //这里是post里的习惯写法,最好传递给服务器一个时间戳,以免回调的数据为缓存在服务器中的数据
aj.post(url,sendCont,update);//调用类库中的post函数,表示打开的是url,传递的内容为sendCont,回调函数为update
function update(obj)//回调函数的实现,同get方式
{
alert(obj.responsetext);
}
}
</script>
<script type ="text/javascript" >
function callback_get()//实现get方式回调
{
var aj=new ajax();//实例化对象
var txtVal=document.getElementById ("txt1").value ;//获取文本值
var url="aj.aspx?arg="+escape(txtVal);//传递数据到指定的url
aj.get(url,update);//调用类库中的get函数,表示打开的是url,回调函数为update
function update(obj)//回调函数的实现,这里obj值的其实就是一个xmlhttprequest对象,这点可以从类库中看出来。可以把obj该为任何名字的参数,如aaa
{
alert(obj.responsetext);
}
}
function callback_post()//实现post方式回调
{
var aj=new ajax();
var txtVal=document.getElementById("txt2").value;
var sendCont="argument="+txtVal;
var url="aj.aspx?time="+new Date(); //这里是post里的习惯写法,最好传递给服务器一个时间戳,以免回调的数据为缓存在服务器中的数据
aj.post(url,sendCont,update);//调用类库中的post函数,表示打开的是url,传递的内容为sendCont,回调函数为update
function update(obj)//回调函数的实现,同get方式
{
alert(obj.responsetext);
}
}
</script>
3，通过编译，能正确调用，说明实现了简单的ajax类库
