Power Project 18--dom object of Ajax

The core object of the Ajax operation: xmlreq = new XMLHttpRequest ();

The first step: add in Dictionaryindex.jsp:

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

The second step: call JS code: implementation:

pub.submitactionwithform:     * parameter one    : name of the form Form2 * parameter two: means URL connection     * parameter three: form Form1 name    Ajax package:    1 : There are 2 forms Form1 and Form2    in dictionaryindex.jsp 2 : Using Ajax to pass elements in form Form1 as parameters, processing on the server side, placing the processed results in dictionaryedit.jsp     3 : Place all content in dictionaryedit.jsp dictionaryindex.jsp page Form2    effect: async effect, content in a page form Form1 does not change, content in Form2 changes 

Pub.submitactionwithform ('Form2','${pagecontext.request.contextpath}/ System/elecsystemddlaction_edit.do','Form1');

Step three: Define in Pub.js:

Step one: (pub.submitactionwithform)

/** * domid: Name of form Form2 * action: indicates URL connection * sform: name of form Form1*/Pub.submitactionwithform=function (domid,action,sform) {/** First step: Create an Ajax engine object*/  varreq =pub.newxmlhttprequest (); /** Step Two: Req.onreadystatechange represents an event handler (equivalent to a listener) that listens to the Client-server connection state*/  varHandlerfunction =Pub.getreadystatehandler (req, domid,pub.handleresponse); Req.onreadystatechange=handlerfunction; /** Step three: Open a connection, ask: if it is a post request, you need to set a header information, otherwise you can not use the Req.send () method to send data to the server*/Req.open ("POST", action,true); Req.setrequestheader ("Content-type","application/x-www-form-urlencoded"); /** Fourth step: send data to the server, format: name= Zhang San &age=28*/  varstr =Pub.getparams2str (sform); //passing elements in form Form1 as parameters to the serverreq.send (str);}

Step two: Create an AJAX engine (pub.newxmlhttprequest)

/** * Create Ajax engine*/pub.newxmlhttprequest=function Newxmlhttprequest () {varXMLreq =false; if(WINDOW. Xmlhttprequest) {xmlreq=NewXMLHttpRequest (); } Else if(WINDOW. Activexobject) {Try{xmlreq=NewActiveXObject ("msxml2.xmlhttp"); } Catch(e1) {Try{xmlreq=NewActiveXObject ("Microsoft.XMLHTTP"); } Catch(e2) {alert (e2); }    }  }  returnxmlreq;}

Step Three: Pass the elements in the form Form1 as parameters (pub.getparams2str)

/** * * @param sform: Pass the name of the form Form1 * @returns {String}: use Ajax to return the parameters of the server side, passing the parameters of the elements in the form Form1*/Pub.getparams2str=function Getparams2str (sform) {varstrdiv=""; Try {    varobjform=document.forms[sform]; if(!Objform)returnstrdiv; varelt,sname,svalue;  for(varFLD =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+""; ElseStrdiv=strdiv + sname+"="+svalue+"&"; }  }  Catch(ex) {returnstrdiv; }    returnstrdiv;}

Step Four: Receive Server-side returned results (pub.getreadystatehandler)

/** * * @param req: Engine Object * @param eleid: Form2 name of the form * @param responseXmlHandler:Pub.handleResponse (function body) * @returns {funct ion}*/Pub.getreadystatehandler=function Getreadystatehandler(req, eleid,responsexmlhandler) {returnfunction () {/** Req.readystate: used to listen to the client and server connection status * 0: This time the client does not call the open () method * 1: indicates that the client executes the open method, but the Send method does not execute the * 2:open method execute, The Send method also executes * 3: the server starts processing data and returns data * 4: returns data successfully, only 4 this state, to get the results returned by the server side*/    if(req.readystate = =4) {       /** * Req.status: indicates Java status code * 404: path Error * 500: Server exception * 200: indicates no exception, normal access to data, only 200 this state, to obtain the server side The returned result*/      if(req.status = = $) {          /** * Req.responsetext: Gets the result returned by the server side, returns the result of the text (including: string, JSON Data) * Req.responsexml: Gets the result returned by the server side, returns the XML data Results*/Responsexmlhandler (req.responsetext,eleid); } Else{alert ("HTTP error:"+req.status); return false; }    }  }

Step Five: dictionaryedit.jsp The returned results and place them in the Form2 of dictionaryindex.jsp (pub.handleresponse)

/**/pub.handleresponse= function Handleresponse (data,eleid      ) {//  Gets the Form2 object of the form      var ele =document.getElementById (eleid)      ; // Place the returned results in      the elements of the form Form2 ele.innerhtml = data;    }

The corresponding page dictionaryedit.jsp

The Query method is finished, but the page is still not displayed.

Power Project 18--dom object of Ajax