使用原生JavaScript实现ajax操作

本文将介绍一种只通过jsp和servlet进行ajax操作的实现,而不借助于jQuery和struts2等框架.
ajax的核心思想在于不用刷新页面,而普通js表单并没有ajax的原生支持,所以这里使用了隐藏iframe作为一个媒介.
具体实现思想为:让表单提交到servlet,将target设置为本页的一个隐藏frame,这样servlet返回的数据就还是在本页中,而没有进行任何的跳转; 并且如果servlet返回的数据是一个可执行的js代码段,则其会自动执行,所有我们可以用这个原理执行提前准备好的js函数.
1.前端jsp页面代码,就是一个普通的登录表单,只是在form属性中添加了一个target属性指向iframe的name属性

    <form action="login.do" method="post" target="frame" >
        <table>
        <tr>
            <td>用户名</td>
            <td><input name="name"  /></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td><button id="login">登录</button></td>
            <td id="ajaxInfo" ></td>
        </tr>
    </table>
    </form>
    <iframe name="frame" style="display:none"></iframe>

2.准备一个js回调函数,用于在表单提交后处理服务端返回的逻辑

    window.onload=function(){
        function callBack(data){
            if(data=="success"){
                alert("success");
            }else{
                alert("error");
            }
          }
    }

3.服务端servlet的逻辑(servlet的注册已省略)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        String pwd=request.getParameter("pwd");
        PrintWriter out= response.getWriter();
        String flag="";
        //这里作为演示将验证逻辑写死了,完全可以按照业务逻辑更改
        if("zhangsan".equals(name) && "123".equals(pwd)){
            flag="success";
        }else{
            flag="error";
        }
        //最关键的步骤:向前端输出了一段js片段,在其到达页面时会自动调用回调函数
        //需要注意的是:调用的函数是写在主页面的,而返回的内容是在iframe子窗体内,所以需要使用parent.函数名 调用
        //另外参数需要使用单引号''包围起来
        out.write("<script>parent.callBack('"+flag+"')</script>");
    }

按以上的逻辑即可完成不使用任何框架的原生ajax操作了,当然ajax还有很多功能这里没有模拟,需要的读者可以参阅其他文章^.^