轻便的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);

源代码：

下载: download_url.js

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

Permalink

16 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,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,2007 @ 1:45 pm

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

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

9. fisher said,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,2007 @ 4:36 pm

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

11. fisher said,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’,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,2007 @ 6:01 pm

    delete objXMLHttpRequest 应改为 objXMLHttpRequest = null

16. xbx said,2007 @ 6:29 pm

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

 

原文地址：https://blog.csdn.net/lee576/article/details/2029696