Javascript implements simple and practical AJAX complete examples, and js is simple and practical ajax

Source: Internet
Author: User

Javascript implements simple and practical AJAX complete examples, and js is simple and practical ajax

This document describes how to implement AJAX in JavaScript. We will share this with you for your reference. The details are as follows:

// Copyright: WUJXPING // ajax 1.2 // update 2012-2-20 // 1. the asynchronous data loading method can be get, post setting // 2. asynchronous synchronization mode attribute setting // 3. Automatic Data Loading timeout setting // 4. *** Add a data loading event, you can use events to process server data in real time // 5. Add the User-Defined parameter this in the callback function. e // 6. Add the control for multiple ajax submissions. You only need to define the ajax object as a global variable, each submission will wait for the last submitted execution result. // 7. The XmlHttp object is repeatedly created when the data is modified for repeated submission. // 8. Major bugs are fixed, multiple AJAX events overwrite the issue // The Event ajax is returned from server data. prototype. serverEven = function (Func) {this. callback = new delegate (Func); // instantiate} // create an asynchronous processing object ajax. prototype. createXMLHttp = function () {If (this. XmlHttp! = Null & typeof this. xmlHttp = "object") return this. xmlHttp; xmlhttpObj = ["Microsoft. xmlHttp "," MSXML2.XmlHttp. 5.0 "," MSXML2.XmlHttp. 4.0 "," MSXML2.XmlHttp. 3.0 "," MSXML2.XmlHttp "]; // create XMLHttpRequest if (window. activeXObject) {for (I = 0; I <xmlhttpObj. length; I ++) {// select the ie compatible version. try {this. xmlHttp = new ActiveXObject (xmlhttpObj [I]);} catch (err) {continue;} if (this. xmlHttp) break;} else if (window. XM LHttpRequest) {this. xmlHttp = new XMLHttpRequest ();} return this. xmlHttp;} // start to call ajax. prototype. send = function () {if (this. isbusy) // ajax is busy return; this. isbusy = true; var xmlhtml = this. createXMLHttp (); // create the object if (xmlhtml = null) {this. isbusy = false if (this. callback! = Null) this. callback. run ("XMLHttpRequest Create Faild! ", This. e); return;} var url = this. url; var _ this = this; // Add a random number to prevent caching if (url. indexOf ("? ")> 0) url + =" & randnum = "+ Math. random (); else url + = "? Randnum = "+ Math. random (); xmlhtml. open (this. method, url, this. async); xmlhtml. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charsets = UTF-8;"); xmlhtml. setRequestHeader ("Cache-Control", "no-cache"); xmlhtml. setRequestHeader ("Connection", "Keep-Alive"); // timed timeout wait var timer = setTimeout (function () {// if (xmlhtml. readyState! = 4) {xmlhtml. abort (); // cancel this transfer _ this. isbusy = false; if (_ this. callback! = Null) _ this. callback. run ("send timeout! ", _ This. e); clearTimeout (timer); // disable the timer}, this. timeout); if (this. async) // State Changes During asynchronous data loading are linked to the event xmlhtml. onreadystatechange = function () {// receives the server response if (xmlhtml. readyState = 4) {// determine whether the status is complete. if (xmlhtml. status = 200) {// determine whether execution is successful _ this. isbusy = false; clearTimeout (timer); // disable the timer if (_ this. callback! = Null) // start to trigger server Event _ this. callback. run (xmlhtml, _ this. e) ;}}; try {xmlhtml. send (this. option);} catch (err) {this. isbusy = false clearTimeout (timer); // disable the timer alert (err); return;} if (! This. async) {// when synchronizing data loading, data will be returned for processing this. isbusy = false; clearTimeout (timer); // disable the timer if (this. callback! = Null) this. callback. run (xmlhtml, this. e) ;}} // create the ajax object function ajax (url) {this. method = "post"; // set the data submission method this. async = true; // whether asynchronous data loading mode is enabled this. option = ""; // request parameter this. url = url; // The requested Url connects to this. timeout = 1000*60*1; // The default timeout value is 1 minute. e = null; // user-defined parameter this in the callback event. xmlHttp = null; // receives asynchronously created objects to prevent repeated creation of this. isbusy = false // get the current ajax execution status this. callback = null; // declare the callback event // delegate class delegate = function (func) {this. arr = new Array (); // Callback Function Array this. add = function (func) {this. arr [this. arr. length] = func;}; this. run = function (sender, e) {for (var I = 0; I <this. arr. length; I ++) {var func = this. arr [I]; if (typeof func = "function") {func (sender, e); // traverse all methods and calls} this. add (func );}}

Related Article

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.