前几天看了一些关于AJAX的一些资料,算是明白一点,所以写了一个关于AJAX的类,这样以后就可以不用再写那些重复的东西了,虽然网上有些写好的类库,不过我还是写了一个,这样可以学习一下javascrip。下面就来说说我写的这个类和用到的知识吧。

AJAXAsynchronous JavaScript Technology and XML应用这个技术就可以不刷新页面的情况下访问网络资源。这一切都是围绕XMLHttpRequest类来进行的,这个类由IE5.0以后的版本支持。这项技术最好的例子就是Google Map,有空的话可以去看看。

下面说明我写的类吧。

/************************************

 * MRequest is used to ajax.

 * CopyRight(R) Joshua.M.D

 * 2005/8/9 09:17 AM

 ************************************/

/* Mrequest类的构造函数。 */

function MRequest(){

       this._request=null; //XMLHttpRequest对象的引用

       this._url=null;  //要访问的网络资源

       this._callback=null; //回调函数

      

       this.setCallBack=_setCallBack;

       this.setURL=_setURL;

       this.translate=_translate;

       this.toString=_toString;

      

       _init(); 

}

/* 初始化_request,引用一个XMLHttpRequest对象 */

function _init(){

       if (window.XMLHttpRequest) {

        this._request = new XMLHttpRequest();

    } else if (window.ActiveXObject) {

        this._request = new ActiveXObject("Microsoft.XMLHTTP");

    } else{

           alert("Can’t init request!");

    }

}

 

function _setURL(url){

       this._url=url;

}

 

function _setCallBack(cb){

       this._callback=cb;

}

/* 开始数据传输 */

function _translate(){

       this._request.open("GET", this._url, true);

    this._request.onreadystatechange=_onTranslateComplete;

    this._request.send(null);

}

/* 数据传输完成后对数据进行解析 */

function _onTranslateComplete(){

       if(this._request.readyState==4){

              if(this._request.status==200){

                     this._callback();

              }else{

                     alert("Occur Error: the errno is:"+this._request.status);

              }

       }

}

 

function _toString(){

       return  "The request is: "+this._request+"\n"+

                     "The URL is: "+this._url+"\n"+

                     "The CallBack is:\n"+this._callback;

}

Mrequest的应用:在网站中只要引入Mrequest类后就可以应用了。

我们只用声明一个回调函数和一个网络资源(URL)就可以用了。

<script src="MRequest.js"></script>

<script type="text/javascript">

<!–//

      function cb(){

             alert("ok");

      }

      function t(){

             var req=new MRequest();

             req.setCallBack(cb);

             req.setURL(‘http://localhost:8080/’);

             req.translate();

      }

//–>

</script>

<input type="button" value="Click Me!" onClick="t()">

在本次编写过程中,只是将一些工作封装了一下,这样我们就可以只关心数据的处理而不用关心这些繁琐的代码。但是真正用的话还是应该用一些比较成型的系统,这只是一个例子而已。


评论

该日志第一篇评论

发表评论

评论也有版权!