简单的自定义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);
    }
}

二、调用类库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 >

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>

3，通过编译，能正确调用，说明实现了简单的ajax类库

转载于:https://www.cnblogs.com/gisland/archive/2009/09/26/1574526.html