淺談Ajax使用

我以爲學每樣東西，知道他的原理與如何使用就行了。因此在此我就不廢話。 node

1.原理：
簡單的來講（Ajax使用過程像你在與某人聊天，肚子餓了讓舍友幫你去吃的，而本身能夠繼續聊天的過程同樣。你的舍友此時就充當Ajax引擎的角色，而你是頁面，某人是瀏覽頁面用戶）是實現頁面無刷新的交互。
1.1 說再多不如看圖，Ajax工做原理圖

2.如何使用
2.1建立Ajax引擎代碼 ajax

//建立ajax引擎,ajax根據用戶使用的瀏覽器不一樣，會建立不一樣的ajax引擎
function createXMLHttpRequest()
{
 var request = false;
 if(window.XMLHttpRequest) {
  request = new XMLHttpRequest();
  if(request.overrideMimeType) {
   request.overrideMimeType('text/xml');
  }
 } else if(window.ActiveXObject) {
  var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0',
       'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
  for(var i=0; i<versions.length; i++) {
   try {
    request = new ActiveXObject(versions[i]);
    if(request) {
     return request;
    }
   } catch(e) {}
  }
 }
 return request;
}

2.2Ajax用get發送請求代碼

var AjaxEngine=null;
function Ajax(myurl,myobj) {
 var url=myurl;　　//如url.jsp?username=xiaoming&password=0000
 var obj=myobj;　　//回調函數，只能寫函數名
 AjaxEngine=createXMLHttpRequest(); //
 if(AjaxEngine){
    AjaxEngine.open("get",url,true);    
    AjaxEngine.onreadystatechange=obj;      
    AjaxEngine.send(null);
 }
}

2.3回調函數eg 瀏覽器

function usernamecl(){
  if(AjaxEngine.readyState==4){
     window.alert("服務器返回"+AjaxEngine.responseText);//以文本形式接收
     var msg=AjaxEngine.responseXML.getElementsByTagName("msg");//以xml形式接收
     var msgValue=msg[0].childNodes[0].nodeValue; 
     window.alert("msgValue"+msgValue);
   }
}