Ajax中的XMLHttpRequest对象-优快云博客

XMLHttpRequesrt对象用于后台与服务器交换数据,

XMLHttpRequest对象提供对HTTP协议的完全的访问,包括做出POST和HESD请求以及普通的GET情求的能力。

XMLHttpRequest可以同步或异步地返回web服务器的响应,并且能够以文本或者一个DOM文档的形式返回内容。

尽管名为XMLHttpRequest,它并不限于和XML文档一起使用:它可以接收任何形式的文本文档。

下面是实例:

首先先写一个表单,如下(这下面的表单是通过Bootstrap写的所以应在写之前引入Bootstrap框架)

Bootstrap框架官网:https://v4.bootcss.com/

  <div class="container mt-5">
        @*onsubmit="return false;" 禁用表单的自动提交方式*@
        <form id="frm" autocomplete="off" @*action="/Main/GetData" method="post"*@ onsubmit="return false;">
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">姓名</label>
                <input class="form-control col-9" type="text" name="name" id="txtName" />
            </div>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">性别</label>
                <select class="form-control col-9" name="sex" id="cboSex">
                    <option value="0">--请选择--</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">地址</label>
                <textarea class="form-control col-9" name="address" id="txtAddress"></textarea>
            </div>
            <div class="form-group form-row">
                <button type="button" class="btn btn-outline-success mr-2" onclick="postData1()">提交</button>
                <button type="reset" class="btn btn-outline-danger ">Reset重置</button>
            </div>
        </form>
</div>

在这里值得注意的点有:

1:表单中name值应该与你控制台中的数据相对应;如果没有对应可能会报错;

接下来是script部分:

 <script>
        //通过XMLHttpRequest对象向我们的控制器提交数据;
        function postData1() {
            //通过过id获取表单数据
            var txtName = document.getElementById("txtName").value; //获取表单中的姓名
            var txtAddress = document.getElementById("txtAddress").value;//获取表单中的性别
            var cboSex = document.getElementById("cboSex").value;//获取表单中的地址;
            var strData = "name=" + txtName + "&sex=" + cboSex + "&address=" + txtAddress;//字符串的拼接

            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP")//老版本的 code for IE6,IE5
            }
            xhr.open("post", "/index/rece", true);
            //指定响应头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(strData);
  // onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);//控制台打印控制器中返回的数据
                }
            }
        }
    </script>

这是博主仿造老师的代码敲出来的;

在这里写一下readyState 与status吧;

readyState:存有XMLHttpRequest的状态。从0到4发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status: 200: "OK" 404: 未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且status为 200 时，表示响应已就绪：

下面是我用来接收上面的表单数数据的控制器: