ajax的应用

编写一个简单的 AJAX 程序（原生方式）我们简单的模拟一个表单校验的程序

• index.html

<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后台判断用户名是否存在"></br>
<div id="msgError">校验显示区域</div>

• JavaScript 代码

<script language="javascript" type="text/javascript">
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            // 兼容 Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }
        //准备请求
        ajaxRequest.open("POST", "loginServlet", true);

        //由于是POST提交方式，所以添加 HTTP 头
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //获取到表单中输入的值
        var name_input = document.getElementById("username").value;

        //发送请求
        ajaxRequest.send("username=" + name_input);

        ajaxRequest.onreadystatechange = function () {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                //获取服务器的响应结果
                var responseText = ajaxRequest.responseText;

                var div = document.getElementById("msgError");
                div.innerText = responseText;

            }
        }
    }
</script>

• loginServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
		
    	//此语句仅为方便判断是否后端正常收到了前端的数据，可选择删除
        System.out.println("接收到的数据：" + username);

        try {
            if (username.equals("admin")) {
                Thread.sleep(5000);
                response.getWriter().print("该用户名已经存在");
            } else {
                Thread.sleep(5000);
                response.getWriter().print("该用户名可以注册");
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

我们这样就在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯，我们为了演示，同时在后台主动设置 延时5秒响应的情况下，但我们用户仍然可以在此期间进行操作，具体情况，可以自行简单模拟试验

JQuery 实现方式

使用原生的 JavaScript 实现 AJAX 确实比较麻烦，而 使用 Jquery 也可以帮助我们实现这样一种需求，而且也会让我们的代码更加简洁，直观

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>

url：请求路径
type：请求方式
date：请求参数，想对应于原生JS实现的，data: “username=admin&age=20”
success：响应成功后的回调函数
error：果请求响应出现错误，会执行的回调函数
dateType：设置接受到的响应数据的格式

当然它的参数和设置选项不止这些，在这里只选择了一些相对简单或者说必须的，详情可以参考 JQuery API 文档

举个例子：

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>

经过测试结果是一样的:

JQuery确实极大的简化了我们的代码，但是如果你只是想快速的实现这一种需求，JQuery 其实还提供了两个更为简单的方式，以取代复杂 $.ajax

总结：

AJAX 的的基本知识，以及使用 JavaScript 和 JQuery 这两种实现方式，我们就已经介绍完了，到现在为止，如何发起并且接收响应已经不在话下了，并且我们对 AJAX 有了一定的认识，但是 AJAX 的一些应用场景，以及AJAX 如何搭配 常见的 如 JSON 等数据格式，实现前后端的交互，并没有提到，我们就放到后面说，将全部的内容挤到一起，无论是从篇幅或者说内容的针对性都是不够强的，不过AJAX 也确实是我们成长路上不可不学的一门技术。