ajax学习笔记02-POST的基本使用

淩亂°似流年 2023-06-16 15:52 10阅读 0赞

一、使用ajax发送post请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>07-ajax-post</title>
        
        <script>
            window.onload = function (ev) {
                var oBtn = document.querySelector("button");
                oBtn.onclick = function (ev1) {
                    //1.创建一个异步对象
                    var xmlhttp = new XMLHttpRequest();
                    //2.设置请求方式和请求地址
                    /*
                    *   method：请求的类型；GET 或 POST
                        url：文件在服务器上的位置
                        async：true（异步）或 false（同步）
                    * */
                    xmlhttp.open("POST", "07-ajax-post.php", true);
                    //以下代码需要放到open和send之间
                    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    //3.发送请求
                    xmlhttp.send("username=doudou&passwd=123456");
                    //4.监听状态变化
                    xmlhttp.onreadystatechange = function (ev2) {
                        /*
                        0: 请求未初始化
                        1: 服务器连接已建立
                        2: 请求已接收
                        3: 请求处理中
                        4: 请求已完成，且响应已就绪
                        */
                        if (xmlhttp.readyState === 4){
                            //判断是否请求成功,xmlhttp.status返回的http状态码
                            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                                xmlhttp.status ===304){
                                //5.处理返回结果
                                alert(xmlhttp.responseText);
                                console.log(xmlhttp.responseText);
                            }
    
                        }
                    }
    
                }
            }
        </script>
    </head>
    <body>
    <button>发送请求</button>
    </body>
    </html>

二、封装ajax请求

三、调用ajax post请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08-ajax-jquery</title>
        <script src="myAjax2.js"></script>
        
        <script>
            window.onload = function (ev) {
                var oBtn = document.querySelector("button");
                oBtn.onclick = function (ev1) {
                    ajax({
                            type:"post",
                            url:"07-ajax-post.php",
                            data:{
                                "username":"doulihang",
                                "passwd":"444444"
                            },
                            timeout:3000,
                            success:function (xhr) {
                                alert(xhr.responseText)
                            },
                            error:function (xhr) {
                                alert("请求失败")
                            }
                    })
                }
            }
        </script>
    
    </head>
    <body>
    <button>发送请求</button>
    </body>
    </html>