$.post与$.ajax的理解和封装

对$.post进行封装
js中如果一个对象undefine或者null，然后加上感叹号!就是false了；
加载根节点和加载子节点的url一样，进行重构将一样的部分抽取出来，不一样的传递进来；
--
目的是，不需要写$.post,而只需要传递三个参数，将值传递进去就可以实现；

===============
var tree = {
zTree: '',//运行zTree方法的返回值
treeNode: '',
/**
* 加载树
*/
setting: {
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
},
callback: {//事件
//当该事件执行的时候，树已经加载出来了
expand: function(event, treeId, treeNode){
/**
* event鼠标事件
* treeId 树的容器的ID
* treeNOde当前点击的节点
*/
tree.treeNode = treeNode;

tree.loadSubMenuitems();
}
}
},
/**
* 点击事件加载树
* 1、当请求menuitem.html页面的时候，加载根节点
* 2、当点击树上的节点的时候，触发事件：加载该节点的子节点
*/
loadRoot: function(){
$.oapost({
url:"menuitemAction_showSubMenuitem.action",
data:{
pid:0
},
callback:function(data){
tree.zTree = $("#tree").zTree(tree.setting, data.menuitemList);
}
});
},
/**
* 根据父节点加载子节点
*/
loadSubMenuitems: function(){
if (!tree.zTree.getNodeByParam("pid", tree.treeNode.mid)) {//点击的节点没有子节点
$.oapost({
url:"menuitemAction_showSubMenuitem.action",
data:{
pid:tree.treeNode.mid
},
callback:function(data){
tree.zTree.addNodes(tree.treeNode, data.menuitemList, true);
}
});
}
}
};
$().ready(function(){
tree.loadRoot();
});
上面是将之前的post方法全部用封装的方法写，基本类似，主要是需要掌握回调函数的用法；
$.post(postJSON.url, postJSON.data, function(data){
postJSON.callback(data);
});
================
Ext.Ajax.request({
url:"../servlet/ModulesTreeServlet?method=takedefault&settingid="+settingid+"userid="+psetting.userid,
params:{value:Ext.util.JSON.encode(jsonstr)},
success:function(req){
var message = req.responseText;
if(message=="sessiontimeout"){
location.href = '../login.jsp?sessionmessage=1';
}
},
error:function(){

}
});
------
上面的Ext的请求方式，全部使用servlet进行的操作；
封装的ajax请求应该有请求成功还有请求失败的处理；
-
返回值:XMLHttpRequest jQuery.post(url, [data], [callback], [type])
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
-
上面是jQuery自己给出的解释，
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
-
ajax
$.post(url,data,function(data){
//无论服务器是否成功，都在这里返回

})；
如果使用这个怎么处理错误信息，
Flex flash技术，很漂亮…………
写全局的错误处理，只要出现ajax的请求，就统一进行错误处理；
团队的合作性能：
$.post
如果服务器没有错误，返回的是json格式的对象，如果服务器有错误，则返回的是错误信息；
原因：dao层抛出异常到service层，service层传到action，action抛到struts的经典错误处理页面。
回调函数的信息data是struts的错误页面html代码；
因为action没有处理，直接抛出；怎么处理？在这里处理下，try，然后就可以将信息避免传递到页面；

private String message = "";

public String getMessage() {
return message;
}

public String showSubMenuitem() throws Exception{
try{
int a = 1/0;
this.menuitemList = this.menuitemService.getSubMenuitems(this.getModel().getPid());
}catch(Exception e){
this.message = "加载根节点时出错了！";
}
return SUCCESS;
}
----
callback:function(data){
if(data.message==""){//如果为“”则表示没有错误，

}else{
alert(data.message);
}
}
=====
这样比较麻烦，怎么更方便，全局的错误处理，
ajax的全局错误信息处理。。。
定义全局的错误处理：
<package name="ajax-error" namespace="/" extends="json-default">
<global-results>
<result name="errHandler" type="chain">
<param name="actionName">errorProcessor</param>
</result>
</global-results>
<global-exception-mappings>
<exception-mapping exception="java.lang.Exception"
result="errHandler" />
</global-exception-mappings>

<action name="errorProcessor" class="com.itcast.oa.exception.AjaxErrorProcess">
<result type="json"></result>
</action>
</package>

--
public class AjaxErrorProcess extends ActionSupport{
private String message;
public String getMessage() {
return message;
}

private Exception exception;

public Exception getException() {
return exception;
}

public void setException(Exception exception) {
this.exception = exception;
}

public String execute() {
/**
* 修改状态码
* 客户端就能感应到服务器端产生异常
*/
//ServletActionContext.getResponse().setStatus(404);
this.message = exception.getMessage();
return SUCCESS;
}
}
--
将需要ajax错误信息处理的action继承这个package：ajax-error;
--
错误的地方就可以被这个拦截器拦截到，进行全局的错误信息处理，也就是Action里面就不需要message属性，可以统一写在这个统一地方；
还可以将信息抽取出来：
(function($){
$.oapost = function(postJSON){
$.post(postJSON.url, postJSON.data, function(data){
if(data.message==""){
postJSON.callback(data);
}else{//处理错误信息
alert(data.message);
}
});
}
})($);
--

$.oapost({
url:"menuitemAction_showSubMenuitem.action",
data:{
pid:0
},
callback:function(data){
tree.zTree = $("#tree").zTree(tree.setting, data.menuitemList);
}
});
--
放在统一的地方写就可以省掉很多代码；
jquery对ajax的请求错误信息处理在公司中是各种各样的，但是基本也是如此这般的原理；

==========================
$.ajax
post是只在成功的时候处理，ajax是定义有success 和 error ；
$.ajax({
type: "post",
url: "menuitemAction_showSubMenuitem.action",
data:{
pid:0
},
success:function(data, textStatus){
alert(data.message);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
var obj = eval("("+XMLHttpRequest.responseText+")");
alert(obj.message);
}
});
这里的ajax错误信息是只有在status为404 403 500等信息的时候才进入error处理错误信息；就是如果状态码不改变的话就不会报错；l
struts的错误处理机制自始至终都没有修改状态码，这对浏览器来说是不认为是真正的错误信息；
--
解决方法是：在

public class AjaxErrorProcess extends ActionSupport{
private String message;
public String getMessage() {
return message;
}

private Exception exception;

public Exception getException() {
return exception;
}

public void setException(Exception exception) {
this.exception = exception;
}

public String execute() {
/**
* 修改状态码
* 客户端就能感应到服务器端产生异常
*/
ServletActionContext.getResponse().setStatus(404);//这里设置response的状态码为404；这就可以进去ajax的error错误信息；
this.message = exception.getMessage();
return SUCCESS;
}
}
--
但是这种方式一点不好是将状态码暴露出来，一般这个是属于底层操作的东西，action做一个代理，在异常里面捕获异常，显示，在类里面改掉；
--
ajax这种处理之后前台需要做的处理是：
error:function(XMLHttpRequest, textStatus, errorThrown){
var obj = eval("("+XMLHttpRequest.responseText+")");
alert(obj.message);
}

posted @ 2014-03-03 19:56 教程学习阅读(711) 评论(0) 收藏举报

刷新页面返回顶部

$.post与$.ajax的理解和封装

公告