Ajax陷阱－异步－下拉列表联动问题－[更新：2007-2-14]

写在前面

        我也是刚接触Ajax不久，用的还不是很顺手，总是会遇到这样那样的莫名其妙的问题，好在通过努力都搞定了，卸下来大家分享一下，希望与各位交流。

场景：实现下拉列表联动

假设其中的封装操作没有任何问题

//  JavaScript
function  loadFaculties() {
     var  xmlHttp  =  createXMLHttpRequest();
     var  oFacultyManager  =   new  FacultyManager(xmlHttp);
    oFacultyManager.fillSelectList();
}

function  loadMajors() {
     var  xmlHttp  =  createXMLHttpRequest();
     var  oMajorManager  =   new  MajorManager(xmlHttp);
     var  iFacultyId  =  document.getElementById( " f_faculty " ).value;
    oMajorManager.fillSelectList();
}

function  initPage() {
    loadFaculties();
    loadMajors();
}

这是3个预置的方法，下面我们将在页面中调用initPage，在f_faculty的onchange事件发生时调用loadMajors()

在body.onload事件中调用initPage你会收到500报错，前提是你是第一次加载f_faculty中的数据，每步跟踪调试，你会发现，其实iFacultyId的值是空的，也就是说loadFaculties并“没有执行完”就执行了loadMajors，这就涉及到异步的概念了，其实loadFaculties已经执行完了，只是这项访问的回调函数没有执行完，所以f_faculty并没有被完全填充，如果用DocumentFragment对象，那么很可能就没有被填充，所以，loadMajors自然会失败，服务器端自然无法收到与之对应的faculty的ID，所以访问数据库就会出错。

这点对于维护基本数据是非常重要的，因为你的网页上不可能写上静态代码来规定列表框的项目，所以，为了增大代码的可复用性和灵活性，实现两个Major和Faculty两个模块得完全分离，我不推荐在两个对象之间互操作，所以，正如你所看到的，很多网站的列表框中会出现诸如“－select one－”这样的默认字段，我们推荐这种做法，这样在body.onload事件中只需调用loadFaculties方法就可以了，而f_major的字段可静止设为“－select one－”。