function ajax(obj){
            // 默认参数
            var defaults = {
                type : 'get',
                data : {},
                url : '#',
                dataType : 'text',
                async : true,
                success : function(data){console.log(data)}
            }
            // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数
            for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新
                defaults[key] = obj[key];
            }
            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本
            }
            // 把对象形式的参数转化为字符串形式的参数
            /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */
            var param = '';
            for(var attr in obj.data){
                param += attr + '=' + obj.data[attr] + '&';
            }
            if(param){//substring(start, end)截取字符串去掉最后的&符号
                param = param.substring(0,param.length - 1);
            }
            // 处理get请求参数并且处理中文乱码问题
            if(defaults.type == 'get'){
                defaults.url += '?' + encodeURI(param);
            }
            // 2、准备发送(设置发送的参数)
            xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息(必须设置)
            var data = null;
            if(defaults.type == 'post'){
                data = param;
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //post模式下必须加的请求头,这个请求头是告诉服务器怎么去解析请求的正文部分。
            }
            // 3、执行发送动作
            xhr.send(data);
            // 处理同步请求,不会调用回调函数
            if(!defaults.async){
                if(defaults.dataType == 'json'){
                    return JSON.parse(xhr.responseText);
                }else{
                    return xhr.responseText;
                }
            }
            // 4、指定回调函数(处理服务器响应数据)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //4 获取数据成功
                if(xhr.status == 200){
                    //200 获取的数据格式正确
                    var data = xhr.responseText;
                    if(defaults.dataType == 'json'){
                        // data = eval("("+ data +")");
                        data = JSON.parse(data);
                        //JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用
                        }
                        defaults.success(data);//回调函数
                    }
                }
            }
        }

js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装的更多相关文章

  1. jQuery实例—选项卡(js源码和jQuery)【一些常见方法(1)-练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  2. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  3. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  4. Ajax学习(二):模仿jQuery的Ajax封装工具

    通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...

  5. 耗子大叔弹窗来自百度搜索引擎导流的弹窗JS源码赏析

    刚看到https://coolshell.cn/articles/9308.html 耗子大叔评价梁斌站点被百度封杀事件言论  然后在自己个人网站酷壳网站上发布了一段JS代码  当请求来自百度导流过来 ...

  6. 深入理解unslider.js源码

    最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...

  7. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  8. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  9. underscore.js源码研究(7)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

随机推荐

  1. HIVE SQL JOIN

    最近总结了一下hive表关联的用法,与Postgres表关联还是有细微差别,总结在这里方便以后查看. join语法 join_table: table_reference [INNER] JOIN t ...

  2. CH5103 [NOIP2008]传纸条[线性DP]

    给定一个 N*M 的矩阵A,每个格子中有一个整数.现在需要找到两条从左上角 (1,1) 到右下角 (N,M) 的路径,路径上的每一步只能向右或向下走.路径经过的格子中的数会被取走.两条路径不能经过同一 ...

  3. ACM学习历程—BZOJ2956 模积和(数论)

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  4. 洛谷 P1187 3D模型

    题目描述 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若干个1×1×1的立方体搭建而成(也就是所有建筑的底部都在同一平面上的).几个典型的城市模 ...

  5. Linux 下使用 ssh 登录局域网其他电脑的方法

    Linux 下使用 ssh 登录局域网其他电脑的方法 首先查看电脑是否安装 ssh 客户端,如果没有执行下面命令安装客户端. sudo apt-get install openssh-client s ...

  6. 冷备手工完全恢复(recover database,recover tablespace,recover datafile)

    冷备手工完全恢复 1.   手工完全恢复三种级别: recover database: 所有或大部分datafile丢失,一般是在mount状态完成.recover tablespace:    非关 ...

  7. 为什么对象序列化要定义serialVersionUID

    对于实现了java.io.Serializable接口的实体类来说,往往都会手动声明serialVersionUID,因为只要你实现了序列化,java自己就会默认给实体类加上一个serialVersi ...

  8. /*用户登录注册页面输入框的设置*/<span>的使用

    <!DOCTYPE html> /*用户登录注册页面输入框的设置*/ <html lang="en"> <head> <meta char ...

  9. Reporting Services无法连接ORACLE,提示:System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本

    Reporting Services无法连接ORACLE,在服务器安装ORACLE 11客户端版本后仍然提示以下错误: System.Data.OracleClient 需要 Oracle 客户端软件 ...

  10. 编写html页面时常见的问题(转)

    编写html页面时常见的问题(一)   说到写页面,肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题,那么在这里我总结一些经常遇到的小问题.希望能够帮助学习页面搭建的初学者! 虽然说ie ...