Ajax Core framework functions and examples _ajax related

Source: Internet
Author: User
Core Ajax (options) functions, including the establishment of XMLHttpRequest, data extraction, to determine whether the return to success, and so on, basically meet the day-to-day needs.
Copy Code code as follows:

A generic function for performming AJAX requests
It takes one argument, which is ' an object ' contains a set of options
All of which are outline in the comments, below
function Ajax (Options) {
Load the Options object with defaults, if no
Values were provided by the user
Options = {
The type of HTTP Request
Type:options.type | | "POST",
The URL the request would be made to
Url:options.url | | "",
How long to wait before considering the request to be a timeout
Timeout:options.timeout | | 5000,
Functions to call when the request fails, succeeds,
or completes (either fail or succeed)
OnComplete:options.onComplete | | function () {},
OnError:options.onError | | function () {},
onSuccess:options.onSuccess | | function () {},
The data type that ' ll be returned from the server
The default is simply to determine what data being returned from
and act accordingly.
Data:options.data | | ""
};
Create the Request object
var xml = new XMLHttpRequest ();
Open the asynchronous POST request
Xml.open ("Get", "/some/url.cgi", true);
Xml.open ("Get", Options.url, True);
We ' re going to wait for a request for 5 seconds, before giving up
var timeoutlength = 5000;
Keep track of when the request has been succesfully completed
var requestdone = false;
Initalize a callback which would fire 5 seconds from now, cancelling
The request (if it has not already occurred).
settimeout (function () {
Requestdone = true;
}, Timeoutlength);
Watch for while the state of the document gets updated
Xml.onreadystatechange = function () {
Wait until the ' data is fully loaded,
And make sure this request hasn ' t already timed out
if (xml.readystate = = 4 &&!requestdone) {
Check to = If the request was successful
if (httpsuccess (XML)) {
Execute the success callback with the data returned from the server
Options.onsuccess (Httpdata (XML, Options.type));
Otherwise, an error occurred, so execute the error callback
} else {
Options.onerror ();
}
Call the completion callback
Options.oncomplete ();
Clean up over ourselves, to avoid memory leaks
XML = NULL;
}
};
Establish the connection to the server
Xml.send ();
Determine the success of the HTTP response
function Httpsuccess (r) {
try {
If No server status is provided, and we ' re actually
Requesting a local file, then it is successful
return!r.status && Location.protocol = = "File:" | |
Any status in the good
(R.status >= && r.status < 300) | |
Successful if the document has not been modified
R.status = 304 | |
Safari returns a empty status if the file has not been modified
Navigator.userAgent.indexOf ("Safari") >= 0 && typeof r.status = = "undefined";
catch (e) {}
If checking the status failed, then assume that request failed too
return false;
}
Extract the correct data from the HTTP response
function Httpdata (r,type) {
Get the Content-type header
var ct = r.getresponseheader ("Content-type");
If no default type was provided, determine if some
form of XML is returned from the server
var data =!type && ct && ct.indexof ("xml") >= 0;
Get the XML Document object if XML is returned from
The server, otherwise return to the text contents returned by the server
data = Type = = "xml" | | Data? R.responsexml:r.responsetext;
If The specified type is "script", execute the returned text
Response as if it was JavaScript
if (type = = "Script")
Eval.call (window, data);
Return the response data (either an XML Document or a text string)
return data;
}
}

In the same directory, we can create a rss.xml file, and use this function to access it.
Rss.xml is as follows:
Copy Code code as follows:

<titles>
<title>
Fate
</title>
<title>
Moon
</title>
<title>
Fate of the Moon
</title>
</titles>

Then create an HTML document, call it, and you can see the contents of the Rss.xml can be accessed.
Overall look, in fact, is really more concise and simple. Not only can access to XML format files, html,.js format files can be called;
All of these can be done locally to create the corresponding file, make the call, can be implemented.
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.