AJAX的基本应用方法

最新推荐文章于 2023-05-27 16:06:06 发布

Melissa_hexiu

最新推荐文章于 2023-05-27 16:06:06 发布

阅读量239

点赞数

分类专栏： javaEE 文章标签： ajax xmlhttprequest javascript

本文链接：https://blog.csdn.net/melissa_heixiu/article/details/52770311

版权

javaEE 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

关于AJAX，其实我觉得不用理解很多，直接能套上用就可了。

首先，我们先建立一个js文件，包含返回xmlhttp的方法。
当我们需要时，引入这个js文件。

function getXMLHttpRequest()
{       var xmlhttp;
        if (window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
}

从获得xmlhttp开始，我们应用有四步：

window.onload=function(){
            var xmlreq = getXMLHttpRequest();//1.得到XMLHttpRequest对象

            //4.当服务器端返回数据时的处理方式--回调
            xmlreq.onreadystatechange=function(){
                //判断请求是否成功
                if(xmlreq.readyState==4){
                    //判断响应是否成功
                    if(xmlreq.status==200){
                        //获取服务器返回的数据
                        alert(xmlreq.responseText);
                    }
                }
            };
            //2.指明请求的服务器资源,创建了一个连接
            xmlreq.open("get","${pageContext.request.contextPath}/servlet/AJAXServlet");
            //3.发送请求
            xmlreq.send(null);
        };

xmlreq.responseText获得从servlet请求的数据。

下面我们看一个注册时验证用户名有没有重复的例子

<script type="text/javascript" src="js/ajax.js"></script>
</head>
<script type="text/javascript">
    function checkName()
    {
        //得到用户输入的用户名
        var txt = document.getElementsByName("username")[0];
        var name = txt.value;

        var req = getXMLHttpRequest();//得到 XMLHttpRequest对象

        //定义当servlet返回结果时的处理方法
        req.onreadystatechange=function(){
             if(req.readyState==4 && req.status==200){
                 //得到响应的数据
                 var span = document.getElementById("msg");
                 span.innerHTML = req.responseText;
             }
        };
        req.open("get","${pageContext.request.contextPath}/servlet/findNameServlet?name="+name);
        req.send(null);
    }

</script>
<body>
    <!-- 验证用户名是否存在,当文本框失去焦点时立刻验证 -->
    用户名<input type="text" name="username" onblur="checkName()"><span id="msg"></span></br>
    密码<input type="password" name="passwd"></br>
    <input type="submit" value="注册">
</body>

Melissa_hexiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX的基本应用方法

关于AJAX，其实我觉得不用理解很多，直接能套上用就可了。首先，我们先建立一个js文件，包含返回xmlhttp的方法。当我们需要时，引入这个js文件。function getXMLHttpRequest(){ var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest
复制链接

扫一扫