手动封装js原生XMLHttprequest异步请求

Code
Object.extend =function(targetObj,fnJson){
    //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象
    for(var fnName in fnJson){
        targetObj[fnName]=fnJson[fnName];
    }
    return targetObj;
};

HttpAjax = (function(){
    function HttpAjax(options){
        var settings={
            type:‘post‘,        //请求类型
            url:‘‘,             //请求地址
            data:{"id":-1},     //json格式的参数
            success:function(){},//成功的回调函数
            failure:function(){},//失败的回调函数
            isAsyn:true           //是否为异步
        };
        this.options = Object.extend(settings,options);

        Object.extend(HttpAjax.prototype,{
            _createXhr:function(){
                if (typeof XMLHttpRequest !== ‘undefined‘) {
                    return new XMLHttpRequest();
                }
                else if (typeof ActiveXObject !== ‘undefined‘) {
                    var versions = [‘MSXML2.XMLHttp.6.0‘, ‘MSXML2.XMLHttp.3.0‘, ‘MSXML2.XMLHttp‘];
                    for (var i = 0, len = versions.length; i < len; i++) {
                        try {
                            var xhr = new ActiveXObject(versions[i]);
                            this.IsCreateOk = versions[i];
                            return xhr;
                        }
                        catch (e) { }
                    }
                    if (typeof this.IsCreateOk === ‘undefined‘) {
                        throw new Error("您的浏览器版本过低,无法创建异步对象,请升级您的浏览器!");
                    }
                }
            },
            _encodeData:function(paramters){
                var data = [];
                for (var name in paramters) {
                    //将数组中的数据以=拼接后再添加到data数组中 [name=aa,age=11]
                    var _regesp = /%20/g; //空格的正则表达式
                    var _value = paramters[name].toString(); //获取值
                    data.push(encodeURIComponent(name).replace(_regesp, ‘+‘) + "=" + encodeURIComponent(_value).replace(_regesp, ‘+‘));
                }
                //以&将数组元素拼接后返回 如:name=aa&age=11
                return data.join("&");
            },
            _regCallback:function(xhr){
                var _this=this;
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {
                            _this.options.success(_this._getResponseData(xhr), xhr.statusText);
                        } else {
                            _this.options.failure(xhr.status, xhr.statusText);
                        }
                    }
                }
            },
            _getResponseData:function(xhr){
                var responseType = xhr.getResponseHeader("Content-Type");
                switch (responseType) {
                    case ‘text/xml‘:
                        return xhr.responseXML;
                    case ‘text/json‘:
                    case ‘text/javascript‘:
                    case ‘application/javascript‘:
                    case ‘application/x-javascript‘:
                        return eval(‘(‘ + xhr.responseText + ‘)‘);
                    default:
                        return xhr.responseText;
                };
            },
            _init:function(options){
                this.options=options;
                if(this.options.url=="") return;
                this.xhr = this._createXhr();//创建异步对象
                this._regCallback(this.xhr);//注册回调事件

                //根据请求类型,发送异步请求
                if(this.options.type.toLowerCase()=="post"){
                    this._post(this.xhr);
                }
                else{
                    this._get(this.xhr);
                }
            },
            _post:function(xhr){
                this.xhr=xhr;
                this.data=this._encodeData(this.options.data);
                this.url=this.options.url+"?d=" + parseInt(Math.random()*100+1,10);
                this.asyn=!!this.options.isAsyn;

                xhr.open("POST", this.url, this.asyn);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(this.data);
            },
            _get:function(xhr){
                this.xhr=xhr;
                this.data=this._encodeData(this.options.data);
                this.url=this.options.url+‘?‘ + this.data + ‘&d=‘ + parseInt(Math.random()*100+1,10);
                this.asyn=!!this.options.isAsyn;

                xhr.open(‘GET‘, this.url, this.asyn);
                xhr.send(null);
            }
        });
       this._init(this.options);
    };
    return HttpAjax;
})(window);
Code// 调用示例:
    var ss = new HttpAjax({//get
        type:"get",
        url:"testAjax.php",
        data:{"name":‘Jack‘},
        success:function(data){
            console.log(data);
        },
        failure:function(data){
            console.log(data);
        },
        isAsyn:false
    });

    console.log(new HttpAjax({//post
        type:"post",
        url:"testAjax.php",
        data:{"name":‘Bob‘},
        success:function(data){
            console.log(data);
        },
        failure:function(data){
            console.log(data);
        }
    }));

    new HttpAjax({//post
        type:"post",
        url:"testAjax.php",
        data:{"name":‘Bob‘},
        success:function(data){
            console.log(data);
        },
        failure:function(data){
            console.log(data);
        }
    });

    new HttpAjax({//post
        type:"post",
        url:"testAjax.php",
        data:{"name":‘Stack‘},
        success:function(data){
            console.log(data);
        },
        failure:function(data){
            console.log(data);
        }
    });
Code//请求:
testAjax.php?name=Jack&d=21 GET 200
testAjax.php?d=85 POST 200
testAjax.php?d=46 POST 200 

//返回结果:
name:Jack index.htm:134
name:Stack index.htm:159
name:Bob 

// 待完善的地方:
添加默认参数:cache //是否允许缓存
添加两个监测状态的事件:beforeSend 、complete

// php后台
<?php
header("Content-Type:text/html; charset=utf8");
echo "name:".$_REQUEST[‘name‘];
 ?>

手动封装js原生XMLHttprequest异步请求

时间: 2024-10-07 07:04:22

手动封装js原生XMLHttprequest异步请求的相关文章

js方式的异步请求

1 有的企业要求你要会写, 2 *1. 异步请求的get方式 3 代码: 4 //创建一个XmlHttpRequest请求 5 function createXmlHttpRequest(){ 6 //声明一个请求,并是设置为空 7 var xhr=null; 8 try{ 9 //兼容IE浏览器的请求 10 xhr=new ActiveXObject("microsoft.xmlhttp"); 11 }catch(e){ 12 try{ 13 //其他浏览器的请求对象 14 xhr=

libcurl的封装,支持同步异步请求,支持多线程下载,支持https

最近在做一个项目,需要用到http get post等 需求分析需要做到同步和异步,异步请求的返回以可选的回调通知的方式进行. 本人以Linux为例,一步一步的来实现. 配置并且编译libcurl我以在Linux底下的交叉编译举例.libcurl源码下载: http://curl.haxx.se/download.html配置libcurl支持https和zlib压缩,必须需要openssl和zlib库openssl库源码下载: http://www.openssl.org/source/.下载

原生ajax异步请求基础知识

一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做其他任何事情(不等): 同步与异步的区别: * 同步交互 1.执行速度相对比较慢 2.响应的是完整的HTML页面 * 异步交互 1. 执行速度相对比较快 2. 响应的是部分数据 二.AJAX的概念:(Asynchronous JavaScript an

js 原生 ajax 异步上传图片

<script type="text/javascript"> function upload() { var file1 = document.getElementById("file1"); postFile(file1.files[0]); } function postFile(data) { //1.创建异步对象(小浏览器) var req = new XMLHttpRequest(); //2.设置参数 req.open("post

js实现所有异步请求全部加载完毕后,loading效果消失

在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loading效果消失,那么问题来了,每个ajax请求数据的时间都是不确定的,我们这个loading效果结束的逻辑又应该放到哪里呢?就好比这样(伪代码模拟): console.log('loading效果图旋转中') var timer1 = setTimeout(() => { console.log('第

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

原生JS写Ajax的请求函数

原文:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 1 ajax({ url: "./TestXHR.aspx", //请求地址 2 type: "POST", //请求方式

AJAX的来龙去脉(由来)-如果被封装出来的--ajax发送异步请求(四步操作)

<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打包ajax生成小工具.avi;  有介绍: 个人理解:就是封装了 XMLHttpRequest 的请求方法:演变而成我们常用的 ajax: =====原始的请求方式: ajax发送异步请求(四步操作) 1. 第一步(得到XMLHttpRequest) * ajax其实只需要学习一个对象:XMLHttpRequ

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

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