ajax_demo

来源：互联网发布：算法设计与分析试题编辑：程序博客网时间：2024/06/06 09:04

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，携带参数usernamevar 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