当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > Ajax 核心框架函数及例子

AJAX技术
一个简单的ASP+AJAX留言本源码下载
IE7下ajax之open Method New的说明
ASP+Ajax实现无刷新评论简单例子
AJAX的阻塞及跨域名解析
[js]一个获取页面ip的正则
AJAX乱码解决新方法
也写一个Ajax.Request类附代码
AJAX简历系统附js文件
Ajax留言本源码 提供下载了
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了
Ajax 学习资源 中外都有
本人ajax留言板的源程序 不错的应用js
xmlhttp 乱码 比较完整的解决方法 (UTF8,GB2312 编码 解码)
AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
AJAX缓存问题的两种解决方法(IE)
AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器
Ajax的小贴士使用小结
用ajax动态加载需要的js文件
XMLHTTP多浏览器兼容性写法
PJBLOG中用到的ajaxjs.几个简单的函数

AJAX技术 中的 Ajax 核心框架函数及例子


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 85 ::
收藏到网摘: n/a

最近学习js,肯定会学到ajax中的东西,所以,看到比较好的ajax函数,免不得要贴出来,供大家参考。这个函数摘录自john resig的书中。 核心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格式的文件都可以调用的;
这些都可以在本地建立对应的文件,进行调用,都可以实现。