`

封装json ajax函数

AjaxjsonjQuery多线程phprpc 
阅读更多
前几天做项目多次用到了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函数

    这里提到的"JS封装的AJAX函数"是将AJAX的基本操作整合到一个或多个JavaScript函数中，以便开发者可以更方便地调用和使用。下面我们将详细探讨AJAX的基本概念、工作原理以及封装后的使用方法。 首先，AJAX的核心是...

    详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()

    而Jquery库提供了一系列封装好的Ajax函数，如$.get(), $.post(), $.ajax(), 和$.getJSON()，这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式，它发送一...

    自己用的简单封装AJAX类

    1. **AJAX基础概念**：介绍AJAX的基本原理，如XMLHttpRequest对象、异步请求、数据交换格式（XML、JSON等）。 2. **JavaScript事件驱动编程**：解释如何通过JavaScript监听和响应用户操作，触发AJAX请求。 3. **HTTP...

    json ajax ajax框架

    AJAX框架是为了简化AJAX开发而设计的工具，它们提供了一套封装好的API，帮助开发者快速、便捷地构建具有AJAX功能的应用。这些框架可以处理与服务器的通信、数据解析、错误处理等复杂任务，让开发者能够专注于应用...

    AjaxJson实体类与依赖包

    在描述中提到的`AjaxJson.java`文件，就是这样一个实体类，它的设计目的是为了简化后端接口的返回数据封装，使得前端可以直接理解并处理这些数据。 `AjaxJson.java`的可能实现会如下所示： ```java public class ...

    JavaScript-初识ajax、ajax封装、及json简单实战案例(下).pdf

    以下是一个简单的Ajax函数封装示例： ```javascript function ajaxRequest(url, method, callback, data) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 ...

    $.ajax json数据传递方法.docx

    $.ajax json 数据传递方法是使用 jQuery 库实现的异步数据传递方法，通过将 JSON 数据封装在 $.ajax 对象中，并将其作为参数传递给服务器端脚本，以实现客户端和服务器端之间的数据交互。 在前台代码中，首先定义了...

    使用Ajax动态加载JSON文件

    在实际应用中，为了使代码更具可维护性和复用性，我们可能还会封装一个通用的Ajax函数，以处理不同的数据请求。此外，现代浏览器提供了`fetch` API，它提供了一种更简洁的接口来执行Ajax请求： ```javascript fetch...

    下载json，ajax传送对象的好帮手

    至于压缩包中的文件“json”，可能是JSON的示例文件、教程文档，或者是用于处理JSON的JavaScript库，例如一个简化的JSON解析和序列化函数，或者是用来模拟AJAX请求的示例脚本。具体的内容需要打开文件才能详细查看和...

    ajax封装实例代码

    6. **封装Ajax函数** 将以上步骤整合到一个函数中，可以方便地复用： ```javascript function ajax(options) { var xhr = new XMLHttpRequest(); xhr.open(options.method, options.url, true); xhr....

    json解析和封装案例

    3. 封装JSON：使用`JSON.stringify()`函数将JavaScript对象转化为JSON字符串。 4. 错误处理：处理解析和封装时可能遇到的错误，如无效的JSON格式等。 5. 应用场景：通过实例展示JSON在Ajax请求、存储本地数据等方面...

    Jquery ajax json 总结

    在客户端，接收到 JSON 数据后，JQuery AJAX 的回调函数可以解析并处理这些数据。对于 JSON 对象，可以使用 `eval()` 或 `JSON.parse()`（推荐）将其转换为 JavaScript 对象，然后通过点号或方括号语法访问其属性。...

    struts2+json+ajax+jquery

    jQuery中的Ajax功能包括`$.ajax()`, `$.get()`, `$.post()`等函数，它们可以方便地发起异步请求。当与JSON结合时，我们通常会使用`dataType: 'json'`设置来告诉jQuery期待服务器返回JSON格式的数据。收到数据后，...

    jQuery 封装Ajax

    在项目中，我们通常会封装自己的Ajax函数，以便更好地组织代码和复用。在提供的文件中，`common_gui.js`可能包含了自定义的Ajax封装，而`jquery.json-2.2.min.js`可能是用于解析JSON数据的辅助工具。在实际使用时，...

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

    这个封装的Ajax函数具有良好的灵活性，可以根据不同的需求进行配置，并且能够处理JSON和JSONP两种类型的响应。然而，它并未涵盖错误处理和超时等更复杂的情况，这在实际应用中可能需要进一步扩展和完善。 总结起来...

    ajax,jQuery 例子大全，json例子

    jQuery封装了Ajax函数，使得开发者可以更加方便地使用Ajax技术。例如，`$.ajax()`方法是jQuery提供的核心Ajax功能，它可以发送异步HTTP请求。此外，jQuery还提供了如`$.get()`, `$.post()`, `$.getJSON()`等简化的...

    使用json值的数组封装数据 html 源代码

    这个“使用json值的数组封装数据 html 源代码”示例，主要展示了如何在HTML页面中处理和展示由JSON数组封装的数据。 在描述中提到的“增加删除查询”的简单例子，意味着这个例子可能包含了一些基本的CRUD（Create、...

    Ajax_Json_jQuery详细Demo

    - **$.ajax()**：这是jQuery提供的高级Ajax函数，可以配置各种选项，如type(请求类型)、url(请求地址)、dataType(预期数据类型)、success(成功回调)等。 - **$.getJSON()**：专门用于GET请求并处理JSON数据，例如`...

    struts2+json+ajax整合例子（导入即可运行，附带详细教程）

    这里的`AjaxAction`类会执行相应的业务逻辑，并将结果封装到名为`result`的属性中。 2. **创建AjaxAction**：在Java后端，`AjaxAction`需要实现业务逻辑并返回JSON数据。例如，它可能从数据库获取数据，然后将数据...

    Ajax+JSON 提交数据的演示

    - **数据封装**：在Ajax请求中，JSON格式被用来封装要发送到服务器的数据，如表单字段值。这可以通过JavaScript对象创建，然后转化为JSON字符串。 ```javascript let data = { username: 'John Doe', password: ...

Magicbox
Global site tag (gtag.js) - Google Analytics