可以将下面的代码保存在一个文件里如:myAjax.js,以后在项目中如果觉得jquery那一套很重,就完全可以使用自己的ajax库,不用担心性能和兼容性!

/**
 * 创建ajax请求对象
 * @returns XMLHTTPREQUEST
 */
function createAjaxObj(){
    var req ;
    if(window.XMLHttpRequest){
        req=new XMLHttpRequest();
    }else{
        req=new ActiveXObject("Msxml2.XMLHTTP");
    }
    return req;
}

/**
 * 发送 ajax 请求
 * @param method  get/post
 * @param url     请求路径
 * @param params  参数列表  格式a=?&&b=?
 * @param async   true 异步 false 同步
 * @param handle200  处理成功的函数
 * @param loading    处理加载中的函数
 * @param handle404  处理找不到地址的函数
 * @param handle500  处理服务器内部出错的函数
 */
function sendAjaxReq(method,url,params,async,handle200,loading,handle404,handle500){
    var req = createAjaxObj();
    req.onreadystatechange = function(){
        if(4==req.readyState){
            if(200==req.status){
                if(handle200){
                    handle200(req.responseText);
                }
            }else if(404==req.status){
                if(handle404){
                    handle404();
                }
            }else if(500==req.status){
                if(handle500){
                    handle500();
                }
            }
        }else{
            if(loading){
                loading();
            }
        }
    };
    if("get"==method.toLowerCase()){
        req.open(method,url+(params==null?"":"?"+params),async);
        req.send(null);
    }else if("post" ==method.toLowerCase()){
        req.open(method,url,async);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(params);
    }
}

/** For Example
// 使用自己的ajax 类库发送 请求    
        sendAjaxReq("post",
            "${base}/brandAjax/checkBrandId.do",
            "brandId="+brandId,true,
            function(req){
                eval(" var data="+ req.responseText);
                if(data.message==true){
                        alert("品牌ID:"+brandId+"已存在,不可重复添加!");
                        $("#hidBrandId")[0].innerHTML=""; 
                        $("#brandName").val("");                                
                    }else{
                        submitFlag=1;
                        $("#selBrand")[0].style.display = "none";                          
                    }
            });
*/

摆脱jquery,用自己的JS库实现ajax功能的更多相关文章

  1. 编写自己的javascript功能库之Ajax(仿jquery方式)

    本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已. 下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧.. js代码实例(tool.ajax.js) ...

  2. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  3. 解决jQuery多个版本,与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  4. jQuery与其他JS库共存

    * 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...

  5. 仿照jquery封装一个自己的js库(二)

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  6. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  7. jQuery与其他JS库冲突解决

    实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...

  8. 怎样让jQuery和其它js库共存

    怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于 ...

  9. jQuery与其它js库共用

    <script src="js/zepto.min.js"></script>//其它js库<script src="http://comm ...

随机推荐

  1. [Asp.net 5] Options-配置文件之后的配置

    今天要讲的是OptionsModel解决方案,整个解决方案中也只有Microsoft.Framework.OptionsModel一个工程.按照表面文字OptionsModel应该翻译成选项模型,但是 ...

  2. 【Win10开发】Toast通知

    Toast 通知是一种发送给用户的暂时消息,包含相关的.具有时效性的信息,并且提供对应用中相关内容的快速访问.它可显示你是在另一个应用中.在“开始”屏幕上.在锁屏上,还是在桌面上.Toast 应该被视 ...

  3. Unity3D 5.x 简单实例 - 脚本编写

    1,Vector3 类型变量存储向量坐标值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3 ...

  4. Lind.DDD.Repositories.Redis层介绍

    回到目录 之前已经发生了 大叔之前介绍过关于redis的文章,有缓存,队列,分布式pub/sub,数据集缓存以及仓储redis的实现等等,而今天在Lind.DDD的持久化组件里,redis当然也有一席 ...

  5. 利用SCORE法则来总结一次偷懒的单元测试过程

    最近遇到一个单元测试的问题,本周正好学个了一个SCORE法则,这里正好练练手应用此法则将问题的前因后果分享给大家. S:背景  代码要有单元测试,检测的标准就是统计代码的单元测试覆盖率,程序员需要达到 ...

  6. JavaWeb之CSS详解

    CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...

  7. javascript封装与多态的体现

    封装是实现面向对象程序设计的第一步,封装就是将数据与函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 在传统的面向对象语言中有访问修饰符,如Private:只有类本身能 ...

  8. CSS实现弹出导航菜单

    查看实际效果:http://keleyi.com/a/bjac/vksd7321.htm 完整代码,保存在html文件打开也可看到效果: <!DOCTYPE html PUBLIC " ...

  9. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  10. IE9 IE8 ajax跨域问题的解决

    项目中用到的跨域 ,在除IE9以下的浏览器上运行都是没有问题的,IE8 IE9中报错,error :no transport; 网上解决办法均是 在发起请求之前添加 jQuery.support.co ...