接上篇。引入了一個私有函數_serialize，它會把JS對象串行化成HTTP所需參數模式，接受如下兩種結構
vIEw sourcePRint?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方式。現在data可以如下了
vIEw sourceprint?01 AJax.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 );
完整代碼
vIEw sourceprint?01 AJax =
02 function(){
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元素按鍵值形式轉換成對象返回
vIEw sourceprint?01 function 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 }
-
資料引用:http://www.knowsky.com/552171.Html