電力項目十八--DOM對象的ajax

標籤：pen   定義   添加   doc   sys   for   json   處理   沒有   

Ajax操作的核心對象：xmlreq = new XMLHttpRequest();

第一步：在dictionaryIndex.jsp中添加：

<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>

第二步：調用js的代碼：實現：

Pub.submitActionWithForm:    * 參數一：表單Form2的名稱    * 參數二：表示URL串連    * 參數三：表單Form1的名稱    ajax的封裝：    1：在dictionaryIndex.jsp中存在2個表單Form1和Form2    2：使用ajax傳遞表單Form1中的元素作為參數，在伺服器端進行處理，將處理後的結果放置dictionaryEdit.jsp中    3：將dictionaryEdit.jsp中的全部內容放置dictionaryIndex.jsp頁面的Form2中    效果：非同步效果，一個頁面表單Form1中的內容不發生變化，Form2中的內容發生變化

 

Pub.submitActionWithForm(‘Form2‘,‘${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do‘,‘Form1‘);

 

第三步：在pub.js中定義：

步驟一：（Pub.submitActionWithForm）

/*** * domId：表單Form2的名稱 * action：表示URL串連 * sForm：表單Form1的名稱 */Pub.submitActionWithForm=function(domId,action,sForm){  /**第一步：建立Ajax引擎對象*/  var req = Pub.newXMLHttpRequest();  /**第二步：req.onreadystatechange表示事件處理函數（相當於一個監聽），用來監聽用戶端與伺服器端的串連狀態*/  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);  req.onreadystatechange = handlerFunction;  /**第三步：開啟一個串連，要求：如果是POST請求，需要設定一個頭部資訊，否則此時不能使用req.send()方法向伺服器發送資料*/  req.open("POST", action, true);  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   /**第四步：向伺服器發送資料，格式：name=張三&age=28*/  var str = Pub.getParams2Str(sForm);   //傳遞表單Form1中的元素作為參數給伺服器  req.send(str);}

步驟二：建立ajax引擎（Pub.newXMLHttpRequest）

/** * 建立ajax引擎 */Pub.newXMLHttpRequest=function newXMLHttpRequest() {  var xmlreq = false;  if (window.XMLHttpRequest) {    xmlreq = new XMLHttpRequest();  } else if (window.ActiveXObject) {         try {            xmlreq = new ActiveXObject("Msxml2.XMLHTTP");    } catch (e1) {             try {              xmlreq = new ActiveXObject("Microsoft.XMLHTTP");      } catch (e2) {                  alert(e2);      }    }  }  return xmlreq;}

 

步驟三：傳遞表單Form1中的元素作為參數（Pub.getParams2Str）

/** *  * @param sForm：傳遞表單Form1的名稱 * @returns {String}：使用ajax返回伺服器端的參數，傳遞的就是表單Form1中元素的參數 */Pub.getParams2Str=function getParams2Str(sForm){ var strDiv="";       try {    var objForm=document.forms[sForm];  if (!objForm)    return strDiv;  var elt,sName,sValue;  for (var fld = 0; fld < objForm.elements.length; fld++) {      elt = objForm.elements[fld];          sName=elt.name;      sValue=""+elt.value;      if(fld==objForm.elements.length-1)          strDiv=strDiv + sName+"="+sValue+"";       else             strDiv=strDiv + sName+"="+sValue+"&";   }  }  catch (ex) {    return strDiv;    }    return strDiv;}

 

步驟四：接收伺服器端返回的結果（Pub.getReadyStateHandler）

/** *  * @param req:引擎對象 * @param eleid：表單Form2的名稱 * @param responseXmlHandler：Pub.handleResponse（函數體） * @returns {Function} */Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {    return function () {    /**     * req.readyState:用來監聽用戶端與伺服器端的串連狀態     * 0：表示此時用戶端沒有調用open()方法     * 1：表示用戶端執行open方法，但是send方法沒有執行     * 2：open方法執行，send方法也執行     * 3：伺服器開始處理資料，並返回資料     * 4：返回資料成功，只有4這個狀態，才能擷取伺服器端返回的結果     */    if (req.readyState == 4) {       /**        * req.status：表示java的狀態代碼        * 404：路徑錯誤        * 500：伺服器異常        * 200：表示沒有異常，正常訪問資料，只有200這個狀態的時候，才能擷取伺服器端返回的結果        */      if (req.status == 200) {          /**           * req.responseText:擷取伺服器端返回的結果，返回的是文本的結果（包括：字串，json資料）           * req.responseXML:擷取伺服器端返回的結果，返回的是XML資料的結果           */        responseXmlHandler(req.responseText,eleid);       } else {         alert("HTTP error: "+req.status);        return false;      }    }  }

 

步驟五：將返回的結果dictionaryEdit.jsp，並放置到dictionaryIndex.jsp的Form2中（Pub.handleResponse）

/*** @param data：伺服器返回的結果 * @param eleid：表單Form2的名稱 */Pub.handleResponse= function handleResponse(data,eleid){      //擷取表單Form2的對象      var ele =document.getElementById(eleid);      //將返回的結果放置到表單Form2的元素中      ele.innerHTML = data;    }

對應的頁面dictionaryEdit.jsp 

 查詢方法寫完，但是頁面上還是沒有顯示出來 。

電力項目十八--DOM對象的ajax