JavaScript封装Ajax（类JQuery中$.ajax()方法）

时间：2021-12-06 09:56:28

ajax.js

(function(exports, document, undefined){

    "use strict";

    function Ajax(){

        if(!(this instanceof Ajax)) return;

        return this;

    }

    Ajax.prototype = {

        init: function(opts){

            opts = opts || {};

            this.opts = opts;

            this.opts.type = opts.type || 'get';

            this.opts.url = opts.url || '';

            this.opts.data = opts.data || '';

            this.opts.dataType = opts.dataType || 'text';

            this.opts.async = opts.async || true;

            this.opts.success = opts.success || null;

            this.opts.error = opts.error || null;

            this.xhr = this.createXMLHttpRequest.call(this);

            this.initEvent.call(this);

            return this;

        },

        ajax: function(opts){

            this.init.apply(this, arguments);

            this.open.call(this);

            this.send.call(this);

        },

        createXMLHttpRequest: function(){

            var xhr;

            try{

                xhr = new XMLHttpRequest();

            }catch(e){

                console.log(e);

            }

            return xhr;

        },

        initEvent: function(){

            var _this = this;

            this.xhr.onreadystatechange = function(){

                if(_this.xhr.readyState == 4 && _this.xhr.status == 200){

                    if(_this.xhr.status == 200){

                        if(_this.opts.dataType === 'text' || _this.opts.dataType === 'TEXT'){

                            _this.opts.success && _this.opts.success(_this.xhr.responseText, 'success', _this.xhr);

                        }else if(_this.opts.dataType === 'xml' || _this.opts.dataType === 'XML'){

                            _this.opts.success && _this.opts.success(_this.xhr.responseXML, 'success', _this.xhr);

                        }else if(_this.opts.dataType === 'json' || _this.opts.dataType === 'JSON'){

                            _this.opts.success && _this.opts.success(JSON.parse(_this.xhr.responseText), 'success', _this.xhr);

                        }

                    }else if(_this.xhr.status != 200){

                        _this.opts.error && _this.opts.error(_this.xhr, 'error');

                    }

                }

            }

        },

        open: function(){

            if(this.opts.type === 'GET' || this.opts.type === 'get'){

                var str = (typeof this.opts.data === 'string') && this.opts.data || this.objectToString.call(this, this.opts.data),

                    url = (str === '') && this.opts.url || (this.opts.url.split('?')[0] + '?' + str);

                this.xhr.open(this.opts.type, url, this.opts.async);

            }else if(this.opts.type === 'POST' || this.opts.type === 'post'){

                this.xhr.open(this.opts.type, this.opts.url.split('?')[0], this.opts.async);

            }

            return this;

        },

        send: function(){

            if(this.opts.type === 'GET' || this.opts.type === 'get'){

                this.xhr.send();

            }else if(this.opts.type === 'POST' || this.opts.type === 'post'){

                var str = (typeof this.opts.data === 'string') && this.opts.data || this.objectToString.call(this, this.opts.data);

                this.xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

                this.xhr.send(str);

            }

        },

        objectToString: function(data){

            if(typeof data !== 'object') return data;

            var str = '';

            for(var prop in data){

                str += '&' + prop + '=' + data[prop];

            }

            return str.slice(1);

        }

    }

    exports.Ajax = Ajax;

})(window, document);

ajax.php

<?php

$c = $_REQUEST['c'];

$arr = array(

    'a'=>2014,

    'b'=>array('c'=>$c)

);

echo json_encode($arr);

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax</title>

</head>

<body>

    <script src="ajax.js"></script>

    <script>

        new Ajax().ajax({

            type: 'get',

            url: 'ajax.php?c=123',      // 如果是get方式并且url包含参数，其参数会被data替代

            // data: 'c=456',           // data参数格式可以为字符串或对象

            // data: {c: 456},

            dataType: 'json',

            async: false,

            success: function(data, status, xhr){

                console.log(data);

            },

            error: function(xhr, status){

                console.log(xhr);

            }

        });

        new Ajax().ajax({

            type: 'post',

            url: 'ajax.php?c=123',      // 如果是get方式并且url包含参数，其参数会被data替代

            data: 'c=456',              // data参数格式可以为字符串或对象

            // data: {c: 456},

            dataType: 'text',

            success: function(data, status, xhr){

                console.log(data);

            },

            error: function(xhr, status){

                console.log(xhr);

            }

        });

    </script>

</body>

</html>

JavaScript封装Ajax（类JQuery中$.ajax()方法）的更多相关文章

  1. 封装一个类似jquery的ajax方法

    //封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...

  2. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  3. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  4. CSIC&lowbar;716&lowbar;20191127【组合，封装、类的私有属性方法、property装饰器】

    组合 what?   组合是指一个对象中,包含另一个或多个对象. why?      减少代码的冗余. How?     在类中加入其他类的对象,实现跨类对象之间的联动. 耦合度  软件设计要 高内聚 ...

  5. 通过原生js的ajax或jquery的ajax获取服务器的时间

    在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...

  6. AJAX初识&lpar;原生JS版AJAX和Jquery版AJAX&rpar;

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  7. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. javascript &colon; 写一个类似于 jquery css&lpar;&rpar; 的方法

    我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...

  9. JavaScript封装成类

    JavaScript在WEB编程中能起到很大的作用,将一些常用的功能写成JavaScript类库. 将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2. ...

随机推荐

  1. python 学习笔记 -logging模块（日志）

    模块级函数 logging.getLogger([name]):返回一个logger对象,如果没有指定名字将返回root loggerlogging.debug().logging.info().lo ...

  2. 如何在mac本上安装android sdk 避免被墙

    众所周知的原因,google的很多网站在国内无法访问,苦逼了一堆天朝程序员,下是在mac本上折腾android 开发环境的过程: 一.先下载android sdk for mac 给二个靠谱的网址: ...

  3. js常用关键字和函数

    document.createElement("div"): 创建一个div元素申明一个变量 document.body.appendChild(div);   将创建好的div添 ...

  4. C&plus;&plus;引用的作用和用法

    引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符&引用名=目标变量名: 例如: int q; int &ra=a; 说明: &am ...

  5. animation js控制 缓动效果

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动 ...

  6. 点击每个li节点，都弹出其文本值及修改

    点击每个li节点,都弹出其文本值 1,获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2,使用for循环进行遍 ...

  7. Yorhom浅谈：作为一名初中生，自学编程的点点滴滴 - Yorhom&&num;39&semi;s Game Box

    Yorhom浅谈:作为一名初中生,自学编程的点点滴滴 我是一名不折不扣的初中生,白天要背着书包去上学,晚上要拿起笔写作业.天天如此,年年如此. 我的爱好很广泛,喜欢了解历史,读侦探小说,骑车,打篮球, ...

  8. 不借助第三方jar包实现文件上传

    假设实现文件上传难道非要借助第三方jar包(最经常使用的莫过于apache的commons-fileupload工具包)来实现吗?答案是否定的.以下通过样例演示在不借助第三方jar包的前提下怎样实现文 ...

  9. java错题集

    解析:java中,JavaDoc注释以 /** 开头(中间写内容)以*/结尾 解析:A对象是类的实例,不是集合,其余正确 解析:创建一个对象的语法为: 类名 对象名=new 类名();,因此正确答案为 ...

  10. Ajax - Apache安装配置

    apache安装配置 1.安装wamp2.配置根路径3.默认的网站根路径是安装目录的www子目录,如果不想使用默认目录,可以自己配置.配置方式如下: --找到文件wamp\bin\apache\Apa ...

相关文章