AJAX入门及实例_html-js-css

前置知识

HTML、Java、JavaScript、servlet、tomcat 基础知识

AJAX框架

<html>
<body>
<SCRIPT language="JavaScript">
    function findbook(){
        // 1、AJAX 实例化浏览器内置对象xmlHttp
        var xmlHttp = false;
        if(window.XMLHttpRequest){ // Mozilla等浏览器
            xmlHttp = new XMLHttpRequest();
        }
        else if(window.ActiveXObject){
            try{
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE浏览器
            }catch (e) {
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                    window.alert("该浏览器不支持AJAX");
                }
            }
        }
        
        var bookname = document.addbookform.bookname.value;
        var url = "servlets/FindBook?bookname="+bookname;
        
        // 2、指定异步提交的目标和提交方式
        xmlHttp.open("POST",url,true);
        // xmlHttp.open("GET","showbooks.jsp",true);
        
        // 3、指定当xmlHttp状态改变时需要进行的处理
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                booklist.innerHTML=xmlHttp.responseText;
            }
            else{
                booklist.innerHTML+="正在搜索，请稍后......"
            }
        }
        
        // 4、发出请求
        xmlHttp.send();
    }
SCRIPT>
<form name="addbookform">
    书名：<input type="text" name="bookname"><br>
    <input type="button" value="查询" onclick="findbook()"><br>
form>
<div id="booklist">div>
body>
html>

在请求过程中，xmlHttp的状态不断改变，其状态保存在xmlHttp的readyState属性中，用xmlHttp.readyState表示：

0：未初始化状态，对象已创建，尚未调用 open()1：已初始化状态，调用 open() 方法以后2：发送数据状态，调用 send() 方法以后3：数据传送中状态，已经接收到部分数据，但接收尚未完成4：完成状态，数据全部接收完成。 AJAX实例

使用AJAX的登录表单验证简单案例
以登录界面为例，首先编写登录页面 login.jsp
如果登录成功，则界面显示登录成功后的页面
如果登录失败，则界面显示登录失败后的页面
在登录时，浏览器窗口不刷新，浏览器地址栏上的地址不变，网页上其他部分的浏览不受影响。

文件结构代码编写

登录页面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<html>
<head>
    <title>登录title>
head>
<body>
    <SCRIPT language="JavaScript">
        function login(){
            var xmlHttp = false;
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
                try{
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                        window.alert("该浏览器不支持AJAX");
                    }
                }
            }
            var account = document.loginForm.account.value;
            var password = document.loginForm.password.value;
            var url = "http://localhost:8080/pro/servlets/LoginServlet?account="+account+"&password="+password;
            xmlHttp.open("POST",url,true);
            // xmlHttp.open("GET","loginSuccess.jsp",true);
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4){
                    resultDiv.innerHTML=xmlHttp.responseText;
                }
                else{
                    resultDiv.innerHTML+="正在登录，请稍后......"
                }
            }
            xmlHttp.send();
        }
    SCRIPT>
    欢迎登录学生管理系统.<hr>
    <div id="resultDiv">
        <form name="loginForm">
            请你输入账号：<input type="text" name="account"><br>
            请你输入密码：<input type="password" name="password"><br>
            <input type="button" onclick="login()" value="登录">
        form>
    div>
body>
html>

登录成功页面 loginSuccess.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录成功title>
head>
<body>
    欢迎${account}登录成功！<br>
    您可以选择以下功能：<br>
    <a href="">查询学生a>
    <a href="">修改学生资料a>
    <a href="">退出a>
body>
html>

登录失败页面 loginFail.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录失败title>
head>
<body>
    对不起，登录失败！<br>
    请你检查是否写错<br>
    账号名写错<br>
    密码写错
body>
html>

servlet 登录验证代码 LoginServlet.java

package servlets;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

public class LoginServlet extends HttpServlet{
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String account = req.getParameter("account");
        String password = req.getParameter("password");
        String loginState = "Fail";
        String targetUrl = "/loginFail.jsp";
        // 简化的登录验证，对DAO的简化
        if(account.equals(password)){
            loginState="Success";
            targetUrl="/loginSuccess.jsp";
            HttpSession session = req.getSession();
            session.setAttribute("account",account);
        }
        req.setAttribute("loginState",loginState);
        ServletContext application = this.getServletContext();

        RequestDispatcher rd = application.getRequestDispatcher(targetUrl);
        rd.forward(req,resp);
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

web.xm文件配置


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>LoginServletservlet-name>
        <servlet-class>servlets.LoginServletservlet-class>
    servlet>
    <servlet-mapping>
        <servlet-name>LoginServletservlet-name>
        <url-pattern>/servlets/LoginServleturl-pattern>
    servlet-mapping>
web-app>

网页效果

登录界面

当账号和密码相同时，认为登录成功，显示登录成功界面，但浏览器窗口不刷新，地址栏不变

当账号和密码不相同时，认为登录失败，显示登录失败界面，但浏览器窗口不刷新，地址栏不变

实例代码

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1322020.html

AJAX入门及实例

发表评论

评论列表（0条）