ajax异步数据的发送与接收处理

最新推荐文章于 2023-05-31 17:50:51 发布

zhanjh

最新推荐文章于 2023-05-31 17:50:51 发布

阅读量578

点赞数

分类专栏： javascript 文章标签： ajax function xmlhttprequest object url

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的Ajax内容加载器实现方式，该加载器可以为特定组件从指定URL加载数据，并支持GET或POST等不同请求方法。文章详细展示了如何创建XMLHttpRequest对象以发送请求，并通过回调函数处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var net=new Object();

net.ContentLoader=function( component, url, method, requestParams ) {
   this.component     = component;
   this.url           = url;
   this.requestParams = requestParams;
   this.method        = method;
}

net.ContentLoader.prototype = {

   getTransport: function() {
      var transport;
      if ( window.XMLHttpRequest )
         transport = new XMLHttpRequest();
      else if ( window.ActiveXObject ) {
         try {
            transport = new ActiveXObject('Msxml2.XMLHTTP');
         }
         catch(err) {
            transport = new ActiveXObject('Microsoft.XMLHTTP');
         }
      }
      return transport;
   },

   sendRequest: function() {
      var requestParams = []
      for ( var i = 0 ; i < arguments.length ; i++ )
         requestParams.push(arguments[i]);

      var oThis = this;
      var request = this.getTransport();
      request.open( this.method, this.url, true );
      request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded');
      request.onreadystatechange = function() { oThis.handleAjaxResponse(request) };
      request.send( this.queryString(requestParams) );
},

queryString: function(args) {

     var requestParams = [];
     for ( var i = 0 ; i < this.requestParams.length ; i++ )
        requestParams.push(this.requestParams[i]);
     for ( var j = 0 ; j < args.length ; j++ )
        requestParams.push(args[j]);

     var queryString = "";
     if ( requestParams && requestParams.length > 0 ) {
        for ( var i = 0 ; i < requestParams.length ; i++ )
           queryString += requestParams[i] + '&';
        queryString = queryString.substring(0, queryString.length-1);
     }
     return queryString;
},

handleAjaxResponse: function(request) {
     if ( request.readyState == 4 ) {
        if ( request.status == 200 || request.status == 0 )
           this.component.ajaxUpdate(request);
        else
           this.component.handleError(request);
     }
}

};