Ajax进阶二：发送POST请求

最新推荐文章于 2023-05-09 00:24:40 发布

双木林。

最新推荐文章于 2023-05-09 00:24:40 发布

阅读量281

点赞数

分类专栏： js 文章标签： ajax xmlhttprequest

本文链接：https://blog.csdn.net/zllww123/article/details/76945022

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

（1）对于Ajax的post请求，他与get请求的区别就是需要设置请求头和参数，其他部分和get请求一样。实例代码如下（判断form表单里面的账号密码是否已经注册）：

 <script type="text/javascript">
  //创建获取xmlhttprequest的函数
  function createXmlHttpRequest(){
 try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本  
            } catch (e) {
                alert("哥们儿，您用的是什么浏览器啊？");
                throw e;
            }
        }
    }

  }
 window.onload = function() {
    // 获取文本框，给它的失去焦点事件注册监听
    var userEle = document.getElementById("xxx");
    //注册失去焦点的事件
    userEle.onblur = function() {
        //1.得到异步对象
        var xmlHttp = createXmlHttpRequest();
        //2.打开连接
        xmlHttp.open("POST", "/AjaxWeb/Bservlert", true);
        //3.设置请求头：Content-Type
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //4.发送请求，给出请求体
        xmlHttp.send("name=" + userEle.value);


        //5.给xmlHttp的onreadystatechange事件注册监听
        xmlHttp.onreadystatechange = function() {

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
                //获取服务器的响应，判断是否为1
                // 是：获取span，添加内容：“用户名已被注册”
                var text = xmlHttp.responseText;

                var span = document.getElementById("span");
                alert(text);
                if(text == "2") {
                    //得到span元素
                    span.innerHTML = "用户名已被注册！";
                } else {
                    span.innerHTML = "";
                }
            }
        };
    };
};

  </script>
  <body>
  <form method="post" action="/AjaxWeb/Bservlert">
姓名：<input type="text" name="name" id="xxx"/><span id="span"></span><br>
密码：<input type="password" name="password"/><br>
<input type="submit" id="btn" value="提交">
</form>