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

(0)

相关推荐

  • 简单谈谈AJAX核心对象

    Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术.这项新技术能够极大地改善网站的用户体验. 什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写. Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求.Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,共同的协作中发挥各自的作用. Ajax的优点 1.减轻服务器的负担.Ajax的原则是"按需取数据"

  • Ajax核心技术代码分享

    复制代码 代码如下: <script>    var xhr = '';    function Ajax()    {        if(window.XMLHttpRequest)        {                var xhr = new XMLHttpRequest;//现代浏览器        }else        {                var xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE    

  • jquery ajax方式直接提交整个表单核心代码

    复制代码 代码如下: $.ajax({ type: "POST", url: url, <SPAN style="COLOR: #ff0000">data: $('#form1').serialize(),</SPAN> success: function(msg){ alert( "Data Saved: " + msg ); } });

  • Ajax核心XMLHttpRequest总结

    Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换:JavaScript操作DOM实现动态效果:运用XHTML+CSS表达信息:XML和XSLT操作数据.此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换.     使用方法      XMLHttpRequest五步使用法: 复制代码 代码如下: 1.创

  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHT

  • Javascript级联下拉菜单以及AJAX数据验证核心代码

    虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了<JavaScript高级程序设计>里的方法.使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源. 一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次. 需求: 1.根据下拉菜单产品名称.产品包装的选择,右面的图片要进行相应的变化.

  • Ajax核心XMLHTTP组件资料第1/2页

    一.数据库远程管理技术  基于互联网的广域网现代应用中的一个重要环节是数据库远程监控.首先简单回顾一下互联网上的数据库远程管理技术的发展过程和方式: (推荐文章:AJAX专题) 早期通过编写CGI-BIN程序模块进行数据库远程管理.但CGI-BIN的运行速度慢,维护很不方便,现在已经基本被弃用. 这几年使用组件对象模型(Component Object Model, COM)的应用非常多,效果也很好.但如果使用的是第三方服务器(笔者的网站就是建立在第三方的虚拟主机上),服务器方往往因为保密或其它

  • 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, b

  • AJAX技术框架及开发工具

    常见的AJAX框架有: DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI component qooxdoo - JS UI component (C/S Style) YUL - JS UI component 其中关于DW

  • jQuery Ajax Post 回调函数不执行问题的解决方法

    今天在写一个检查用户名的功能时,使用的是jQuery.post( url, [data], [callback], [type] )这个函数,但是发现其中的回调函数不能执行. 先来看看我的代码: 前台代码: <script type="text/javascript"> function checkUser() { var user = $('#<%=txtUser.ClientID %>').val(); $.post('checkUser.ashx', {

  • 发布三个ajax相关的函数,包括无刷新提交表单等

    几个月前,因为项目需求,我写了下面的三个ajax相关的函数.发布出来和大家分享.第一个是用来无刷新加载一段HTML第二个是把表单数据转换成一串请求字符串第三个是结合函数一和函数二的无刷新提交表单实现. 还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置.目前无刷新的上传,一般是用iframe来实现的.关于这个,我们在google里搜索能找到很多. 网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了.可以

  • js调用父框架函数与弹窗调用父页面函数的简单方法

    调用父级中的 aaa的函数 子页面中: onclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert('bbbbb'); } frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面. window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面. 可以这样 window.frames[0]

  • 原生JS写Ajax的请求函数功能

    一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单. 但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件. 我们可以简单实现一个自己的 Ajax 请求功能,具体的代码如下: var ajax = {}; ajax.x = function () { if (typeof XMLHttpRequest !== 'undefined') { return new XM

  • 关于Python核心框架tornado的异步协程的2种方法详解

    什么是异步? 含义 :双方不需要共同的时钟,也就是接收方不知道发送方什么时候发送,所以在发送的信息中就要有提示接收方开始接收的信息,如开始位,同时在结束时有停止位 现象:没有共同的时钟,不考虑顺序来了就处理 直观感受:就是不用等了,效率高 同步 含义:指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系 现象:有一个共同的时钟,按来的顺序一个一个处理 直观感受 :就是需要等候,效率低下 那么今天我们看怎么用2种方法用代码实现tornado的异步? 这些是导入的包: 2种方法用代码实现to

  • Yii框架函数简单用法分析

    本文实例讲述了Yii框架函数简单用法.分享给大家供大家参考,具体如下: 1.redict return $this->redirect(['login']); redict其实是对于以下的封装  等同于 $response=Yii::app->response(); $response->headers->add('location','www.baidu.com'); 2.save 第一个参数是执行验证,第二个参数是指的那个字段(空的话 就保存全部) 如果是一个两个的话  必须知

  • Ajax获取回调函数无法赋值给全局变量的问题

    比如我在别的方法想使用getTree执行后的到的值 var data=getTree( ); 然后我发现怎么赋值都是没有数据 通过调试发现总是先弹出data1再弹出回调函数里面的data 因为它还没等ajax执行完就已经继续执行下面的代码 解决方法 1.在回调函数里面进行数据操作 2.将异步改成同步 总结 以上所述是小编给大家介绍的Ajax获取回调函数无法赋值给全局变量的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

随机推荐