Ajax——11——POST使用和封装

最新推荐文章于 2024-02-19 10:32:14 发布

野生小米椒

最新推荐文章于 2024-02-19 10:32:14 发布

阅读量597

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x1037490413/article/details/104897747

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一：post的使用

关键代码，与get不同的地方

 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //3.发送请求  异步对象发送请求
                //传参
                xmlhttp.send("userName=zs&userPwd=321");

HTML代码 b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn=document.querySelector("button")
            oBtn.onclick=function(ev1){
                //兼容IE
                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //2.设置请求方式和请求地址(给创建的异步对象设置)
                /*
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async:true(异步)或false(同步)  AJAX是异步请求，所以括号里永远填true
                */
                xhr.open("POST","a.php?t="+(new Date().getTime()),true)
                //注意点：以下代码必须放到open和send之间
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

                //3.发送请求  异步对0象发送请求
                //传参
                xhr.send("userName=zs&userPwd=321");
                //4.监听状态的变化  监听的是异步对象的变化  只要异步请求发生了变化，就调用这个回调函数，代表请求已经完成
                xhr.onreadystatechange=function(ev2){
                    if(xhr.readyState===4){
                        /*
                        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

                       0: 请求未初始化
                       1: 服务器连接已建立
                       2: 请求已接收
                       3: 请求处理中
                       4: 请求已完成，且响应已就绪

                        */
                        //判断是否请求成功  http状态码
                        if(xhr.status>=200&&xhr.status<300||
                            xhr.status===304){
                            //5.处理返回的结果
                            /*
                            服务器响应
                            responseText获得字符串形式的响应数据
                            responseXML 获得XML形式的响应数据
                            */
                            alert(xhr.responseText);
                        }else{
                            alert("请求失败");
                        }

                    }
                }

            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

php代码 a.php

<?php
echo $_POST["userName"];
echo "<br>";
echo $_POST["userPwd"];

二：POST的封装

HTML代码 b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="d.js"></script>
    <!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn=document.querySelector("button")
            oBtn.onclick=function(ev1){
                //调用自己封装的js
              Ajax("POST","a.php",{
              "userName":"lnj",
                  "userPwd":"321"
              },3000,function(xhr){
              alert(xhr.responseText);
              },function(xhr){
              alert("请求失败")
              });
                }

            }

    </script>

</head>
<body>
<button>发送请求</button>
</body>
</html>

php代码 a.php

<?php
echo $_POST["userName"];
echo "<br>";
echo $_POST["userPwd"];

js代码 d.js

function objtostr(obj){
    /*
            "userName":"lnj",
            "userPwd":"123456"
            "t":"16461231654"
    */
    obj.t=new Date().getTime();
    var res=[];
    for(var key in obj){
        //在url中是不可以出现中文的，如果出现了中文需要转码
        //可以调用encodeURIComponent方法
        //URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));//[userName=lnj,userPwd=123456];
    }
    return res.join("&");//join方法把数组转换成字符串 ，并且元素与元素之间用&连接 userName=lnj&&userPwd=123456
}
function Ajax(type,url,obj,timeout,success,error){
    //0.将对象转换为字符串
    var str=objtostr(obj);
    /*三个会变的作为参数 地址，成功要执行的回调函数，失败的函数*/
    //兼容IE
    //1.创建一个异步对象
    var xmlhttp,timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.设置请求方式和请求地址(给创建的异步对象设置)
    /*
    method:请求的类型：GET或POST
    url:文件在服务器上的位置
    async:true(异步)或false(同步)  AJAX是异步请求，所以括号里永远填true
    */
    if(type==="GET"){
        xmlhttp.open(type,url+"?"+str,true)
        //3.发送请求  异步对0象发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(type,url,true)
        //注意点：以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    //4.监听状态的变化  监听的是异步对象的变化  只要异步请求发生了变化，就调用这个回调函数，代表请求已经完成
    xmlhttp.onreadystatechange=function(ev2){
        if(xmlhttp.readyState===4){
            clearInterval(timer);//接收到了响应，把定时器关掉
            /*
            存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

           0: 请求未初始化
           1: 服务器连接已建立
           2: 请求已接收
           3: 请求处理中
           4: 请求已完成，且响应已就绪

            */
            //判断是否请求成功  http状态码
            if(xmlhttp.status>=200&&xmlhttp.status<300||
                xmlhttp.status===304){
                //5.处理返回的结果
                /*
                服务器响应
                responseText获得字符串形式的响应数据
                responseXML 获得XML形式的响应数据
                */
               success(xmlhttp);
            }else{
                error(xmlhttp);
            }

        }
    }
    //判断外界是否传入了超时时间
    if(timeout){
        timer=setInterval(function(){
            console.log("中断请求");
            xmlhttp.abort();//中断请求
            clearInterval(timer);
        },timeout);
    }
}

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax——11——POST使用和封装

post的使用关键代码，与get不同的地方 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //3.发送请求异步对象发送请求 //传参 xmlhttp.send("userName=zs&...
复制链接

扫一扫