Ajax页面逻辑

逻辑上模拟整个与服务器通信的过程。
在没有真正与服务器通信的时候，如何写这样的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":"HONG KONG","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":"HONG KONG","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":"HONG KONG","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":"HONG KONG","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":"HONG KONG","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逻辑基本完成。