Ajax的四個技術基石和重構

1.Ajax的四個技術基石
javascript+css+dom+xmlhttpRequest
使用dom(文件物件模型)定義使用者介面的結構,是一組可以使用javascript操作的可程式化對象展現出web頁面的結構
使用xmlhttpRequest以非同步方式與伺服器通訊.

web頁面的dom表示是一個樹狀結構,由元素或節點群組成,節點還可能包含很多子結點.js引擎通過全域變數
document公開當前web頁面的根節點,這個變數是所有dom操作的起點.
  var childEl=document.createElement('div');//建立新元素
          var el=document.getElementById('empty');
  el.appendChild(childEl);  //添加子節點
  var txtNode=document.createTextNode(text);//建立文本元素
  childEl.appendChild(txtNode);

  var childer=empty.childNodes;//找子結點

  for(var i=0;i<childern.length;i++)
  {
   childern[i].className='programmed'; //定義子結點的css樣式
 
  }

.programmed{
  color: blue;
 font-family: helvetica;
 font-weight: bold;
 font-size: 10px;
}

el.innerHtml="<div class='programmed'>"+text+"</div>";

css  www.csszengarden.com
css www.meyerweb.com/eric/css
js邊學邊做 www.w3schools.com/js/js_examples_3.asp  互動式學習教程
 

2.重構
net.js
/*
url-loading object and a request queue built on top of it
*/

/* namespacing object */
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  if (ready==net.READY_STATE_COMPLETE){
    var httpStatus=req.status;
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"/n/nreadyState:"+this.req.readyState
    +"/nstatus: "+this.req.status
    +"/nheaders: "+this.req.getAllResponseHeaders());
}