JSP入门篇：XMLHttpRequest的基本用法

不闲扯，直接开讲。

使用XMLHttpRequest对象，主要分为以下七个步骤：

创建对象
设置过期时间
设置数据格式
初始化 HTTP 请求
设置HTTP头请求
回传数据的处理
发送 HTTP 请求

对应代码如下所示

<script type="text/javascript">
    var xhr;
    function goAjax() {
    //1.创建对象
    xhr = new XMLHttpRequest();
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.设置过期时间
    xhr.setTimeout = 3000;
    //3.设置数据格式
    xhr.responseType = "text";
    //4.初始化 HTTP 请求参数(未发送)
    xhr.open("POST", "servlet/AjaxLoginServlet", true);
    //5.设置HTTP请求
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //6.回传数据的处理
    //注册相关事件回调处理函数
    //6.1 回传的数据加载完毕后执行
    xhr.onload = function(e) {
        //alert(this.readyState + "||" + this.status);
        if(this.readyState == 4 || this.status == 200) {
        var div = document.getElementById("divContent");
        div.innerHTML = this.responseText;
        }
    };
    //6.2访问出错
    xhr.onerror = function(e) {
        alert("登录失败！");
    };
    //6.3超时
//  xhr.ontimeout = function(e) {
//  };
    //6.4状态改变
    /* xhr.onreadystatechange = function(e){
            if(this.readyState == 4 || this.status == 200) {
                alert(this.responseText);
            }
    } */
    //7.发送数据
    var username = document.getElementById("username").value;
    var pwd = document.getElementById("password").value;
    xhr.send("username=" + username + "&password=" + pwd);
    }
</script>

HTML页面代码如下：

<body>
    账号：<input type="text" name="username" id="username" /><br />
    密码：<input type="password" name="password" id="password" /><br />
    <input type="button" value="登录" onclick="goAjax();" />
    <div id="divContent" style="width:200px; height: 100px;"></div>
</body>

servlet文件代码如下：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    //设置内容格式
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    //获取url中的用户名和密码
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    //成功输出success 失败输出fail
    if ("haha".equals(username) && "123".equals(password)) {
        out.println("success");
    } else {
        out.println("fail");
    }
    out.flush();
    out.close();
}

本文出自 “软件思维” 博客，请务必保留此出处http://softi.blog.51cto.com/13093971/1950888

你我学习网

Java从入门到放弃

JSP入门篇：XMLHttpRequest的基本用法

分类文档目录相关推荐:

热门教程导航