博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js原生Ajax的封装与使用
阅读量:4605 次
发布时间:2019-06-09

本文共 3077 字,大约阅读时间需要 10 分钟。

一、原生Ajax代码的封装如下:

(function() {    var XHR = {        createStandardXHR: function() {            return new XMLHttpRequest();        },        createIEXHR: function () {            return new ActiveXObject("Microsoft.XMLHTTP");        },        createErrorXHR: function () {            alert("Your browser does not support XMLHTTP.");            return null;        },        createXHR: function() { //创建XMLHttpRequest对象            var xhr = null;            if (window.XMLHttpRequest) {                this.createXHR = this.createStandardXHR; // Firefox, Opera 8.0+,Safari,IE7+            } else {                this.createXHR = this.createIEXHR; // IE5、IE6            }            try {                xhr = this.createXHR();            } catch (e) {                this.createXHR = this.createErrorXHR;                xhr = this.createXHR();            }            return xhr;        },        ajax: function(opts) {            var xhr = this.createXHR(),                ajaxMethod = (opts.type || "GET").toUpperCase(),                isPost = ajaxMethod == "POST",                data = this.param(opts.data),                url = this.buildUrlParam(opts.url, data, isPost);            xhr.open(ajaxMethod, url, opts.async == undefined ? true : opts.async);            if (isPost) {                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            }            if (opts.contentType) {                xhr.setRequestHeader("Content-type", opts.contentType);            }            var stateChange = this.xhrStateChange;            xhr.onreadystatechange = function() {                stateChange(xhr, opts.success, opts.error);            }            xhr.send(isPost ? data : null);        },        buildUrlParam: function(url,data,isPost) {            if (data && !isPost) {                if (url.indexOf("?") < 0) {                    url += "?" + data;                } else {                    url += "&" + data;                }            }            return url;        },        param: function(data) {            if (!data) {                return null;            }            if (typeof data !== "object") {                return data;            }            var postData = [];            for (var key in data) {                postData.push(key+"="+data[key]);            }            return postData.join("&");        },        xhrStateChange: function(xhr, successFn, failFn) {            if (xhr.readyState == 4) { // 4 = "loaded"                if (xhr.status == 200) { // 200 = OK                    successFn(xhr.responseText);                } else {                    failFn.call(xhr, xhr.statusText, xhr.status);                }            } else {                failFn.call(xhr, xhr.statusText, xhr.status);            }        }    };    window.ajax = function(opts) {        XHR.ajax.call(XHR, opts);    };})();

二、方法如下:

    
ajax demo02
员工编号:
员工姓名:

三、

转载于:https://www.cnblogs.com/junjieok/p/4538580.html

你可能感兴趣的文章
acdream B - 郭式树 (水题 卡cin,cout, 卡LL)
查看>>
BMP图像格式
查看>>
python的匿名函数lambda解释及用法
查看>>
c#遍历Dictionary使用KeyValuePair
查看>>
defineProperties属性的运用==数据绑定
查看>>
关于 IOS 发布的点点滴滴记录(一)
查看>>
《EMCAScript6入门》读书笔记——14.Promise对象
查看>>
CSS——水平/垂直居中
查看>>
Eclipse连接mysql数据库jdbc下载(图文)
查看>>
快速入门
查看>>
Mybatis通过ID查询 && 通过name模糊查询
查看>>
【Vjudge】P1989Subpalindromes(线段树)
查看>>
ExtJs之Ext.util.TaskRunner
查看>>
Solved problems updating perl-XML-SAX-0.96-7.el6.noarch on CentOS 6
查看>>
redis为什么快
查看>>
【树状数组(二叉索引树)】轻院热身—candy、NYOJ-116士兵杀敌(二)
查看>>
116830
查看>>
c#,将pdf文件转换成图片文件。
查看>>
美国 100 名以后的大学还有去读研究生的必要吗?[无聊的时候看看]
查看>>
吴昊品游戏核心算法 Round 12(特别篇) —— 吴昊教你玩筷子游戏(计算几何)
查看>>