Simple Ajax class

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.