`

封装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也不太好),因为它不一定什么时候执行。
分享到:
评论
25 楼 java_fxj 2010-01-21  
个人觉得用dhtmlx比较简单,
dhtmlxAjax.post(url, pars, callback_)。
直接这样就OK了。
24 楼 JavaEye4Cwy 2010-01-20  
jQuery值得赞一个~
23 楼 anky_end 2010-01-20  
shadowlin 写道
发明轮子没什么问题,你可以研究轮子是怎么发明的。但是用轮子发明轮子就有点。。。
既然用jquery了,就用内置的ajax函数不挺好的么

楼主也是用jquery的ajax

其实再多封装一层也不错,算不上什么轮子。

俺当初也有楼主同样的困惑,想把callback值返回不成功。后来看了下源码明白了,nnd,是异步同步的问题啊
22 楼 anky_end 2010-01-20  
楼主你搞错一件事情:
不是因为js是多线程,而是因为jquery ajax默认是异步提交

你设置为同步就可以顺序执行下去了
21 楼 shadowlin 2010-01-19  
发明轮子没什么问题,你可以研究轮子是怎么发明的。但是用轮子发明轮子就有点。。。
既然用jquery了,就用内置的ajax函数不挺好的么
20 楼 風一樣的男子 2010-01-19  
轮子,jQuery、mootools 都有封装好的
19 楼 java.wj 2010-01-19  
一个东西不一定要能使用,不一定要很完美!
重要的是这个东西从没有到有了的一个过程会让我们不断的进步!
18 楼 bluemusic 2010-01-19  
<div class="quote_title">mp_juan 写道</div>
<div class="quote_div">人们常常说不要重新发明车轮,可是在没有车轮之前,我们不得不靠双脚来行走,发明轮子有它的价值和乐趣,如果我们一味的只懂得使用,而不了解真正的内幕是什么,我们又怎么能去创新呢?</div>
<p><br></p>
<p> 同意这种说法,我们如果不去了解内核不去试验,那我们的轮子很难从木轮子的变成轮胎,变成轮胎我们还是要去探索,为了让自己到达目的,适当探索和创新是必要的。</p>
<p>此外javascript是多线程的,具体哪里看到的忘了</p>
17 楼 mp_juan 2010-01-19  
人们常常说不要重新发明车轮,可是在没有车轮之前,我们不得不靠双脚来行走,发明轮子有它的价值和乐趣,如果我们一味的只懂得使用,而不了解真正的内幕是什么,我们又怎么能去创新呢?
16 楼 shadowlin 2010-01-19  
jquery本身不就有$.get,$.post,$.getJson么。。。
15 楼 sunnymoon 2010-01-19  
sunhj000java 写道

虽然在封装ajax方法过程中遇见了些许困难,浪费了一些时间,但是还是挺值的。明白了两点:
第一, js是支持多线程的。
第二, ajax是多线程实现的,不能等待它的返回值(让主线程sleep也不太好),因为它不一定什么时候执行。


这位J友,你的结论没有反映实践的本质。
第一,js是单线程的(javascript语言本身特性是单线程的)
第二,ajax是由包括js参与进来的一种访问过程。可以异步也可同步。和通常说的多线程是有区别的。
14 楼 sunhj000java 2010-01-19  
joehe 写道
这种东东直接用库就好了,自己真没必要再去写

还请教用jquery的哪个方法啊
13 楼 sunhj000java 2010-01-19  
delino 写道
的确是很多此一举了

呵呵,你不觉得每次调用ajax都要把全套的都写一遍很麻烦吗。
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);

} else if (config.reader == "text"
|| config.reader == "txt") {
data = xmlHttpReq.responseText;

} else {
data = xmlHttpReq.responseText;
}
} else {
data = xmlHttpReq.responseText;
}
config.success(data);
} else {
if (config.failure) {
config.failure(data);
}
}

} else {
}
};


xmlHttpReq.open(config.method, config.url, true);

xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

if (config.params) {
xmlHttpReq.send(Util.encodeURI(config.params));
} else {
xmlHttpReq.send(null);
}
} else {
Ajax.error.push({
message : "The request lack of config"
});
alert(Ajax.error[0].message);
}
Ajax.config = {};
Ajax.error = [];
}

function createXmlHttp() {

if (window.XMLHttpRequest) {

xmlHttpReq = new XMLHttpRequest();


if (xmlHttpReq.overrideMimeType) {
xmlHttpReq.overrideMimeType("text/xml");
}
} else {
if (window.ActiveXObject) {

var activexVersion = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activexVersion.length; i++) {
try {

xmlHttpReq = new ActiveXObject(activexVersion[i]);
} catch (e) {
}
}
}
}
return xmlHttpReq;
}

XMLReader = {}
XMLReader.eval = function(data) {
return data;
}

JSONReader = {}
JSONReader.eval = function(data) {
return eval('(' + data + ')');
}
JSON = {}
JSON.parse = function(data) {
return eval('(' + data + ')');
}
JSON.escape = function(obj) {
if (Util.isObject(obj)) {
for (p in obj) {

}
}
}
Util = {}
Util.encodeURI = function(param) {
if (param) {
var result = "&";
if (Util.isObject(param)) {
for (o in param) {
result += "" + o.toString() + "=" + param[o].toString() + "&";
}
result = result.substring(0, result.length - 1);
}
}
return result;
}
Util.isObject = function(data) {
return typeof(data) == "object";
}

调用的方法很简单,用过extjs的Ajax的同胞们肯定很熟悉这样的写法吧,添加了一个reader对象,我们可以返回为text的文本格式的数据,也可以返回json对象的数据,不过要在服务器端解析为正确的json字符串,浏览器才能正常解析

Ajax.request({
method:"post",
url:"test.do",
reader:"json",
params:{name:'hello'},
success:function(data){

},
failure:function(data){

}

});
11 楼 delino 2010-01-19  
的确是很多此一举了
10 楼 fengshihao 2010-01-18  
我没怎么舍入研究过 js 不过 js应该不是多线程的吧~~。  异步倒是真的。

而且封装json 不如用rpc 封装的更彻底。 可以看看jsonrpc  或者 phprpc
9 楼 joehe 2010-01-18  
这种东东直接用库就好了,自己真没必要再去写
8 楼 husai 2010-01-18  
jquery 也对ajax操作作了封装:
jQuery.post(url, [data], [callback], [type])
7 楼 kjj 2010-01-18  
什么课叫异步,想想,难道你调用了后就能返回!!!
6 楼 sunhj000java 2010-01-18  
itstarting 写道
...
var o = XmlHttp.create();
var asyncFlag = true;//是否异步标志:true|false
o.open("POST", url, asyncFlag);

受教了

相关推荐

    使用原生js封装的ajax实例(兼容jsonp)

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @...

    封装了jQuery的Ajax请求全局配置

    下面是在项目中封装了jQuery的Ajax,分享给大家。 代码: 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...

    vue-ajax小封装实例

    * ajax封装: * 1. 引入文件 * 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson) * url: 需要获取数据的文件地址 (string) * data: 需要发送的信息 (可省略) (obj) * fn: 获取...

    react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:...

    给初学ajax的人 ajax函数代码

    是原生的ajax,稍稍的封装了下,对了,option为json格式的数据,对此可先看这个

    原生JS封装Ajax插件(同域、jsonp跨域)

    用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的。。。简单说说思路,如有不正确的地方,还望指正^_^ 一、Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一...

    JS常用函数和常用技巧小结

    jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: function(d) { var data...

    ajax处理服务器返回的三种数据类型方法

    为了方便使用,封装成如下函数: /** * @function 利用ajax动态交换数据(Text/HTML格式) * @param url 要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param getMsg 这个函数可以获取到处理...

    基于ajax和jsonp的原生封装(实例)

    最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的。其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为【函数调用(foo(实参))】,...

    Ajax使用JSON数据格式案例

    1: JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧。...整个对象用大括号封装起来。可用大括号分级嵌套数据。 对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也

    1次ajax请求(XMLHttpRequest)上传多个文件,支持进度条处理

    封装了一个ajax多文件上传,功能就是选择多个文件,ajax上传,支持进度条处理。 调用方式很简单,写一个json对象做为参数配置,设置要上传url以及事件处理函数,new一个AjaxUploadX对象,调用selectFiles方法选择...

    javascript util

    一个便捷的javascript封装的工具包,如果你熟悉jquery的话,那么对于这里面的函数一定会让你感到很上手,因为设计思路类似于jquery,里面封装了一些非常常用dom操作、ajax等函数,例如: 去除字符串两边的空格 var result ...

    spiderflow爬虫平台-其他

    支持JSON/XML/二进制格式 支持多数据源、SQL select/selectInt/selectOne/insert/update/delete 支持爬取JS动态渲染(或ajax)的页面 支持代理 支持自动保存至数据库/文件 常用字符串、日期、文件、加解密等函数 支持...

    使用MUI框架模拟手机端的下拉刷新和上拉加载功能

    mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,...

    利用js实现前后台传送Json的示例代码

    实现传值常用的是Jquery以及内部封装的ajax。首先看一下jquery的get()和post()语法。get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $...

    JS组件系列之JS组件封装过程详解

    之前分享了那么多bootstrap组件的使用经验,这篇文章打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做...

    jkdrag网页层模块拖动插件,较多的JS封装类.rar

    里面有较多的JS封装类,比如数组类,可在数组中的每个项上运行一个函数,并将全部结果作为数组返回,也可在在数组中的每个项上运行一个函数,并将函数返回真值的项作为数组返回;浏览器兼容性测试类,包括检测js的...

    简单留言板

    仿jQuery选择器 取值设值val,html函数,show,hidden显示隐藏函数,fadeIn,fadeOut淡出函数,ajax简单封装,表单序列化... == 如何使用sqlite? 如何实现事务处理? 如何实现URL映射? 如何实现参数注入? 如何实现对象转...

    JavaScript完全自学宝典 源代码

    示例描述:学习JSON并介绍Ajax与JSON。 20.1.html 使用JSON封装数据。 20.2.html 使用JSON值的数组封装数据。 json2.js JSON的.js库文件。 testJson.war 使用JSON与服务器传递...

    php与ajax一些经验

    并且与服务器端的传输方式有用GET或POST等 我这里说的是当传送xml或json数据时, PHP与其他服务器端语言不同之处在于,他将请求的数据封装到了服务器变量中(可能说的不对) 这样对于使用者,可以很简单的就取得GET或...

Global site tag (gtag.js) - Google Analytics