结合prototype和xmlhttprequest封装ajax请求

由于拖延症的严重以及年前准备年会(借口*^__^*)

导致这个小的的思考  现在才算完成

再怎么说也算是上班以来带我的前辈第一次这么正式的给我出题

不管是出于尊重还是自我要求我都决定把它简要的记下来

......

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);
});

时间: 2024-10-13 20:49:44

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

JS/Jquery:jquery封装ajax请求。

jquery提供了ajax请求,但这个写起来很繁琐,所以我在项目里对其进行了简单封装,为了用起来方便嘛~~~~~ 以后每次都引入这个js文件就可以了: 下面是代码部分: base.js //ajax请求 var ajaxRequest = function () { }; ajaxRequest.prototype = { //初始化设置 url : '', dataType : 'json', data:'', //初始化ajax参数 setUp : function(){ $.ajaxSet

封装ajax请求

/* 能发送ajax请求的函数模块 包装axios 函数的返回值是promise对象 axios.get()/post()返回的就是promise对象 */ import axios from 'axios' export default function ajax(url, data={}, method='GET') { return new Promise(function (resolve, reject) { let promise // 执行异步ajax请求 if(method===

封装基本的Ajax请求

一.说明 Ajax请求能够对页面进行局部的更新,而不用重新刷新当前浏览的整个页面,使用户体验更好. 实现Ajax请求的方法可以通过JavaScript代码向服务器发出 请求信息,客户端浏览器接收到返 回的Ajax数据,对页面进行 局部的刷新.在这个实现过程中,XMLHttpRequest对象是Ajax 的核心. 虽然jQuery已经将Ajax请求封装得很好了,我们可以非常方 便的使用jQuery库提供的方法($.get(), $.post(),$.ajax()等) 实现Ajax请求,但是本着学习

js封装ajax的方法

常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url : url, data : params, cache : false, success : function(data) { cb(data); }, error : function(err) { alert("服务器异常"); } }); } function ajaxGet(url

前后台交互ajax请求模块

下载依赖包axios npm i axios -d 最基本的axios异步请求 /* 能发送异步ajax请求的函数模块 封装 axios库 函数的返回值:是一个promise对象 (可以用.then()/ async await 进行异步处理) */ //引入axios库 import axios from 'axios'; //引入axios库的模块 export default function ajax(url, data={}, method='GET'){ if(method==='G

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否.这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率.当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求.也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了 这是封装的aja

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤: 1.创建XMLHttp对象 2.发送请求:包括打开链接.发送请求 3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 var xmlHttp = xmlHttpCreate();//创建对象 xmlHttp.onreadysta