日期:2014-05-16  浏览次数:20336 次

封装json ajax函数
前几天做项目多次用到了Ajax,有的时候一个js函数中要调用几次,每次都去写一大段麻烦的很,我就想为什么不去把Ajax调用的过程封装一下,把参数和链接传进去,然后把返回值传给调用函数来处理呢。想到我就去做了,写了这个个函数:
	/**
 * ajax提交
 * @param url
 * @param param
 * @param callback回调函数
 * @return
 */
function jsonAjax(url, param) {
	alert(url);
	$.ajax({
  		type:"POST",
  		url:url,
  		data:param,
  		dataType:"json",	
  		success:function(html){
	return html;
},
  		error:function(){
			return {result:”error”};
  		}
	});				
}

测试:var html = jsonAjax(url, param); 
	 If(html.result == “success”)


可是我每次运行的时候都提示If(html.result == “success”)有错误,html为空,我单步跟踪了一下,jsonAjax方法也执行了。我就很郁闷,就请同事测试了一下。发现他那边一会行一会不行。

感觉单步跟踪不能真实的测试出到底发生了什么,然后我就用alert测试了一下。

	/**
 * ajax提交
 * @param url
 * @param param
 * @param callback回调函数
 * @return
 */
function jsonAjax(url, param) {
	alert(url);
	$.ajax({
  		type:"POST",
  		url:url,
  		data:param,
  		dataType:"json",	
  		success:function(html){
			alert(html);
	return html;
},
  		error:function(){
			return {result:”error”};
  		}
	});				
}

测试:var html = jsonAjax(url, param);
	Alert(html); 
	 If(html.result == “success”)


再次运行先是alert了一个”undefined”,接着又alert了一个object

仔细想了一下ajax调用应该是浏览器又开的一个线程,所以在获得html的时候一会可以拿到,一会拿不到。

然后就把函数重新设计了一下:
/**
 * ajax提交
 * @param url
 * @param param
 * @param callback回调函数
 * @return
 */
function jsonAjax(url, param, callback) {
	alert(url);
	$.ajax({
  		type:"POST",
  		url:url,
  		data:param,
  		dataType:"json",	
  		success:callback,
  		error:function(){
			jQuery.fn.mBox( {
				message :'恢复失败'
			});
  		}
	});				
}


顺利执行成功。

虽然在封装ajax方法过程中遇见了些许困难,浪费了一些时间,但是还是挺值的。明白了两点:
第一, js是支持多线程的。
第二, ajax是多线程实现的,不能等待它的返回值(让主线程sleep也不太好),因为它不一定什么时候执行。
6 楼 sunhj000java 2010-01-18  
itstarting 写道
...
var o = XmlHttp.create();
var asyncFlag = true;//是否异步标志:true|false
o.open("POST", url, asyncFlag);

受教了
7 楼 kjj 2010-01-18  
什么课叫异步,想想,难道你调用了后就能返回!!!
8 楼 husai 2010-01-18  
jquery 也对ajax操作作了封装:
jQuery.post(url, [data], [callback], [type])
9 楼 joehe 2010-01-18  
这种东东直接用库就好了,自己真没必要再去写
10 楼 fengshihao 2010-01-18  
我没怎么舍入研究过 js 不过 js应该不是多线程的吧~~。  异步倒是真的。

而且封装json 不如用rpc 封装的更彻底。 可以看看jsonrpc  或者 phprpc
11 楼 delino 2010-01-19  
的确是很多此一举了
12 楼 mp_juan 2010-01-19  
贴一段我自己写的代码
Ajax = {}
Ajax.config = {}
Ajax.error = []
var xmlHttpReq = null;

Ajax.request = function(config) {
if (config) {
Ajax.config = config;
createXmlHttp().onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
var data = null;
if (xmlHttpReq.status == 200 || xmlHttpReq.status == 0) {
if (config.reader) {
if (config.reader == "XMLReader"
|| config.reader == "xml") {
data = XMLReader.eval(xmlHttpReq.responseXML);
} else if (config.reader == "JSONReader"
|| config.reader == "json") {
data = JSONReader.eval(xmlHttpReq.responseText