前端開發的開始—基於OO的Ajax類

一年都沒寫過部落格了，不是懶，是不知有啥好寫的。。。現在本人從一個後台開發.net的轉向前端開發了。。。

之前去面試的時候，給面試官問過，有沒有屬於自己的ajax類，當時很奇怪，因為我基本上ajax開發都是用jquery來完成，後來想了想，也是應該寫一個。

先看調用方式：

1 ajax.request("ajax.html",{v:Math.random(),num:1},function(data){
2     //do something
3 },'get');

 

 方式好像jquery哦。。。還是覺得這樣調用方便些。。。

 1 var ajax = {
 2     //Xmlhttprequest類
 3     Xmlhttprequest :function() {
 4         this.xhr =false;
 5     },
 6     //外部調用介面
 7     request : function(url,data,callback,type) {
 8         //每次都建立一個Xmlhttprequest的對象，使ajax調用互不影響
 9         var xhr = new this.Xmlhttprequest();
10         xhr.request(url,data,callback,type);
11     }
12 }
13 //將{num:1,t:'a'}這種json資料格式轉為num=1&t=a這種字串形式
14 var json2str = function(data){
15     var _data = [];
16     
17     for(var name in data) {
18         _data.push(name+"="+data[name]);
19     }
20     return _data.join('&');
21 }
22 //擴充Xmlhttprequest類的方法
23 ajax.Xmlhttprequest.prototype = {
24     //建立XMLHttpRequest
25     createXmlHttpRequest : function(){
26     
27         if(window.XMLHttpRequest) {
28             return new XMLHttpRequest();
29         }
30         else {
31             var a = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
32             for (var i=0,l=a.length;i<l;i++){
33                 try{
34                      return new ActiveXObject(a[i]);
35                 }catch(e){};
36             }
37         }
38     },
39     //回呼函數
40     fnCallback : function(callback){
41     
42         if(this.xhr.readyState === 4 && this.xhr.status === 200) {
43             callback?callback(this.xhr.responseText):void(0);
44         }
45     },
46     //ajax請求
47     request : function(url, data, callback, type){
48 
49         var that = this;
50         var ispost = type==='post'?true:false;
51         
52         !ispost && (url += (url.indexOf('?')+1?'&':'?') + json2str(data));
53         
54         this.xhr = this.createXmlHttpRequest();
55         
56         this.xhr.open(type,url,true);
57         ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):'';
58         this.xhr.onreadystatechange = function(){that.fnCallback(callback);};
59         this.xhr.send(ispost?json2str(data):null);
60     }
61 }

 

 

 這個類，肯定有不足的了，歡迎拍磚吧！每個人都有自己的習慣用法，最重要是適合用就行了！