逻辑上模拟整个与服务器通信的过程。
在没有真正与服务器通信的时候,如何写这样的ajax请求。
先根据页面结构创建一个静态数据(JSON)
var arrival_address_data={"code":0,"message":"success","data":[
{"id":0,"current":0,"name":"SHINYA NAKAHATA","type":1,"company":"5050 INTERNATIONAL
CO.,LTD.","city":"*","state":"CAUSEWAY BAY","postcode":" ","address_line_0":" 2/F, ETON TOWER, 8HYSAN
AVENUE","address_line_1":" ","address_line_2":" ","country":"CHINA","phone":"+852 (2910) 7769"},
{"id":1,"current":1,"name":"SHINYA NAKAHATA","type":1,"company":"5050 INTERNATIONAL
CO.,LTD.","city":"*","state":"CAUSEWAY BAY","postcode":" ","address_line_0":" 2/F, ETON TOWER, 8HYSAN
AVENUE","address_line_1":" ","address_line_2":" ","country":"CHINA","phone":"+852 (2910) 7769"},
{"id":2,"current":0,"name":"SHINYA NAKAHATA","type":1,"company":"5050 INTERNATIONAL
CO.,LTD.","city":"*","state":"CAUSEWAY BAY","postcode":" ","address_line_0":" 2/F, ETON TOWER, 8HYSAN
AVENUE","address_line_1":" ","address_line_2":" ","country":"CHINA","phone":"+852 (2910) 7769"},
{"id":3,"current":0,"name":"SHINYA NAKAHATA","type":1,"company":"5050
INTERNATIONAL CO.,LTD.","city":"*","state":"CAUSEWAY BAY","postcode":" ","address_line_0":" 2/F, ETON
TOWER, 8HYSAN AVENUE","address_line_1":" ","address_line_2":" ","country":"CHINA","phone":"+852 (2910)
7769"},
{"id":4,"current":0,"name":"SHINYA NAKAHATA","type":1,"company":"5050
INTERNATIONAL CO.,LTD.","city":"*","state":"CAUSEWAY BAY","postcode":" ","address_line_0":" 2/F, ETON
TOWER, 8HYSAN AVENUE","address_line_1":" ","address_line_2":" ","country":"CHINA","phone":"+852 (2910) 7769"}
]};
data
整个数据将被传入回调函数,回调函数做出ajax请求完成与否的判断,执行数据创建的方法。
当然,也可以从回调函数直接执行要执行的方法,再进去数据创建方法内部去判断code:0还是code:1。
ajax方法形如:
function setAddAjax(){
new RequestAjax("",null,arrfun_address_box,null,arrival_address_data,'GET');
}
这些静态数据和请求方法(接口)通常写在公用的public.js内。
而回调函数就在执行的js中。
回调函数形如:
function arrfun_address_box(data){
if(data.code==0){
creatAdd.setData(data);
}else{
alert(data.message);
}
}
可见请求方法(接口)中的第三个参数即是回调函数,
倒数第二即是静态数据,与服务器连同并获取动态数据以后,该位置上的参数可以置为null。
creatAdd.setData是一个实例化的类var creatAdd = 类
中的setData方法。
它的作用是循环遍历传入的数据data,也就是上面的arrival_address_data。
将要用的数据解析出来。
该类就是一个自创建HTML结构的封装。
在其构造函数内,
可以设一个数组,因为想要创建多个区块,那么还是把他们整齐的排列好以备后用:
this._itemArr=[];
一个表示当今写入的父级div的标识变量:
this._content=document.createElement("div");
当然该div参数将作为构造函数参数传入。
后面自然有构造函数下属方法的初始化,譬如:
this.createsingleBox;
还有最后一句将整个内容加入父级div的appendChild语句。
document.getElementById(div).appendChild(this._content);
剩下的就是用prototype丰满该构造函数的羽翼。
构造函数后面紧接着的是数据解析方法:
他必定有一个循环结构
for(var i=0;i<data.data.length;i++){
var singleBox=this.createsingleBox(data.data[i]);
}
它的主要职能就是把data[i]的数据传入到singleBox对象中,也就是creatsingleBox方法。
当然这个循环中还可以做更多的事情,比如
将每个创建好的singleBox循环加入父级,
this._content.appendChild(singleBox);
给singleBox对象设定css样式,
singleBox.style.marginBottom="20px";
存储它的某个属性值
singleBox.id="add_"+data.data[i].id;
把创建好的盒子存储起来,
this._itemArr.push(singleBox);
显然数组是有序排列的,序号和i相对相应了,其他功能就用得到。
在整个创建结构方法的末尾,
CreatAddressBox.prototype.createsingleBox=function (data){
... ...
return singleBox;
}
将这个创建好的对象返回,否则它怎么才能有序的被存储起来呢。
经过以上的过程,动态的结构已经被创建,并且是经过了ajax请求的过程。
但所谓动态,不光被创建,还要被删除。
删除也要走ajax请求这条路,同步删除服务器上的数据。
数据还是一样的数据。
请求方法需要有一个id作为参数。
//arrival_info.html---address delete 更改code的值测试删除失败与成功,id即是后台也成功删除了的id
var arrival_address_delete_data={"code":0,"message":"success","id":0};
function setAddDeleteAjax(id){
var obj={"id":id};
new RequestAjax("",obj,arrfun_address_box_delete_complete,null,arrival_address_delete_data,'POST');
}
回调函数来执行删除自己的方法。
该方法需要传入数据data。
//回调函数接收需要删除的那个数据的data
function arrfun_address_box_delete_complete(data){
creatAdd.deleteSelf(data);
}
此处没有作判断,那么在类的内部肯定还是要判断ajax请求成功与否。
类内部,整个需要被删除的数据被传入到实例化后的creatAdd对象内,供其方法进行分析。
首先经过getDeleteItemId对比,然后deleteSelf调用getDeleteItemId方法时,才能继续执行下去。
//delete self
CreatAddressBox.prototype.deleteSelf=function (data){ var deleteId=this.getDeleteItemId(data.id);
if(data.code==0){
this._content.removeChild(this._itemArr[deleteId]);
this._itemArr[deleteId]=null;
}else{
alert("删除失败");
}
CreatAddressBox.prototype.getDeleteItemId=function (id){
for(var i=0;i<this._itemArr.length;i++){
if(id==this._itemArr[i].value){
return i;
}
}
return -1;
}
前提是setData方法内部必须已经将singleBox的id传出
singleBox.value=data.data[i].id;
那么getDeleteItemId方法将正确对比ajax删除请求返回的id,在本地找到要删除的id,将它传给deleteSelf方法。
在innerHTML或者创建的删除按钮上绑定事件,事件指向的是执行方法,同时将按钮所在的数据id传出。
onclick='deleteAddbox("+data.id+");'
执行方法将调用ajax请求方法(接口)
function deleteAddbox(id){
setAddDeleteAjax(id);
}
习惯而已,也仅仅是留出一个位置,在执行方法里可以做更多事情。整个逻辑就这样。
删除按钮按下去的时候可以加一些提示信息,
比如一个滚动的ajax loading图标,它将被创建在singleBox中,
contentDeleteLoading.src="data:images/member/arrival/ajax-loader1.gif";
在进入回调函数的时候即可以让它显示出来,而执行到下一步(成功或者失败)的时候隐藏。
一段提示删除失败的文字。
contentDeleteFialText.innerHTML="删除失败!";
在请求失败时(data.code==1){
$(a).find('.failed').css({display:'block'});
}
如此,ajax逻辑基本完成。