Ajax 核心框架函数及例子

2016-02-19 11:00 3 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐Ajax 核心框架函数及例子,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

核心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格式的文件都可以调用的;
这些都可以在本地建立对应的文件,进行调用,都可以实现。

来源:https://www.tulaoshi.com/n/20160219/1596312.html

延伸阅读
  ZK 开发小组宣布发布ZK 2.2 版本。ZK 是一个基于XUL嵌入AJAX事件驱动的Java 框架,用于丰富用户网络应用程序界面。  ZK 开发小组宣布发布ZK 2.2 版本。 ZK 是一个基于XUL嵌入AJAX事件驱动的Java 框架,用于丰富用户网络应用程序界面。 ZK包括一个基于AJAX可...
标签: Web开发
代码如下: //ajax测试 var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } function a(){ createXMLHttpRequest() url="${request.contextPath}/test/forMain.action"; alert(url...
标签: Web开发
实用函数 许多 JavaScript框架 都带有大量的实用函数,这些函数使得应用JavaScript开发应用程序更加容易。这篇文章有太多内容需要补充,所以我将讨论大多数框架中更为引人注目的函数中的一个。 如果你曾经使用过 JavaScript 数组,你可能对使用循环来迭代数组操作其值非常熟悉。例如,想想清单2的代码: 清单2:迭代JavaScript数组的...
标签: Web开发
经过仔细研究和分析,终于让AJAX的模拟浏览器功能达到一个新的高峰. 下面将给我源代码,希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重. 记得有篇文章数落AJAX的"七宗罪"中说到,AJAX在浏览页面的时候不能使用链接收藏,也就是浏览器的标签功能,更不更使用浏览器的后退.然后也有篇文章翻译了一个老外的AJAX...
标签: Web开发
代码如下: /* 调用方式: 1.POST方式 var txt = escape(sender.value); //document.getElementById("%= txtName.ClientID %").value); var data = "name=" + txt + "&pwd=" + txt; var option = { "url": "handler/Handler.ashx" , "action": "POST" , "callback": function(){ if (xmlHttp.readyState == 4) {//服务器给了回应 if (x...

经验教程

940

收藏

65
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部