由于拖延症的严重以及年前准备年会(借口*^__^*)
导致这个小的的思考  现在才算完成
再怎么说也算是上班以来带我的前辈第一次这么正式的给我出题
不管是出于尊重还是自我要求我都决定把它简要的记下来
......
 
1.了解prototype
       原型对象的作用,就是定义所有实例对象共享的属性和方法。具体理解见实际操作中
 
2.给String Date等对象增加继承方法
  要求结果:比如var date = "2016-01-01 00:00:00";date.format();要求输出"2016-01-01";
eg:
String.prototype.format = function(){
    return this.substring(0,10);
};
var str1 = "2016-01-01 00:00:00";
alert(str1.format(str1));
 
3.了解xmlhttprequest,能发送及接受ajax,以及分析response对象
         
  response属性为只读,返回接收到的数据体(即body部分),他的类型可以是ArrayBuffer、Blob、Document、JSON对象、或者一个字符串。由XMLHttpRequest.responseType属性的值决定。
 
4.结合xmlhttprequest+prototype 自己封装一个请求
 
本以为信手拈来,就这样的随便的敷衍写了一下,发现各种对原生的ajax不熟悉
于是仔细的看了一下原生的ajax相关的各个属性,复习了下相关用法
同时也参照了一些网络博客综合一下,对ajax进行了简单的封装
XMLHttpRequest.prototype.ajax = function(type,url,data,success,error){
    var _this = this;
    if(typeof data == 'object'){
        var tempStr = '';
        for(var key in data){
            tempStr += key + '=' + data[key] + '&';
        }
        data = tempStr.replace(/&$/,'');
    }
    if(type = 'GET'){
        if(data){
            this.open('GET',url + '?' + data, true);
        }else{
            this.open('GET',url + '?version=' + Math.random(),true);
        }
        this.send();
    }else if(type == 'POST'){
        this.open('POST',url,true);
        this.setRequestHeader("content-type","application/x-www-form-urlencoded");
        this.send(data);
    }
    this.onreadystatechange = function () {
        if(this.readyState == 4){
            if(this.status == 200){
                success(this.responseText);
            }else{
                if(error){
                    error(this.status);
                }
            }
        }
    }
};

//ajax test
var xhr = new XMLHttpRequest();
xhr.ajax('GET','https://secure.ec.qa.sunyuki.com/v0/items/11111',null,function(data){
    alert(data);
});
 
 

结合prototype和xmlhttprequest封装ajax请求的更多相关文章

  1. JS利用XMLHttpRequest拦截ajax请求

    function XMLHttpRequestBreak(fun=()=>false){ let f = XMLHttpRequest.prototype.open; let add = fun ...

  2. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  3. ajax02_封装自己的jQuery库和ajax请求

    封装自己的ajax类库 首先封装自己的 jQuery库 启发:css的元素选择器思想 简单的代码实现 function jQuery(selector){ if(typeof selector == ...

  4. 封装ajax库,post请求

    http状态码406是服务器无法根据客户端请求的内容特性完成请求 //整站功能方法库封装ajax请求,这里只针对post var methods = { //全站ajax请求状态处理 ajax: fu ...

  5. 封装Ajax和跨域

    目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

  6. ajax请求加全局loading , 个别特殊请求不显示loading

    项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

  7. 前后台交互ajax请求模块

    下载依赖包axios npm i axios -d //在packge.json内配置proxy,配置请求基础路径 "proxy":"http://localhost:5 ...

  8. <day001>存储到Mysql、mongoDB数据库+简单的Ajax请求+os模块+进程池+MD5

    任务1:记住如何存储到Mysql.mongoDB数据库 ''' 存储到Mysql ''' import pymysql.cursors class QuotePipeline(object): def ...

  9. js封装ajax的方法

    常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url ...

随机推荐

  1. JMeter 连接数据库报错No suitable driver found for jdbc:xxxxxxxxx

    添加JDBC Connection Configuration 和 JDBC Request 组件,添加相关信息 注意两个组件里面输入的Variable Name 必须一致 运行查看结果树出现如下错误 ...

  2. eclipse 设置编辑窗口字体和背景颜色

    最近装了几次系统,公司也换过电脑,所以换了几次eclipse,当然家里用的当然是最新版,公司就只有用几百年前的东西了 进入重点,我的编辑窗口习惯使用灰色的背景,感觉全白的不好看,还伤视力(没有科学依据 ...

  3. iOS 之 通知

    步骤一,注册消息: [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(getUserProfileSu ...

  4. js原生写的微博留言板有angularjs效果

    1.HTML: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  5. mfix模拟流化床燃烧帮助收敛的方法

    1.在反应速率里用rate_limit函数:2.初始床料中可以添加一部分碳和灰.下面给出详细解释: 1.c3m生成的化学反应速率中有一个这样的函数: double precision function ...

  6. Wireshark对常见视频应用的抓包分析的结果

    一.PC端直播: YY客户端直播用的udp(P2P)9158客户端直播用的rtp/rtcp 二.Web端直播: YY网页端直播用的tcp9158网页端直播用的tcp六间房网页端直播用的tcp17173 ...

  7. SpringMvc项目中使用GoogleKaptcha 生成验证码

    前言:google captcha 是google生成验证码的一个工具类,其原理是将随机生成字符串保存到session中,同时以图片的形式返回给页面,之后前台页面提交到后台进行对比. 1.jar包准备 ...

  8. 【Zookeeper】源码分析之Watcher机制(三)之Zookeeper

    一.前言 前面已经分析了Watcher机制中的大多数类,本篇对于ZKWatchManager的外部类Zookeeper进行分析. 二.Zookeeper源码分析 2.1 类的内部类 Zookeeper ...

  9. css3 3d变换和动画——回顾

    1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...

  10. 读书笔记 effective c++ Item 6 如果你不想使用编译器自动生成的函数,你需要明确拒绝

    问题描述-阻止对象的拷贝 现实生活中的房产中介卖房子,一个服务于这个中介的软件系统很自然的会有一个表示要被销售的房屋的类: class HomeForSale { ... }; 每个房产中介会立刻指出 ...