Recently, I am working on web development. The front-end page requires easy operations, so I chose JS control.
 
This function allows you to query background data without refreshing a new page and paging the scroll bar.
 
The following is a simple Ajax class encapsulated by myself and a JS dataset.
 
 
 
Code:
 
// [1] Ajax class <br/> function Ajax () {<br/> This. XMLHTTP = NULL; // XML Object <br/> This. method = "Post"; // The method to be executed (post/get) <br/> This. url = ""; // the URL of the asynchronous call page <br/> This. responsetext = ""; // response string returned asynchronously <br/> This. responsexml = ""; // response XML returned asynchronously <br/> This. failed = false; // create an object error flag <br/> This. synch = false; // synchronous false/asynchronous true <br/> ******* * ****************/<br/> This. onloading = function (){}; // Sending request <br/> This. onloaded = function () {}; // all response content has been received <br/> This. oninteractive = function () {}; // resolving the response content <br/> This. oncompletion = function () {}; // The response content is parsed. <br/> This. onerror = function () {}; // asynchronous error handling event <br/> This. onfail = function (){}; // world of failed object creation </P> <p>/************************ reset event *** * ******************/<br/> This. resetfunctions = function () {<br/> This. onloading = function () {}; <B R/> This. onloaded = function () {}; <br/> This. oninteractive = function () {}; <br/> This. oncompletion = function () {}; <br/> This. onerror = function () {}; <br/> This. onfail = function () {}; <br/> }; </P> <p> ************ * *******/<br/> // initialization <br/> This. init = function () {<br/> If (window. XMLHttpRequest) {<br/> This. XMLHTTP = new XMLHttpRequest (); <br/>} else if (window. activeX Object) {<br/> try {This. XMLHTTP = new activexobject ("msxml4.xmlhttp") ;}< br/> catch (e) {<br/> try {This. XMLHTTP = new activexobject ("msxml3.xmlhttp") ;}< br/> catch (e) {<br/> try {This. XMLHTTP = new activexobject ("msxml2.xmlhttp") ;}< br/> catch (e) {<br/> try {This. XMLHTTP = new activexobject ("Microsoft. XMLHTTP ") ;}< br/> catch (OC) {This. failed = true ;}< br/>}< br/> }; </P> <p> // send <Br/> // @ Param data <br/> // @ example send ("ID = 1"); <br/> This. send = function (data) {<br/> var self = This; <br/> If (this. method = "Post") {<br/> This. XMLHTTP. open (self. method, self. URL, self. synch); <br/>}else {<br/> This. XMLHTTP. open (self. method, self. URL + "? "+ Encodeuri (data), self. synch); <br/>}< br/> // Add a message Response Header <br/> This. XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded; charset = UTF-8 "); </P> <p> // asynchronous callback function <br/> This. XMLHTTP. onreadystatechange = function () {<br/> // the object is not created <br/> If (self. failed) {<br/> self. onfail (); <br/> return; <br/>}</P> <p> // message response flag <br/> switch (self. XMLHTTP. readystate) {<br/> // (not initialized) The send () method has not been called. <br/> Case 0: {</P> <p> break; <br/>}< br/> // The send () method has been called, sending request <br/> case 1: {<br/> self. onloading (); <br/> break; <br/>}< br/> // The send () method is executed successfully, all response content received <br/> case 2: {<br/> self. onloaded (); <br/> break; <br/>}< br/> // interaction) Parse response content <br/> case 3: {<br/> self. oninteractive (); <br/> break; <br/>}< br/> // complete) after the response content is parsed, you can call <br/> case 4 on the client: {<br/> switch (self. XMLHTTP. status) {<br/> case 200: {<Br/> self. responsetext = self. XMLHTTP. responsetext; <br/> self. responsexml = self. XMLHTTP. responsexml; <br/> break; <br/>}< br/> case 500 :{< br/> alert ("500 Error! "); <Br/> break; <br/>}< br/> self. oncompletion (); <br/> break; <br/>}< br/>}; </P> <p> If (this. method = "Post") {<br/> This. XMLHTTP. send (data); // send the request <br/>} else {<br/> This. XMLHTTP. send (); // send the request <br/>}< br/>}; </P> <p> This. abort = function () {<br/> This. XMLHTTP. abort (); <br/>}</P> <p> This. close = function () {<br/> This. XMLHTTP = NULL; <br/>}< br/> This. init (); <br/>}< br/> // [2] encapsulate responsexml into a dataset class <br/> function recordset (XML, recordname) <br/>{< br/> var records = xml. getelementsbytagname (recordname); <br/> This. recordcount = records. length; <br/> var current_index = 0; <br/> var items = []; <br/> If (this. recordcount> 0) {<br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> // records are moved down <br/> This. next = function () {<br/> If (current_index <this. recordcount-1) {<br/> current_index + = 1; <br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> // records set migration <br/> This. previous = function () {<br/> If (current_index> 0) {<br/> current_index-= 1; <br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> // move the record set to the first note <br/> This. first = function () {<br/> current_index = 0; <br/> If (this. recordcount> 0) {<br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> // move the record set to the last record <br/> This. last = function () {<br/> current_index = This. recordcount-1; <br/> If (this. recordcount> 0) {<br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> This. nextoff= function (rowindex) {<br/> current_index = rowindex; <br/> If (this. recordcount> 0 & current_index <this. recordcount) {<br/> items = createfields (records [current_index]); <br/> This. items = items; <br/>}< br/> // construct the record field array <br/> function createfields (record) {<br/> var items = new array (); <br/> var childnodes = record. childnodes; <br/> for (VAR I = 0; I <childnodes. length; I ++) {<br/> var item = new object (); <br/> item. name = childnodes. item (I ). tagname; <br/> item. value = childnodes. item (I ). text; <br/> items [items. length] = item; <br/> items [item. name] = item; <br/>}< br/> return items; <br/>}< br/> 
 
(Note: it is a coincidence that there are similarities)