j2ee之原生AJAX

Ajax应用实例详解

最新推荐文章于 2022-05-10 08:48:07 发布

weixin_30537391

最新推荐文章于 2022-05-10 08:48:07 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ShaoXin/p/7411427.html

本文介绍了一个具体的Ajax应用实例，包括JavaScript实现的Ajax请求处理过程、servlet中的响应处理逻辑及jQuery中的Ajax应用示例，展示了如何通过Ajax进行异步数据交互。

Ajax.js ajax是通过流的方式处理页面请求

var createAjax = function(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        try{
            ajax = new XMLHttpRequest();
        }catch(e2){
            alert("请换掉你的浏览器");
        }
    }
    return ajax;
}

　　　　　/* 判断用户名 */
        document.getElementById("username").onblur = function(){
            var username = this.value;
            var span = document.getElementById("myspan");
            if(username.length==0){
                span.innerHTML="用户名不能为空";
            }else{
                var ajax = createAjax();
                var method = "POST";
                var url="${pageContext.request.contextPath }/AjaxServlet?time="+new Date().getTime();
                ajax.open(method,url);
                /* 设置请求头，ajax默认是get提交方式 */
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
                username= encodeURI(username);
　　　　　　　　　 /*请求参数*/
                var content = "username=" + username;
                ajax.send(content);
                /* ---------------------------- */                
                ajax.onreadystatechange = function(){
                    if(ajax.readyState==4 && ajax.status == 200){
                        var valueSrc = ajax.responseText;
                        var img = document.createElement("img");
                        img.src = valueSrc;
                        img.style.width="12px";
                        img.style.height="12px";
                        span.innerHTML="";
                        span.appendChild(img);
                    }                    
                }
            }
        }

在servlet中的处理

String username = request.getParameter("username");
        username = new String(username.getBytes("ISO-8859-1"), "utf-8");
        System.out.println(username);
        if ("ss".equals(username)) {
            response.getWriter().write("image/MsgError.gif");
        } else {
            if (username.length() > 0) {
                response.getWriter().write("image/MsgSent.gif");
            }
        }

步骤详情

        <h1>Ajax实例</h1>
        <div id="myAjax">ajax将要获取的内容</div>
        <button id="myBtn" onclick="btnClick()">获取内容</button>
        <script type="text/javascript">
        function btnClick(){
            //获取ajax
            var ajax = createAjax();
            //ajax的请求方式
            var method = "POST";
            //ajax向服务器（action）发送请求
            var url = "${pageContext.request.contextPath }/ajaxActiont_start.action?time="
                    + new Date().getTime();
            //ajax拼接字符串，准备请求，请求方式+请求地址
            ajax.open(method, url);
            /* 设置请求头，ajax默认是get提交方式 */
            //前一个参数文本内容，后一个参数文本内容字符集，基本上是会自动给你转换为utf-8
            ajax.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
            //这里实际上是把表单中数据转为utf-8的一种方法
            //username = encodeURI(username);
            /*请求参数*/
            //这里的参数就是类似于键值对的方式提交，准确的说就是.properties文件中的键值对所以是如下形式传参数
            var content = "username=" + "1";
            //发送请求
            ajax.send(content);
            /* ---------------------------- */
            //当请求状态改变的时候
            ajax.onreadystatechange = function(){
                    //动态状态码为4并且浏览器状态为200的时候
                    if(ajax.readyState==4 && ajax.status == 200){
                        //获取返回的文本流数据
                        var value = ajax.responseText;
                        //获取到指定div
                        var text = document.getElementById("myAjax");
                        //给指定div中插入数据
                        text.innerHTML = value;
                    }                    
                }
        }
        </script>

jQuery中ajax应用

　　　　　　　　　　　　　　　　　　　　　　　　　　　　$.ajax({type : "POST",
                                                      url : "${pageContext.request.contextPath}/suspicious/suspectParty?time="+ new Date().getTime(),
                                                    data : {
                                                        partyid : $pno
                                                    },
                                                    success : function(data) {
                                                        //alert(data.rst.id);
                                                        var ccd = '';
                                                        if (data.rst.partyClassCd == 'C') {
                                                            ccd = '对公当事人';
                                                        }
                                                        if (data.rst.partyClassCd == 'I') {
                                                            ccd = '个人当事人';
                                                        }
                                                        
                                                        $("#ptytb").append("<tr id='ptytr'><td>"
                                                                                + "<input id='rdo' type='radio'  onclick='rdocl()'/>"
                                                                                + "</td>"
                                                                                + "<td>"
                                                                                + data.rst.partyId
                                                                                + "</td>"
                                                                                + "<td>"
                                                                                + data.rst.partyChnName
                                                                                + "</td>"
                                                                                + "<td>"
                                                                                + data.rst.cardNo
                                                                                + "</td>"
                                                                                + "<td>"
                                                                                + "36"
                                                                                + "</td>"
                                                                                + "<td>"
                                                                                + ccd
                                                                                + "</td></tr>");
                                                    }
                                                });
                                    });