Ajax中GET请求和POST请求对比

表单使用Ajax发送GET请求和POST请求

GET请求

• 报文行 请求方式+请求地址？参数1=值&参数2=值 http/版本 -->open(请求方式+请求地址？参数1=值&参数2=值)
• 报文头 GET方式中一般情况不用管报文头
• 报文体 参数都放在url地址中了，所以报文体中无参数 —>send(null)发送请求

 // 输入框失去焦点事件
    document.querySelector('.username').onblur = function () {
        let name = this.value
        //使用XMLHttpRequest对象进行发送请求和接收响应
        let xhr = new XMLHttpRequest()
        //请求行(请求方式,请求地址)
        xhr.open('get', 'http://127.0.0.1:3002/validataUserName?name=' + name)
        //请求头(get方式一般不用管)
        //请求体-->send发送请求(参数都在url中拼接了所以send(null))
        xhr.send(null)
        //接收完会触发onload事件
        xhr.onload = function () {
            //响应内容都存放在response中(字符串的格式!!!!!)
            let res = JSON.parse(xhr.response)
            if (res.code == 201) {
                document.querySelector('span').innerHTML = res.msg
                return
            } else if (res.code == 200) {
                document.querySelector('span').innerHTML = res.msg
            }
        }
    }

POST请求

• 报文行 请求方式+请求地址 -->open()
• 报文头 设置请求报文头 setRequestHeader(‘Content-Type’,‘类型’) 有传参数但没设置的话后台接收不到参数
• 报文体 参数都写在报文体中send() 使用键值对的形式传递

document.querySelector('.sub').onclick = function () {
        //获取输入框的值
        let name = document.querySelector('.username').value
        let password = document.querySelector('.password').value
        let phone = document.querySelector('.phone').value
        //创建XMLHttpRequest对象进行发送请求和接收响应
        let xhr = new XMLHttpRequest()
        //表单使用POST请求
        //设置请求行-->open()
        xhr.open('post', 'http://127.0.0.1:3002/addUser')
        //设置请求头(有参数必须设置请求头的Content-Type,否则后台接收不到参数)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //请求体(POST参数放在请求体中)-->send()键值对的形式
        xhr.send(`userName=${name}&password=${password}&phone=${phone}`)
        //接收完会自动触发onload事件
        xhr.onload = function () {
            let res = JSON.parse(xhr.response)
            if (res.code == 201) {
                alert('注册失败');
            } else if (res.code == 200) {
                alert('注册成功');
            }
        }
    }

 <form action="">
        用户名：<input type="text" class="username"><span></span><br>
        密码：<input type="password" class="password"><br>
        手机号码：<input type="phone" class="phone"><br>
        <input type="button" value="注册" class="sub">
    </form>

• 注意：接口要改成自己的!!