Ajax封装库

<script type="text/javascript">

var AjaxUtil = {

    // 基础选项
    options : {
        method : "get", // 默认提交的方法,get post
        url : "", // 请求的路径 required
        params : {}, // 请求的参数
        type : ‘text‘, // 返回的内容的类型,text,xml,json
        callback : function() {
        }// 回调函数 required
    },

    // 创建XMLHttpRequest对象
    createRequest : function() {
        var xmlhttp;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
            } catch (e) {
                try {
                    xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                } catch (e) {
                    alert("您的浏览器不支持Ajax");
                }
            }
        }
        return xmlhttp;
    },
    // 设置基础选项
    setOptions : function(newOptions) {
        for ( var pro in newOptions) {
            this.options[pro] = newOptions[pro];
        }
    },
    // 格式化请求参数
    formateParameters : function() {
        var paramsArray = [];
        var params = this.options.params;
        for ( var pro in params) {
            var paramValue = params[pro];
            /*if(this.options.method.toUpperCase() === "GET")
            {
                paramValue = encodeURIComponent(params[pro]);
            }*/
            paramsArray.push(pro + "=" + paramValue);
        }
        return paramsArray.join("&");
        // method=get&url=&callback=&type=text
    },

    // 状态改变的处理
    readystatechange : function(xmlhttp) {
        // 获取返回值
        var returnValue;
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            switch (this.options.type) {
            case "xml":
                returnValue = xmlhttp.responseXML;
                break;
            case "json":
                var jsonText = xmlhttp.responseText;
                if(jsonText){
                    returnValue = eval("(" + jsonText + ")");
                }
                break;
            default:
                returnValue = xmlhttp.responseText;
                break;
            }
            if (returnValue) {
                this.options.callback.call(this, returnValue);
            } else {
                this.options.callback.call(this);
            }
        }
    },

    // 发送Ajax请求
    //{‘method‘:‘get‘}
    request : function(options) {
        var ajaxObj = this;

        // 设置参数
        ajaxObj.setOptions.call(ajaxObj, options);

        // 创建XMLHttpRequest对象
        var xmlhttp = ajaxObj.createRequest.call(ajaxObj);

        // 设置回调函数
        xmlhttp.onreadystatechange = function() {
            ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
        };

        // 格式化参数
        var formateParams = ajaxObj.formateParameters.call(ajaxObj);

        // 请求的方式
        var method = ajaxObj.options.method;
        var url = ajaxObj.options.url;

        if ("GET" === method.toUpperCase()) {
            url += "?" + formateParams;
        }

        // 建立连接
        xmlhttp.open(method, url, true);

        if ("GET" === method.toUpperCase()) {
            xmlhttp.send(null);
        } else if ("POST" === method.toUpperCase()) {
            // 如果是POST提交,设置请求头信息
            xmlhttp.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
            xmlhttp.send(formateParams);
        }
    }
};

    function $(id) {
        return document.getElementById(id);
    }
    function process(json){
            if(json){
                $("id").value = json.id;
                $("username").value = json.username;
                $("age").value  = json.age;
            }
            else{
                $("msg").value = "用户不存在";
                $("id").value = "";
                $("username").value = "";
                $("age").value = "";
            }
    }

function findUser() {
        var userid = $("userid").value;
        if (userid) {
            AjaxUtil.request({
                url:"ajax-07.txt",
                params:{id:userid},
                type:‘json‘,
                callback:process
            });
        }
    }

</script>
时间: 2024-11-09 04:42:55

Ajax封装库的相关文章

第一百六十一节,封装库--JavaScript,完整封装库文件

封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的this,this,就是当前对象本身 * * 传入的字符串,代表获取元素选择器 * 参数是元素选择器(id值.class值.标签名称)其中一样的字符串

Ajax封装及简单应用

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 可将AJAX封装成库,方便调用,大致分四步: 创建Ajax对象 连接服务器 发送请求 接受返回值 具体代码如下: function ajax(url,fnSucc,fnFaild){ // 创建Ajax对象 if(wind

第一百四十节,JavaScript,封装库--浏览器检测

JavaScript,封装库--浏览器检测 在函数库编写一个,浏览器检测对象 /** sys浏览器检测对象,对象下有两个属性,liu_lan_qi属性和xi_tong属性 * liu_lan_qi属性,检测浏览器名称和版本号,如:alert(sys.liu_lan_qi); * xi_tong属性,检测浏览器运行环境,如:alert(sys.xi_tong); **/ (function () { //闭包,自我执行 window.sys = {}; //全局变量对象,保存浏览器信息 var u

第一百三十一节,JavaScript,封装库--CSS

JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀2 she_zhi_link_css()方法,设置link连接.或style内嵌.中的CSS样式3 yi_chu_link_css()方法,移除link连接.或style内嵌.中的CSS样式4

jQuery Ajax封装通用类 (linjq)

jQuery Ajax封装通用类 (linjq) $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1} * async 默认值: true.默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false. * 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. * t

js封装库1

创建库,分别创建了三个文件,demo.html   demo.js  base.js demo.html:连接引用外部两个JS文件 demo.js:是用来写一些调用封装库的操作的一些JS代码 base.js:这个就是封装库的JS文件了.里面会写上一些封装好的效果,用于提供给demo.js进行调用 JS中常用的通过几个方式获取页面上的元素对象数据 通过元素设置的ID获取 通过元素设置的name获取 通过元素的标签获取 JS中捕获了元素对象后我们通常会做的常规事情 捕获后,更改元素对象的CSS样式

第一百三十九节,JavaScript,封装库--CSS选择器

JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的

第一百三十五节,JavaScript,封装库--拖拽

JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th

【原创】Capture CIS利用Access数据库建立封装库说明

1.在服务器端建立新空间,方便封装库以及数据库的归档存放 服务器路径:\\192.168.1.234\Share\STG_LIB,文件夹内容如下,其中Datesheet存放物料数据手册,Pcb_Lib存放Allegro封装,Schematic_Lib存放Capture封装,STG_Datebase存放数据库文件. 2.构建Access数据库 1)打开Access软件,执行新建命令,弹出如下窗口.在右下角选择存放路径并设置文件名称,点击创建.(2007以上版本文件后缀为"accdb",2