改造请求参数---Ajax之二
接上篇。引入了一个私有函数_serialize，它会把js对象串行化成HTTP所需参数模式，接受如下两种结构{name:'jack',age:20} --> name=jack&age=20{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange
请求后台的一个servlet，发送参数name=jack,age=20，默认使用异步，GET方式。现在data可以如下了
Ajax.request('servlet/ServletJSON',{data : {name:'jack',age:20},success : function(xhr){//to do with xhr},failure : function(xhr){//to do with xhr}});
完整代码
/** * 执行基本ajax请求,返回XMLHttpRequest * Ajax.request(url,{ * async 是否异步 true(默认) * method 请求方式 POST or GET(默认) * encode 请求的编码 UTF-8(默认) * data 请求参数 (键值对字符串或js对象) * success 请求成功后响应函数 参数为xhr * failure 请求失败后响应函数 参数为xhr * }); * */var Ajax = function(){function request(url,opt){function fn(){}var async = opt.async !== false,method= opt.method || 'GET',encode= opt.encode || 'UTF-8',data = opt.data || null,success = opt.success || fn,failure = opt.failure || fn;method= method.toUpperCase();if(data && typeof data == 'object'){//对象转换成字符串键值对data = _serialize(data);}if(method == 'GET' && data){ url += (url.indexOf('?') == -1 ? '?' : '&') + data;data = null; }var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');xhr.onreadystatechange = function(){_onStateChange(xhr,success,failure);};xhr.open(method,url,async);if(method == 'POST'){xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode);}xhr.send(data);return xhr;}function _serialize(obj){var a = [];for(var k in obj){var val = obj;if(val.constructor == Array){for(var i=0,len=val.length;i<len;i++){a.push(k + '=' + encodeURIComponent(val));}}else{a.push(k + '=' + encodeURIComponent(val));}}return a.join('&');}function _onStateChange(xhr,success,failure){if(xhr.readyState == 4){var s = xhr.status;if(s>= 200 && s < 300){success(xhr);}else{failure(xhr);}}else{}}return {request:request};}(); 这里仅仅是使data可以是对象类型，貌似没啥大用。但如果与表单(form)结合的话还是很有用的。当我们使用form但又想用ajax方式提交，那么把form中元素序列化成HTTP请求的参数类型是一个费劲的活。这里写个工具函数formToHash，将form元素按键值形式转换成对象返回。
/** * 把表单内容转换为hash对象 * @param {HTMLElement} form对象 * @return {hash} * @example * formToHash(document.forms); */function formToHash(form){var hash = {}, el;for(var i = 0,len = form.elements.length;i < len;i++){el = form.elements;if(el.name == "" || el.disabled) continue;switch(el.tagName.toLowerCase()){case "fieldset":break;case "input":switch(el.type.toLowerCase()){case "radio":if(el.checked)hash = el.value;break;case "checkbox":if(el.checked){if(!hash){hash = ;}else{hash.push(el.value);}}break;case "button":break;case "image":break;default:hash = el.value;break;}break;case "select":if(el.multiple){for(var j = 0, lens = el.options.length;j < lens; j++){if(el.options.selected){if(!hash){hash = .value];}else{hash.push(el.options.value);}}}}else{hash = el.value;}break;default:hash = el.value;break;}}form = el = null;return hash;} 好了，有了formToHash就可以将其返回的对象作为Ajax的参数data了，Ajax内部的_serialize能自动的将该对象转换成HTTP请求参数形式。
页:
[1]