AJAX

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX最直接的作用：不刷新界面，处理数据。
  举个例子：在一个网站注册账号，当输入用户名的时候，不需要点击注册按钮，直接提示是否可注册。而不是像静态页面，通过刷新页面的方式，才能得知是否可以注册。

• 要想用AJAX，就要在script路径下设置jquery.js的位置

  
  传统web模型和ajax模型.jpg

直接上代码

<script src="${ pageContext.request.contextPath }/boot/js/jquery.js"></script>
    <script>
        $(function () {
            $('#checkname').on('blur', function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/checkregname",
                    data: {
                        name: $('input[name = username]').val(),
                    },
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res == 1) {
                            $('#msg').css('color', 'red').html('用户名已存在！');
                            $('button').attr('disabled', 'disabled');

                        } else {
                            $('#msg').css('color', 'green').html('该名称可用！');
                            $('button').removeAttr('disabled', 'disabled');
                        }
                    },
                    error: function () {
                        alert("服务器无响应");
                    },
                    async: true
                })
            })
            $('button').on('click', function () {
                if ($('input[name=password]').val() == '') {
                    $('#pass_msg').css('color', 'red').html('请输入密码');
                    $('button').attr('disabled', 'disabled');
                }
            })
            $('input[name=password]').on('focus', function () {
                $('button').removeAttr('disabled', 'disabled');
            })
        })
    </script>

url:填写要发送到的servlet映射，上面写法是绝对路径。
data:设置传给servlet的参数。
type:设置请求方式。
dataType:设置返回对象类型。目前为json对象，可以使xml或其他格式的数据。
success: function (res){}：如果请求成功，进行一系列操作。
error: function () ：如果请求不通过，进行一系列操作。
async：是否异步处理。true或false