ajax_demo

最新推荐文章于 2024-07-17 12:52:53 发布

止落

最新推荐文章于 2024-07-17 12:52:53 发布

阅读量184

点赞数

分类专栏： Ajax 文章标签： ajax java javascript

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 前台部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AjaxDemo</title>
</head>
<body>
    <center>
        <table>
            <caption>Ajax Demo</caption>
            <tr>
                <td colspan="3"> </td>
            </tr>
            <tr>
                <td>username</td>
                <td><input name="username" onchange="checkUsername()"></td>
                <td id="usernameTips"> </td>
            </tr>
        </table>
    </center>
    <script type="text/javascript">
        // 校验username是否被占用
        function checkUsername() {
            // 定义ajax变量xmlhttp
            var xmlhttp;

            // 创建xmlhttp
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest;
            } else {
                xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
            }

            // 获取username的输入值
            var username = document.getElementsByName("username")[0].value;

            // 拼接请求URL，携带参数username
            var url = "checkUsername?username=" + username;
            xmlhttp.open("get", url);
            xmlhttp.send();

            // 设置回调函数
            xmlhttp.onreadystatechange = function() {

                // 判断请求状态
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    // 获取返回的responseText 值
                    if (xmlhttp.responseText === "using") {

                        // 设置username的提示语
                        document.getElementById("usernameTips").innerHTML = username
                                + " is using, please change other.";
                    } else {
                        document.getElementById("usernameTips").innerHTML = "Congratulations.";
                    }
                }
            }
        }
    </script>
</body>
</html>

1.1 创建XMLHttpRequest对象

创建xmlhttp对象的时候，采取兼容低版本IE浏览器和高版本IE浏览器，火狐，chrome等浏览器的方式

// 创建xmlhttp
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest;
            } else {
                xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
            }

1.2 请求方式

拼接URL时，在请求的path中，拼接上username的变量值。

var url = "checkUsername?username=" + username;

get请求也可换为post请求

// 拼接请求URL，携带参数username
var url = "checkUsername?username=" + username;
xmlhttp.open("get", url);
xmlhttp.send();

改为post请求

xmlhttp.open("post", "checkUsername", true);  
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("username=" + username);

2. 后台部分

package com.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckUsername
 */
@WebServlet("/checkUsername")
public class CheckUsername extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public CheckUsername() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");

        PrintWriter out = response.getWriter();

        if ("admin".equals(username)){
            out.write("using");
        } else {
            out.write("notUsing");
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

转：第一个ajax小demo

止落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax_demo

1. 前台部分<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d
复制链接

扫一扫