Ajax 核心框架函数及例子

核心ajax（options）函数中，包含了建立xmlhttprequest,提取数据，判断是否回复成功等，基本满足了日常需求。

// a generic function for performming ajax requests
// it takes one argument, which is an object that 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 will 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 was returned from the
// 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 will fire 5 seconds from now, cancelling
// the request (if it has not already occurred).
settimeout(function(){
requestdone = true;
}, timeoutlength);
// watch for when the state of the document gets updated
xml.onreadystatechange = function(){
// wait until the data is fully loaded,
// and make sure that the request hasn't already timed out
if ( xml.readystate == 4 && !requestdone ) {
// check to see 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 after 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 was successful
return !r.status && location.protocol == "file:" ||
// any status in the 200 range is good
( r.status >= 200 && r.status < 300 ) ||
// successful if the document has not been modified
r.status == 304 ||
// safari returns an 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 the 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 was returned from the server
var data = !type && ct && ct.indexof("xml") >= 0;
// get the xml document object if xml was returned from
// the server, otherwise return 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;
}
}

在同等目录中，我们可以建立一个rss.xml文件，用这个函数来访问。
rss.xml如下：

<titles>
<title>
缘份
</title>
<title>
月亮
</title>
<title>
缘份月亮
</title>
</titles>

再建立一个html文档，调用它，就能看到rss.xml中的内容就能被访问到。
整体看看，其实真的比较简洁和简单。不仅是能访问xml格式文件，html，.js格式的文件都可以调用的；
这些都可以在本地建立对应的文件，进行调用，都可以实现。