javascript ajax實現資料post提交

簡單的 new

首先需要建立一個新變數並賦給它一個 XMLHttpRequest 對象執行個體。這在 JavaScript 中很簡單，只要對該對象名使用 new 關鍵字即可，如 清單 1 所示。

清單 1. 建立新的 XMLHttpRequest 對象

代碼如下	複製代碼
<script language="javascript" type="text/javascript"> var request = new XMLHttpRequest(); </script>

 

不難吧？記住，JavaScript 不要求指定變數類型，因此不需要像 清單 2 那樣做（在 Java 語言中可能需要這樣）。

清單 2. 建立 XMLHttpRequest 的 Java 虛擬碼

代碼如下	複製代碼
XMLHttpRequest request = new XMLHttpRequest();

 

因此在 JavaScript 中用 var 建立一個變數，給它一個名字（如 “request”），然後賦給它一個新的 XMLHttpRequest 執行個體。此後就可以在函數中使用該對象了。

錯誤處理

在實際上各種事情都可能出錯，而上面的代碼沒有提供任何錯誤處理。較好的辦法是建立該對象，並在出現問題時優雅地退出。比如，任何較早的瀏覽器（不論您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支援 XMLHttpRequest，您需要讓這些使用者知道有些地方出了問題。清單 3 說明如何建立該對象，以便在出現問題的時候發出 JavaScript 警告。

清單 3. 建立具有錯誤處理能力的 XMLHttpRequest

代碼如下	複製代碼
<script language="javascript" type="text/javascript"> var request = false; try {   request = new XMLHttpRequest(); } catch (failed) {   request = false; } if (!request)   alert("Error initializing XMLHttpRequest!"); </script>

 

一定要理解這些步驟：

建立一個新變數 request 並賦值 false。後面將使用 false 作為判定條件，它表示還沒有建立 XMLHttpRequest 對象。
增加 try/catch 塊：
嘗試建立 XMLHttpRequest 對象。
如果失敗（catch (failed)）則保證 request 的值仍然為 false。
檢查 request 是否仍為 false（如果一切正常就不會是 false）。
如果出現問題（request 是 false）則使用 JavaScript 警告通知使用者出現了問題。
代碼非常簡單，對大多數 JavaScript 和 Web 開發人員來說，真正理解它要比讀寫代碼花更長的時間。現在已經得到了一段帶有錯誤檢查的 XMLHttpRequest 對象建立代碼，還可以告訴您哪兒出了問題。

以下是xmlHttp的coding：

代碼如下

複製代碼

var xmlHttp; function createXMLHttpRequest(){     //Mozilla 瀏覽器（將XMLHttpRequest對象作為本地瀏覽器對象來建立）     if(window.XMLHttpRequest){ //Mozilla 瀏覽器         xmlHttp = new XMLHttpRequest();     }else if(window.ActiveXObject) { //IE瀏覽器     //IE瀏覽器（將XMLHttpRequest對象作為ActiveX對象來建立）         try{             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");         }catch(e){             try {                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");             }catch(e){}         }     }     if(xmlHttp == null){         alert("不能建立XMLHttpRequest對象");         return false;     } } //用於發出非同步請求的方法 function sendAsynchronRequest(url,parameter,callback){     createXMLHttpRequest();     if(parameter == null){         //設定一個事件處理器，當XMLHttp狀態發生變化，就會出發該事件處理器，由他調用         //callback指定的javascript函數         xmlHttp.onreadystatechange = callback;         //設定對拂去其調用的參數（提交的方式，請求的的url，請求的類型（非同步請求））         xmlHttp.open("GET",url,true);//true表示發出一個非同步請求。         xmlHttp.send(null);     }else{         xmlHttp.onreadystatechange = callback;         xmlHttp.open("POST",url,true);         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");         xmlHttp.send(parameter);     } } //以上代碼是通用的方法，接下來是調用以上的方法 function loadPros(title,count,pid,cid,level){     // 調用非同步要求方法     url = "。。。。。。。。";     sendAsynchronRequest(url,null,loadCallBack); } // 指定回調方法 function loadCallBack(){   try  {     if (xmlHttp.readyState == 4) {         if (xmlHttp.status == 200) {             if(xmlHttp.responseText != null && xmlHttp.responseText != ""){                var divProid = document.getElementById('videolist');                divProid.innerHTML = xmlHttp.responseText;                for(i=0;i<len;i++)                {                    var video_url = document.getElementById("videolist"+i+"").href;                    if(video_url != undefined && video_url != null && video_url != ""){                       window.location.href = video_url;                    }                }            }         }      }      if (xmlHttp.readyState == 1)      {         //alert("正在載入連線物件......");      }      if (xmlHttp.readyState == 2)      {         //alert("連線物件載入完畢。");      }      if (xmlHttp.readyState == 3)      {         //alert("資料擷取中......");      }   }   catch (e)   {       //alert(e);   } }

一個相容性比較好的ajax代碼

代碼如下

複製代碼

var http_request = false;     //ajax 對象 function changepage(url,idname) {  if(url.indexOf("?")>-1)   url=url+ "&now="+(new Date()).getTime();  else   url=url+ "?now="+(new Date()).getTime();  http_request = false;  if (window.XMLHttpRequest) { // Mozilla, Safari,...             http_request = new XMLHttpRequest();             if (http_request.overrideMimeType) {                 http_request.overrideMimeType('text/xml');             }         } else if (window.ActiveXObject) { // IE             try {                 http_request = new ActiveXObject("Msxml2.XMLHTTP");             } catch (e) {                 try {                     http_request = new ActiveXObject("Microsoft.XMLHTTP");                 } catch (e) {}             }         }         if (!http_request) {             alert('Giving up :( Cannot create an XMLHTTP instance');             return false;         }         http_request.onreadystatechange = LoadContent(idname);   //alert("url="+url)         http_request.open('GET', url, true);         http_request.send(null); }   function LoadContent(idname) {    if (http_request.readyState != 4)  {   //alert("出現錯誤http_request.readyState"+http_request.readyState);   return;  }  if (http_request.status != 200)  {    //alert("出現錯誤"+http_request.status);;   return;  }  eval("document.getElementById('"+idname+"').innerHTML") = http_request.responseText;  //document.getElementById('programlist').innerHTML = "ddddddddddddddddddddddddd";  }