ajax技术的js代码封装

最新推荐文章于 2024-04-07 02:00:47 发布

lincong-pro

最新推荐文章于 2024-04-07 02:00:47 发布

阅读量137

点赞数

分类专栏：前端以前的自学垃圾文章标签： ajax js

本文链接：https://blog.csdn.net/qq_45605535/article/details/113135064

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

以前的自学垃圾

11 篇文章 0 订阅

订阅专栏

文章目录

ajax整个流程大概就是创建XMLHttpRequest()对象，然后指定请求方式和地址，然后监听状态变化，如果请求成功执行请求操作，反之请求超时执行对应的失败操作。对于jsp或者说请求的servlet来说就是验证用户名和密码之后返回成功与否的状态，然后根据状态做出对应的操作。

json对象转字符串

function  obj2gson(obj) {//js的函数只需要return就可以了，并不需要写返回值
    //为了增加ajax代码的通用性，直接在obj刚传进来的时候就创建一个键值对进行赋值
    obj.t=(new Date).getTime();//将时间戳参数传递进入json对象中
    var res=[];//声明一个结果属组用于存放obj的键值对
    for(var key in obj)
    { //对于encodeURIComponent()用于将中文转化为数字、字母、ascii、下划线等
        res.push(encodeURIComponent(key)+'='+encodeURIComponent(obj[key]));//实际上通过[]声明的属组更像C++的vector
    }
    //最后利用javascript自带的函数将json格式转化为gson格式
    return res.join('&');//最后将res结果向量转化为我们想要的格式
}

ajax的功能封装

//封装ajax功能
function ajax(url,success,error,obj,timeout) {//其中obj就是前端传递给后端的参数,timeout参数就是请求多久的时候才终端操作
    //首先需要写一个函数将obj如下格式
    /*如下格式称为json格式
    {
        usrname: xxxxxx,
        password: xxxxxx
    }转化为username=xxx&password=xxxxx的网页地址格式以便数据端进行验证
    * */
    var gson=obj2gson(obj);
    //将url和传递的参数转化为真正的url参数
    url=url+'?'+gson;
    console.log(url);
    //将转化好
    //使用ajax技术的步骤
    /*第一步，创建xmlhttp对象*/
    var xmlhttp;
    //让ajax适用于尽可能多的浏览器
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //第二步，指定请求的地址
    // xmlhttp.open('POST',"ajax.jsp",true); //请求servlet处理
    // xmlhttp.open('POST','a.txt',true);//请求文本内容
    // xmlhttp.open('POST',url+'?t='+Math.random(),true);//防止ie缓存，低版本的ie每次访问的url都必须不一样
    xmlhttp.open('GET',url,true);//每次的时间都不一样
    console.log(new Date().getTime());
    //第三步，发送请求
    xmlhttp.send();
    //第四步，监听状态变化
    xmlhttp.onreadystatechange=function (ev) {
        if(xmlhttp.readyState===4)
        {
            //如果访问没有超时xmlhttp返回的状态码就是4，但是在进行异步请求的时候需要将后面的timer关掉
            clearInterval(timer);//将生成的timer参数去除
            if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304)
            {
                //执行ajax成功之后执行的操作
                success(xmlhttp);
            }
            else
            {
                //执行ajax失败之后执行的操作
                error(xmlhttp);
            }
        }
    }
    //判断外界是否传入了超时时间
    if(timeout){
        const timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();//中断ajax请求之后直接执行error回调
            clearInterval(timer);//只要执行了一次回调就清除掉定时器
        }, timeout);
        //其实上面的回调函数特别神奇，非常像C#的回调函数
        //由于函数中是一个线程从上到下进行执行，所以当执行完success回调时出错然后超过了3秒就自动关闭ajax请求
    }
}

测试ajax封装代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_test</title>
    <script src="ajax.js"></script><!--可以通过手动拖动的方式拖动js文件引入文件-->
    <script type="text/javascript">
        window.onload=function (ev) {
            //初始化之后就生成对应的响应函数
            var btn=document.querySelector("button");//按照选择器获取对象

            btn.onclick=function () {
                url='a.txt';//实际上javascript以及matlab和python都是弱类型得语言
                //上面的问题就是正常情况下的url都会携带许许多多的参数比如http:localhost:8080?username=xxx&password=xxxxx
                //针对上面这种方式可以直接传入
                /*下面这种格式
                {
                 username: haha,
                 password: 12345678
                }
                当然上面这种格式可以观看学校教务网登录网页的代码进行操作，原理十分相似
                * */
                var obj={
                    username: 'lin',
                    password: '5201314Lc????'
                }
                //当用户点击button按钮的时候执行的操作
                ajax('a.txt',function (xmlhttp) {
                    //该函数为回调函数，这大概就是js里面回调函数定义的方式
                    //在另外一边先声明有这个函数对象，然后给回调函数赋予参数
                    alert(xmlhttp.responseText);
                },function (xmlhttp) {
                    alert('ajax操作执行失败');
                },obj,3000);//添加时间请求自动失败的参数
            }
        };
    </script>
</head>
<body>
    <button>click me</button>
</body>
</html>

合并POST请求操作

在这里插入图片描述

jquery版本的最终js封装

//封装ajax功能
//function ajax(url,success,error,obj,timeout,method) {//其中obj就是前端传递给后端的参数,timeout参数就是请求多久的时候才终端操作,method代表请求的方式
function ajax(data){ //传入一个json格式的对象（键值对的方式存在）
    //首先需要写一个函数将obj如下格式
    /*如下格式称为json格式
    {
        usrname: xxxxxx,
        password: xxxxxx
    }转化为username=xxx&password=xxxxx的网页地址格式以便数据端进行验证
    * */
    var gson=obj2gson(data["obj"]);//根据obj键查找值

    //将转化好
    //使用ajax技术的步骤
    /*第一步，创建xmlhttp对象*/
    var xmlhttp;
    //让ajax适用于尽可能多的浏览器
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //将url和传递的参数转化为真正的url参数、
    if(data["method"]==='GET')
    {
        data["url"]=data["url"]+'?'+gson;//只有GET请求才将参数拼接到url后面，POST请求由于不是采用显示的拼接，所以ajax有其独特的处理的方式
        // 第二步，指定请求的地址
        xmlhttp.open(data['method'],data['url'],true);//每次的时间都不一样
        //第三步，发送请求
        xmlhttp.send();
    }else {
        data['url']=data['url'];//url保持不变
        xmlhttp.open(data['method'],url,true)
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//固定的格式
        xmlhttp.send(gson);//这就是唯一的区别，参数需要用send函数传出
    }

    //第四步，监听状态变化
    xmlhttp.onreadystatechange=function (ev) {
        if(xmlhttp.readyState===4)
        {
            if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304)
            {
                //执行ajax成功之后执行的操作
                (data['success'])(xmlhttp);
            }
            else
            {
                //执行ajax失败之后执行的操作
                (data['error'])(xmlhttp);
            }
        }
    }
    //判断外界是否传入了超时时间
    if(data['timeout']){
        const timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();//中断ajax请求之后直接执行error回调
            clearInterval(timer);//只要执行了一次回调就清除掉定时器
        }, data['timeout']);
        //其实上面的回调函数特别神奇，非常像C#的回调函数
        //由于函数中是一个线程从上到下进行执行，所以当执行完success回调时出错然后超过了3秒就自动关闭ajax请求
    }
}

function  obj2gson(obj) {//js的函数只需要return就可以了，并不需要写返回值
    //为了增加ajax代码的通用性，直接在obj刚传进来的时候就创建一个键值对进行赋值
    obj.t=(new Date).getTime();//将时间戳参数传递进入json对象中
    var res=[];//声明一个结果属组用于存放obj的键值对
    for(var key in obj)
    { //对于encodeURIComponent()用于将中文转化为数字、字母、ascii、下划线等
        res.push(encodeURIComponent(key)+'='+encodeURIComponent(obj[key]));//实际上通过[]声明的属组更像C++的vector
    }
    //最后利用javascript自带的函数将json格式转化为gson格式
    return res.join('&');//最后将res结果向量转化为我们想要的格式
}

封装的ajax测试（可用php或者jsp或者文本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_test</title>
    <script src="ajax.js"></script><!--可以通过手动拖动的方式拖动js文件引入文件-->
    <script type="text/javascript">
        window.onload=function (ev) {
            //初始化之后就生成对应的响应函数
            var btn=document.querySelector("button");//按照选择器获取对象

            btn.onclick=function () {
                url='a.txt';//实际上javascript以及matlab和python都是弱类型得语言

                var data={
                    obj: {
                        username: 'lin',
                        password: '5201314Lc????'
                    },
                    timeout: 5000,
                    success: function (xmlhttp) {
                        alert(xmlhttp.responseText);
                    },
                    error: function (xmlhttp) {
                        alert(xmlhttp.status);
                    },
                    method: "GET",
                    url: 'a.txt'
                };
                //当用户点击button按钮的时候执行的操作
                ajax(data);//添加时间请求自动失败的参数
            }
        };
    </script>
</head>
<body>
    <button>click me</button>
</body>
</html>

利用原生js封装ajax的要点

明白ajax五步骤，主要从ajax原生js教程
然后需要注意访问方式的问题
接下来你需要注意中文翻译的问题（只有这样才能添加到url中encodeURIComponent）
接下来你需要理解的就是jquery版本的ajax传入的是一个json格式的对象，所谓的json就仅仅是单纯的键值对而已嘛
还有就是请求时间过长需要终端请求
最有技术含量的一点就是防止ie缓存让每次的url都变化，两种方式t=new Date.getTime()或者使用t=math.random()函数进行创建随机值

jquery中封装的ajax的简单使用

首先需要自己去官网下载jquery的js封装版本，jquery下载地址可能网速有点慢哟。
在这里插入图片描述
使用ajax的话你就需要去jquery的官网去寻找教程，jquery帮助手册的官网地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_test</title>
    <script src="jquery-3.5.1.js"></script>
    <script type="text/javascript">
        window.onload=function (ev) {
            //初始化之后就生成对应的响应函数
            var btn=document.querySelector("button");//按照选择器获取对象
            btn.onclick=function () {
                $.ajax({
                    type: "POST",
                    url: "a.txt",
                    data: "username=xiongerzi&password=5201314",
                    success: function(msg){
                        alert( "Data Saved: " + msg );
                    },
                    error: function (xmlhttp) {
                        alert(xmlhttp.status);//返回状态码
                    },
                    timeout: 3000
                });
            }
        };
    </script>
</head>
<body>
    <button>click me</button>
</body>
</html>

lincong-pro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax技术的js代码封装

文章目录json对象转字符串ajax的功能封装测试ajax封装代码ajax整个流程大概就是创建XMLHttpRequest()对象，然后指定请求方式和地址，然后监听状态变化，如果请求成功执行请求操作，反之请求超时执行对应的失败操作。对于jsp或者说请求的servlet来说就是验证用户名和密码之后返回成功与否的状态，然后根据状态做出对应的操作。json对象转字符串function obj2gson(obj) {//js的函数只需要return就可以了，并不需要写返回值 //为了增加ajax代码
复制链接

扫一扫

专栏目录