[js] 轻便的XMLHttpRequest应用函数:downloadUrl()

前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。

downloadUrl(url, callback, data);

参数说明:
url不用说了;
callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就是responseText,responseCode就是status;
data是要post的数据,get方式时此参数可省略。

用法一:直接把回调函输写在参数中
downloadUrl(‘http://www.ugia.cn/wp-data/test.htm’, function (data, responseCode) {
alert(data); // 这里处理返回的数据
});

用法二:先定义回调函数,然后传入
function test(data, responseCode) {
alert(data); // 这里处理返回的数据
}

downloadUrl(‘http://www.ugia.cn/wp-data/test.htm’, test);

源代码:

  1. /**
  2. * download url lite
  3. *
  4. * @author: legend(legendsky@hotmail.com)
  5. * @link: http://www.ugia.cn/?p=122
  6. * @version: 1.0
  7. *
  8. * @param string   url     
  9. * @param string   callback  回调函数
  10. * @param string  data      post数据
  11. *
  12. * @return void
  13. */
  14. function downloadUrl(url, callback, data)
  15. {
  16.     // init
  17.     url += url.indexOf("?") >= 0 ? "&" : "?";
  18.     url += "random_download_url=" + Math.random();
  19.    
  20.     if (typeof data == 'undefined')
  21.     {
  22.         var data = null;
  23.     }
  24.  
  25.     method = data ? 'POST' : 'GET';
  26.    
  27.     // create XMLHttpRequest object
  28.     if (window.XMLHttpRequest)
  29.     {
  30.         var objXMLHttpRequest = new XMLHttpRequest();
  31.     }
  32.     else
  33.     {
  34.         var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
  35.         for(var n = 0; n < MSXML.length; n ++)
  36.         {
  37.             try
  38.             {
  39.                 var objXMLHttpRequest = new ActiveXObject(MSXML[n]);       
  40.                 break;
  41.             }
  42.             catch(e)
  43.             {
  44.             }
  45.         }
  46.     }
  47.    
  48.     // send request
  49.     with(objXMLHttpRequest)
  50.     {
  51.         //setTimeouts(30*1000,30*1000,30*1000,30*60*1000);
  52.         try
  53.         {
  54.             open(method, url, true);
  55.            
  56.             if (method == 'POST')
  57.             {
  58.                 setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  59.             }
  60.            
  61.             send(data);           
  62.         }
  63.         catch(e)
  64.         {
  65.             alert(e);
  66.         }
  67.        
  68.         // on ready
  69.         onreadystatechange = function()
  70.         {
  71.             if (objXMLHttpRequest.readyState == 4)
  72.             {
  73.                 callback(objXMLHttpRequest.responseText, objXMLHttpRequest.status);
  74.                 delete(objXMLHttpRequest);
  75.             }
  76.         }
  77.     }
  78. }

17 Comments »

  1. natson said,

    March 13, 2007 @ 11:42 pm

    不错哦~ 我也是懒人。 拿你的用啦~

  2. kuhanzhu said,

    March 14, 2007 @ 12:01 pm

    我比你更懒,不分析不看代码了,直接拿去用吧。

  3. TTR said,

    March 15, 2007 @ 10:14 am

    没什么意思,写的不好!

  4. windix said,

    May 13, 2007 @ 6:02 pm

    谢谢你的代码,很有启发 :)
    不过使用中发现了一个小bug:
    这行:
    url += url.indexOf(“?”) > 0 ? “&” : “?”;
    应该是
    url += url.indexOf(“?”) >= 0 ? “&” : “?”;

    不然形如”?action=help”这样第一位就是?的url就会出错

  5. legend said,

    May 13, 2007 @ 8:57 pm

    谢谢,我改一下。

  6. dancebear said,

    June 5, 2007 @ 10:21 am

    是啊;厌倦了框架这些东西了。明明几行代码就可以搞定的事情非要搞那么复杂!

  7. fisher said,

    June 6, 2007 @ 10:45 am

    有一个问题,因为objXMLHttpRequest是局部变量,异步处理之后回调函数之内的objXMLHttpRequest还能继续访问吗?我使用对象进行设计的时候,发现无法访问this.objXMLHttpRequest。谢谢。

  8. legend said,

    June 6, 2007 @ 1:45 pm

    要注意this的上下文环境,事件触发的时候一般指向触发者本身。
    onreadystatechange = function()
    {
    objXMLHttpRequest…
    因为objXMLHttpRequest在上面已经定义了,虽然是局部变量,但这个地方依然可以访问。

    js里的这些东西比较复杂,我也不是很清楚。你可以看看coolcode.cn上的这篇文章:http://www.coolcode.cn/andot/javascript-oop-encapsulation/254

  9. fisher said,

    June 6, 2007 @ 4:11 pm

    谢谢,因为我经常会使用对象的一个方法来作为回调函数,发现在里面不能使用this关键字,得必须指名是哪一个对象的属性才能使用,难以理解,函数都执行到对象的方法里面去了,还是不知道当前的this是指向当前对象的?比如:
    var Call = {} ;
    Call.FLAG = “TEST” ;
    Call.back = function()
    {
    alert( this.FLAG ) ;//这句无法执行~,不知道为什么
    }

    downloadUrl(‘http://www.ugia.cn/wp-data/test.htm’, Call.back);

  10. legend said,

    June 6, 2007 @ 4:36 pm

    最后一句改成这样呢?
    downloadUrl(‘http://www.ugia.cn/wp-data/test.htm’, function (data, responseCode)
    {
    Call.back(data, responseCode)
    });

  11. fisher said,

    June 6, 2007 @ 6:26 pm

    嗯,这回可以了,但是这是为什么呢?比较郁闷的~

  12. lugo said,

    July 21, 2007 @ 2:35 pm

    >>downloadUrl(’http://www.ugia.cn/wp-data/test.htm’, Call.back);

    这句中的回调函数是 function() {alert( this.FLAG ) ;} ,this所指为该匿名函数。

    >>downloadUrl(’http://www.ugia.cn/wp-data/test.htm’, function (data, responseCode){Call.back(data, responseCode)});

    这里的回调函数显然与上面的不同,Call对象是存在的。

  13. Fisher said,

    August 17, 2007 @ 3:05 pm

    多谢楼上兄弟指点,谢谢~

  14. xbx said,

    December 13, 2007 @ 4:31 pm

    我发现一个问题。因为我在网页中要不断的访问服务器的数据,所以就定期调用downloadurl函数。但是在资源管理器上,发现IE的句柄(handle)不断的增加,增加的时间间隔正好就是我调用完之后的时候,所以确定是没有释放的原因。但是已经delete objXMLHttpRequest了啊。您能不能看看?我找了网上的资料,都没有解决方法。谢谢了。

  15. David said,

    December 13, 2007 @ 6:01 pm

    delete objXMLHttpRequest 应改为 objXMLHttpRequest = null

  16. xbx said,

    December 13, 2007 @ 6:29 pm

    我试过两种都写了,也不行。先delete ,然后设置为null,还是一样的。

  17. webmessenger said,

    February 3, 2008 @ 10:42 pm

    Communication Tube – Its a free web messenger chat client for the popular IM: Windows Live Messenger (MSN Messenger),GTalk,icq,irc. Communication Tube is compatible with all popular browsers.

RSS feed for comments on this post

Leave a Comment