使用原生js封装Ajax异步请求

最新推荐文章于 2022-07-16 15:29:05 发布
最新推荐文章于 2022-07-16 15:29:05 发布
阅读量611 收藏 1
点赞数 1
分类专栏： Ajax异步通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34550459/article/details/105938020
版权

第一种方式；

function createXMLHttpRequest() {
    var request = false;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        if (request.overrideMimeType) {
            request.overrideMimeType("text/xml");
        }

    } else if (window.ActiveXObject) {
        var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0',
            'Msxml2.XMLHTTP.6.0',
            'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
        ];

        for (var i = 0; i < versions.length; i++) {
            try {
                request = new ActiveXObject(versions[i]);
                if (request) {
                    return request;
                }

            } catch (exception) {
                request = false;
                console.error(exception.error);
            }

        }

    }
    return request;
}

/*
returnType:返回值类型
HTML----返回的是文本,默认参数
XML ----返回的是XML对象
JSON ---- 返回的是JSON对象
传入时不区分大小写

isAsync:是否为ajax异步请求,默认为true
true ---->使用ajax异步请求
false ---->使用ajax同步请求
*/
function Ajax(returnType, isAsync) {
    var ajaxObj = new Object();
    ajaxObj.targetUrl = '';
    ajaxObj.sendString = '';

    if (typeof (isAsync) == 'undefined') {
        ajaxObj.async = true;//默认采用ajax异步请求
    } else {
        ajaxObj.async = isAsync;
    }

    ajaxObj.returnType = returnType ? returnType.toUpperCase() : "HTML";//设置返回值类型
    ajaxObj.callbackfunction = null;//回调函数
    ajaxObj.ff;
    ajaxObj.createXMLHttpRequest = function () {
        var request = false;
        if (window.XMLHttpRequest) {
            ajaxObj.ff=true;
            request = new XMLHttpRequest();
            if (request.overrideMimeType) {
                request.overrideMimeType("text/xml");
            }

        } else if (window.ActiveXObject) {
            ajaxObj.ff=false;
            var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0',
                'Msxml2.XMLHTTP.6.0',
                'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
            ];

            for (var i = 0; i < versions.length; i++) {
                try {
                    request = new ActiveXObject(versions[i]);
                    if (request) {
                        return request;
                    }

                } catch (exception) {
                    request = false;
                    console.error(exception.error);
                }
            }
        }
        return request;
    }

    ajaxObj.XMLHttpRequest=ajaxObj.XMLHttpRequest();
    
    ajaxObj.processHandle=function(){
        if(ajaxObj.XMLHttpRequest.readyState==4){
            ajaxObj.ff=false;
            if(ajaxObj.XMLHttpRequest.status == 200){
                if(ajaxObj.returnType == "HTML"){
                    ajaxObj.callbackfunction(ajaxObj.XMLHttpRequest.responseText);
                }else if(ajaxObj.returnType == "JSON"){
                    ajaxObj.callbackfunction(eval('('+ajaxObj.XMLHttpRequest.responseText+')'));
                }else if(ajaxObj.returnType == "XML"){
                    ajaxObj.callbackfunction(ajaxObj.XMLHttpRequest.responseXML);
                }
            }
        }

    }

  /*
    GET请求方法:
    targetUrl:请求的服务器目标地址,在URL中传递请求参数. 
    http://localhost:8080/server.php?key1=value1&&key2=value2
    callbackfunction:回调函数,可选。 需要一个参数(服务器端返回的数据:XML对象、JSON对象、文本)
    */

    ajaxObj.get=function(targetUrl,callbackfunction){
        ajaxObj.targetUrl=targetUrl;
        if(callbackfunction){
            ajaxObj.XMLHttpRequest.onreadystatechange=ajaxObj.processHandle;
            ajaxObj.callbackfunction=callbackfunction;
        }

        if(window.XMLHttpRequest){
            ajaxObj.XMLHttpRequest.open('GET',ajaxObj.targetUrl,ajaxObj.async);
            ajaxObj.XMLHttpRequest.send(null);
        }else{
            ajaxObj.XMLHttpRequest.open('GET',ajaxObj.targetUrl,ajaxObj.async);
            ajaxObj.XMLHttpRequest.send();
        }

        if(!ajaxObj.async && ajaxObj.ff){
            ajaxObj.processHandle();
        }
    }



    /*
    POST请求方法:
    targetUrl:请求的目标地址
    sendString:字符串数据("key1=value1&&key2=value2","{key1:value1,key2:value2}")
    callbackfunction:回调函数,可选。 需要一个参数(服务器端返回的数据:XML对象、JSON对象、文本)
    
    */
    ajaxObj.post=function(targetUrl,sendString,callbackfunction){
        ajaxObj.targetUrl=targetUrl;

        if(typeof(sendString) == "object"){
            var str="";
            for(var pro in sendString){
                str+=pro+"="+sendString[pro]+"&";
            }
            ajaxObj.sendString=str.substring(0,str.length-1);
        }else{
            ajaxObj.sendString=sendString;
        }

        if(callbackfunction){
            ajaxObj.XMLHttpRequest.onreadystatechange=ajaxObj.processHandle;
            ajaxObj.callbackfunction=callbackfunction;
        }

        request.open("POST",targetUrl, ajaxObj.async);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(sendString);

        if(!ajaxObj.async && ajaxObj.ff)
                ajaxObj.processHandle();
    }
        return ajaxObj;//将封装的对象返回
}

第二种封装方式:

//模拟jquery方式,封装js原生的ajax请求
 var request= (function $(){
    var ajaxObj=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    if(!ajaxObj){
        throw new Error('您的浏览器不支持异步发起HTTP请求!');
    }

    function _doAjax(option){

        var option=option || {},
            type=(option.type || 'GET').toUpperCase(),
            async=option.async || true,//默认为异步请求
            url=option.url,
            data=option.data || null,
            error=option.error || function(){},
            success=option.success || function(){},
            complete=option.complete || function(){} ;
            if(!url){
                throw new Error('您没有填写URL');
            }

            ajaxObj.open(type,url,async);
            type === "POST" && ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajaxObj.send(type==="GET"?null:formatDatas(data));


            ajaxObj.onreadystatechange=function(){
                if(ajaxObj.readyState === 4 && ajaxObj.status === 200){
                    success(JSON.parse(ajaxObj.responseText));//调用成功回调函数
                }
            }
        }

        function formatDatas(obj){//将json对象转换为字符串数据("key1=value1&key2=value2.....")
            if(typeof(obj) == "object"){
                var str='';
                for(var key in obj){
                    str+=key+"="+obj[key]+'&';
                }
                return str.replace(/&$/,'');//正则替换最后一个&
            }
        }
    return{
        ajax:function(option){//option:JSON对象   支持post/get请求 
            _doAjax(option);
        },
        post:function(url,data,callbackfunction){//post请求方式
            _doAjax({
                type:"POST",
                url:url,
                data:data,
                success:callbackfunction
            });
        },
        get:function(url,callbackfunction){//get请求方式
            _doAjax({
                type:"GET",
                url:url,
                success:callbackfunction
            });
        }
    }
})();//立即执行函数

测试案例：
Ajax请求:
在这里插入图片描述
Post请求方式:
在这里插入图片描述
Get请求方式:
在这里插入图片描述

极客研究者
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS封装异步API（回调函数的应用）
weixin_41374628的博客
05-23 2692
封装异步API 如下：想要得到延时器里面 data 的值，有什么好的办法呢？ function fn(){ setTimeout(()=>{ var data = 'hello'; }, 1000) } console.log(fn()); // undefined --> 想要输出结果为 setTimeout 中 data 的值 可以通过回调函...
javascript ajax请求封装
大炮哥的博客
08-19 313
javascript ajax请求封装
js封装ajax方法
m0_59878114的博客
09-12 1540
1、根据Jquery中ajax的方法封装，先创建一个js文件 // 对原生代码进行封装 // 传参，相当于 let 形参 = 实参; /* let { type, url, data, success } = { type: 'POST', url: 'http://www.itcbc.com:3006/api/addbook', data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laot
js 异步请求封装
weixin_34179968的博客
08-13 233
1. function ajax(url, onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性。XHR xmlhttp.open("POST", url, ...
原生JS封装AJAX请求
weixin_34106122的博客
11-25 287
一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看了很多前辈们的关于ajax请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生JS封装ajax的版本，希望大家看了之后能够明白，下面就是我实现的方法，其中的注释很清晰，方便大家的理解。...
使用原生js封装的ajax实例(兼容jsonp)
11-28
这里我们将深入探讨如何使用原生JavaScript封装一个兼容JSONP的Ajax函数。 首先，让我们分析提供的代码片段。这个封装的Ajax函数接受几个关键参数： 1. `opt.type`：定义HTTP请求类型，通常是POST或GET。 2. `opt....
原生javascript实现的ajax异步封装功能示例
11-28
总结来说，原生JavaScript实现的AJAX异步封装涉及以下几个关键步骤： 1. 创建`XMLHttpRequest`对象或`ActiveXObject`（针对旧版IE）。 2. 使用`open()`方法初始化请求，`send()`方法发送请求。 3. 设置`...
原生js封装的ajax方法示例
12-10
本文将详细介绍如何使用原生JavaScript封装一个简单的Ajax方法。 首先，我们要了解Ajax的核心是XMLHttpRequest对象，它提供了与服务器异步通信的能力。在非IE6浏览器中，我们直接创建`XMLHttpRequest`对象；而在IE6...
js 封装一个简单的异步API，获取异步操作结果
qq_45516629的博客
03-28 1188
原文地址：https://www.cnblogs.com/Grani/p/9588221.html 平常在封装一个同步的函数时，我们只需要在函数中 return 结果就可以了。 像这样： function fn () { var data = 'hello'; return data; } var data = fn(); console.log(data) //输出 ： hello js ...
Ajax异步与同步方法封装的js文件
09-07
调用方法：１ 将下载好的Ajax js文件引用到页面 代码如下：<script src " js MyAjax js" type "text javascript">< script> ２ 调用方法：（1）异步： MyAjax " 要调用的方法页面 方法" 参数 function d {alert d["d"] ;} ; 2 同步：MyAjaxs " 要调用的方法页面 方法" 参数 function d {alert d["d"] ;} ;">调用方法：１ 将下载好的Ajax js文件引用到页面 代码如下：<script src " js MyAjax js" type "text javascript">< script> ２ 调用方法：（1）异步： MyAjax " 要调用的方法页面 方法" 参数 function d {alert d[" [更多]
JS实现异步的方法
m0_49471668的博客
06-07 1150
得分点 回调函数、事件监听、setTimeout、Promise、生成器Generators/yield、async/awt标准回答所有异步任务都是在同步任务执行结束之后，从任务队列中依次取出执行。回调函数是异步操作最基本的方法，比如AJAX回调，回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 returnProm
js封装ajax的方法
我的乌托
01-02 2484
常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url : url, data : params, cache : false, success : function(data) { cb(data); }, ...
ajax浏览器兼容的问题
parachuter123的专栏
09-04 732
无标题文档 window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ //只支持非IE6浏览器 if(window.XMLHttpRequest){ //return new XMLHttpRequest(); alert
原生js 实现ajax请求封装
qq_43512502的博客
03-05 866
function ajax(method, url, params,Callback) { method = method.toUpperCase(); let xhr = new XMLHttpRequest(); if (typeof params === 'object') { let tempArr = []; for (let k...
【js 封装一个简单的异步API，获取异步操作结果和过程解析】
阿牛哥的博客
07-16 588
【js 封装一个简单的异步API，获取异步操作结果和过程解析】
原生js的jsonp请求函数封装
sfafoa的博客
04-12 695
原生js的jsonp请求函数封装
利用原生js封装ajax请求
weixin_46095476的博客
01-05 210
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-U
原生js实现ajax异步加载
包子源的博客
05-22 2499
原生js异步加载 window.onload = ajax(); function ajax() { var xmlhttp; if(window.XMLHttpRequest){ //创建 XMLHttpRequest 对象 xmlhttp = new XMLHttpRequest();
原生js封装异步ajax请求
最新发布
08-25
当封装异步Ajax请求时，可以使用原生JavaScript的XMLHttpRequest对象来实现。下面是一个简单的示例： ```javascript function ajaxRequest(method, url, data, successCallback, errorCallback) { var xhr = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值