javascript之AJAX框架使用说明

ajax编码落地算是团队框架建设的一个里程碑，使得框架拥有了一个可应用调试的版本。在ajax框架编码中主要想到了这么几点:

  • 框架兼容性
  • 方法全面而要简单快捷
  • 可扩展性好

框架兼容性:ajax框架的兼容性主要表现在XMLHttpRquest对象生成上。根据不同类型浏览器或者不同库一般有三种方式

  • new XMLHttpRequest()；
  • new ActiveXObject("Microsoft.XMLHTTP")；
  • new ActiveXObject("Msxml2.XMLHTTP")；

方法简单快捷且扩展性好

  • 框架编写如ajax.get()、ajax.json()、ajax.post等这样类似jquery的比较全面的方法，快捷方便
  • 框架使用一个核心方法为接口、各种方法都通过统一接口进行异步请求，后续需要扩展方法只需要组织自己的数据格式，然后调用核心方法即可。

方法

  • ajax.get(url,success,error)
















    参数： url 请求的url地址 必选
    参数： success 请求成功的回调函数 可选
    参数： error 请求失败的回调函数 可选

  • ajax.json(url,success,error)//采用官方json解析方法解析，更安全
















    参数： url 请求的url地址 必选
    参数： success 请求成功的回调函数 可选
    参数： error 请求失败的回调函数 可选

  • ajax.xml(url,success,error)//暂不支持
















    参数： url 请求的url地址 必选
    参数： success 请求成功的回调函数 可选
    参数： error 请求失败的回调函数 可选

  • ajax.post(url,params,success,error)





















    参数： url 请求的url地址 必选
    参数： params 需要post的参数 可选（默认null）
    参数： success 请求成功的回调函数 可选
    参数： error 请求失败的回调函数 可选

  • ajax.request( { url:url, params:params, type:type, format:format, success:success, error:error } )































    参数： url 请求的url地址 必选
    参数： params 需要post的参数 可选
    参数： success 请求成功的回调函数 可选
    参数： error 请求失败的回调函数 可选
    参数： type 请求类型（POST/GET） 可选（默认GET）
    参数： format 返回数据类型（json/xml/text） 可选（默认text）

范例
引入


代码如下:

<script type="text/javascript" src="ajax_min.js" ></script>

请求


代码如下:

<script type="text/javascript">
//定义回调函数
var callBack = function(text)
{
alert(text);
}
//发送请求
ajax.get("test.php",callBack);
</script>

下载ajax_min.js
来自:cnblogs 唯C—Sky

赞 (0)

相关推荐

  • jQuery-1.9.1源码分析系列（十）事件系统之事件包装

    jQuery-1.9.1源码分析系列（十）事件系统之事件包装

    在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧. 首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作.举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象. 在委托处理中,a节点委托b节点在a被click的时候执行fn函数.当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点.如何保证执行fn的上下文环境是a节点

  • AJAX 验证框架13个

    一 ASP.NET AJAX Framework 1.ValidatorCallout 是ASP.NET AJAX Control Toolkit中的一员,老瓶装新酒,通过扩展的方式为ASP.NET的验证控件提供漂亮的弹出提示效果.缺点是:目前的版本还不能提供服务端Custom Validator的扩展. 同时,ValidatorCallout还支持自定义CSS样式,具体可参考官方页面上的"ValidatorCallout Theming" 一节,和这篇文章:http://www.im

  • jQuery 1.9.1源码分析系列（十）事件系统之绑定事件

    事件绑定的方法有很多种,使用了jquery那么原理那种绑定方式(elem.click = function(){...}))就不太想推荐给大家了.最主要的原因是elem.click=fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果. 下面给大家介绍jquery绑定事件的方式有哪些吧. 复制代码 代码如下: jQuery.fn.eventType([[data,] fn]) 比如eventType指的是事件类型,比如click: $("#chua").click(f

  • jQuery 1.9.1源码分析系列（十四）之常用jQuery工具

    为了给下一章分析动画处理做准备,先来看一下一些工具.其中队列工具在动画处理中被经常使用. jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置.如果需要移除并执行队列中的第一个函数,请使用dequeue()函

  • jQuery1.9.1源码分析系列（十六）ajax之ajax框架

    AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript / DOM 如果您希望首先学习这些项目,请在我们的首页访问这些教程. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重

  • 简单的前端js+ajax 购物车框架(入门篇)

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • 零基础学习AJAX之AJAX框架

    上文(零基础学习AJAX之AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们的过程封装成ajax框架. 本节主要介绍ajaxLib和ajaxGold两款框架. 1.ajaxLib ajaxLib是一个非常小巧的ajax框架. 使用它首先将文件使用引入到页面中.改框架是一个直接获取XML的框架,调运函数如下: loadXMLDoc(url,callback,boolea

  • Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready

    还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){-}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 所以$(fn)===$(document).ready(fn). 来看一下jQuery.fn.ready的源码 ready: function( fn ) { // Add t

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • jquery 框架使用教程 AJAX篇

    小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu

  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi

  • jQuery1.9.1针对checkbox的调整方法(prop)

    在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 复制代码 代码如下: $('#checkbox').prop('checked') 设置选中与不选中状态: 复制代码 代码如下: $('#checkbox').attr('checked',true)$('#checkbox').attr('checked',false) 但此方法在jquery1.9.1中,有些处理不一样 IE10,Chrome,FF中,对于选中状态,第一次$('#checkbo

  • jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构

    又是一个重磅功能点. 在分析源码之前分析一下体系结构,有助于源码理解.实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了:而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定. a. jQuery事件原型--Dean Edwards的跨浏览器AddEvent()设计 源码解读 //事件添加方法 function addEvent(element, type, handler) { //

  • Jquery AJAX 框架的使用方法

    刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写

  • jQuery 1.9.1源码分析系列（十三）之位置大小操作

    jQuery 1.9.1源码分析系列（十三）之位置大小操作

    先给大家展示谢 jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值.如果需要删除指定的css属性,请使用该函数将其值设为空字符串("") 注意:1.如果省略了value参数,则表示获取属性值:如果指定了该参数,则表示设置属性值.2.css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素:所有"读取"操作只针对

  • Jquery-1.9.1源码分析系列（十一）之DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAll.其核心处理函数是domManip. DOM操作函数中后五种方法使用的依然是前面五种方法,源码 jQuery.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before&quo

随机推荐