原生ajax写法

最新推荐文章于 2022-12-20 13:51:22 发布

原创最新推荐文章于 2022-12-20 13:51:22 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

小白分享专栏收录该内容

29 篇文章

订阅专栏

ajax是前后端程序员都要了解的基础，原生的ajax写法用javascript写出来有时候会考一下，所以列了出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" id="form">
        <label for="username">username</label>
        <!-- label的for属性可将页面焦点转移到与for属性对应的input表单元素id值为for属性值的焦点上 -->
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <br>
        
        <br>
        <label for="pass">pass</label>
        <input type="password" name="pass" placeholder="请输入密码" id="pass">
        <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
    <script>
        let form = document.getElementById("form");
        form.onsubmit=function(e){
            e.preventDefault();
            console.log(13)
            let xhr;
            if(typeof XMLHttpRequest !== "undefined"){
                xhr = new XMLHttpRequest()
            }else{
                xhr = new ActiveXObject()
            }

            xhr.onreadystatechange=function(){
                // if()
                console.log(xhr.readyState)
            }
           
            xhr.open("post","https://www.baidu.com",true)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(null)
        }
    </script>
</body>
</html>