亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

改造請求參數-Ajax之二

2019-11-17 03:36:30

字體：大中小

來源：轉載

供稿：網友

接上篇。引入了一個私有函數_serialize，它會把js對象串行化成HTTP所需參數模式，接受如下兩種結構

`1`	`{name:'jack',age:20} --> name=jack&age=20`

`2`	`{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange`

請求后臺的一個servlet，發送參數name=jack,age=20，默認使用異步，GET方式?，F在data可以如下了

01Ajax.request('servlet/ServletJSON',{ 
02        data : {name:'jack',age:20}, 
03        success : function(xhr){ 
04            //to do with xhr 
05        }, 
06        failure : function(xhr){ 
07            //to do with xhr 
08        } 
09    } 
10);

完整代碼

01Ajax =  
02function(){ 
03    function request(url,opt){ 
04        function fn(){} 
05        var async   = opt.async !== false, 
06            method  = opt.method    || 'GET', 
07            encode  = opt.encode    || 'UTF-8', 
08            data    = opt.data      || null, 
09            success = opt.success   || fn, 
10            failure = opt.failure   || fn; 
11            method  = method.toUpperCase();  
12        if(data && typeof data == 'object'){//對象轉換成字符串鍵值對 
13            data = _serialize(data); 
14        } 
15        if(method == 'GET' && data){ 
16            url += (url.indexOf('?') == -1 ? '?' : '&') + data; 
17            data = null; 
18        } 
19        var xhr = window.xmlHttpRequest ? new xmlhttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
20        xhr.onreadystatechange = function(){ 
21            _onStateChange(xhr,success,failure); 
22        }; 
23        xhr.open(method,url,async); 
24        if(method == 'POST'){ 
25            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode); 
26        } 
27        xhr.send(data); 
28        return xhr; 
29    } 
30    function _serialize(obj){ 
31        var a = []; 
32        for(var k in obj){ 
33            var val = obj[k]; 
34            if(val.constructor == Array){ 
35                for(var i=0,len=val.length;i<len;i++){ 
36                    a.push(k + '=' + encodeURIComponent(val[i])); 
37                } 
38            }else{ 
39                a.push(k + '=' + encodeURIComponent(val)); 
40            } 
41        } 
42        return a.join('&'); 
43    } 
44    function _onStateChange(xhr,success,failure){ 
45        if(xhr.readyState == 4){ 
46            var s = xhr.status; 
47            if(s>= 200 && s < 300){ 
48                success(xhr); 
49            }else{ 
50                failure(xhr); 
51            } 
52        }else{} 
53    } 
54    return {request:request}; 
55}();

這里僅僅是使data可以是對象類型，貌似沒啥大用。但如果與表單(form)結合的話還是很有用的。當我們使用form但又想用Ajax方式提交，那么把form中元素序列化成HTTP請求的參數類型是一個費勁的活。這里寫個工具函數formToHash，將form元素按鍵值形式轉換成對象返回

01function formToHash(form){ 
02    var hash = {}, el; 
03    for(var i = 0,len = form.elements.length;i < len;i++){ 
04        el = form.elements[i]; 
05        if(el.name == "" || el.disabled) continue; 
06        switch(el.tagName.toLowerCase()){ 
07        case "fieldset": 
08            break; 
09        case "input": 
10            switch(el.type.toLowerCase()){ 
11            case "radio": 
12                if(el.checked) 
13                    hash[el.name] = el.value; 
14                break; 
15            case "checkbox": 
16                if(el.checked){ 
17                    if(!hash[el.name]){ 
18                        hash[el.name] = [el.value]; 
19                    }else{ 
20                        hash[el.name].push(el.value); 
21                    } 
22                } 
23                break; 
24            case "button": 
25                break; 
26            case "image": 
27                break; 
28            default: 
29                hash[el.name] = el.value; 
30                break; 
31            } 
32            break; 
33        case "select": 
34            if(el.multiple){ 
35                for(var j = 0, lens = el.options.length;j < lens; j++){ 
36                    if(el.options[j].selected){ 
37                        if(!hash[el.name]){ 
38                            hash[el.name] = [el.options[j].value]; 
39                        }else{ 
40                            hash[el.name].push(el.options[j].value); 
41                        } 
42                    } 
43                } 
44            }else{ 
45                hash[el.name] = el.value; 
46            } 
47            break; 
48        default: 
49            hash[el.name] = el.value; 
50            break; 
51        } 
52    } 
53    form = el = null; 
54    return hash; 
55}