JavaWeb课堂笔记——AJAX基础

一:

1.创建Web项目AjaxDemo01

 

2.在index文件中输入之后运行一下

效果:

 

3.web目录下创建data文件夹,然后新建一个userlist.txt的文件

在里面输入数据,比如:

 

4.在web目录下创建一个名为getUserList的html文件

运行后看看效果:

 

 

这就是运行效果

5.在getUserList.html中写入一下脚本

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                //IE7以上或者Firefox、chrome、Opera、Safari浏览器中执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //如果是低版本,使用另外一种方式实例化请求对象
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //监听请求状态变化,一旦有变化,执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功,响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                     //利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }
            }

            //新建HTTP请求,采用get方式,请求采用异步方式
            xmlhttp.open("GET","/AjaxDemo01/data/userlist.txt",true);
            //发送HTTP请求,不传递参数
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
    <h3>用户列表</h3>
    <div id="users"></div>
    <hr>
    <button type="button" onclick="loadUserList()">获取用户列表</button>
</body>
</html>

 

运行TomCat服务器,跳转到getUserList.html,然后点击按钮

效果:

 

6. 在web目录下创建一个名为login的html文件

代码如下:

测试一下效果:

明显效果是可以看见的。 

 

再给重置按钮加上方法

效果如下:

 

 

7.将之前getUserList.html中的代码复制到ogin.html中进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function login() {
            //获取用户名与密码
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                //IE7以上或者Firefox、chrome、Opera、Safari浏览器中执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //如果是低版本,使用另外一种方式实例化请求对象
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //监听请求状态变化,一旦有变化,执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功,响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    //根据返回值不同跳转不同的页面
                    if (xmlhttp.responseText == "success") {
                        //跳转到成功页面,并且传递用户名
                        window.location = "success.html?username=" + username;
                    } else {
                        //跳转到失败页面,传递用户名
                        window.location = "failure.html?username=" + username;
                    }
                }
            }

            //新建HTTP请求,采用get方式,请求采用异步方式,改为false即为同步方式
            xmlhttp.open("POST","/AjaxDemo01/login",true);
            //设置请求头
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //定义要传递的参数
            var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
            //发送请求,传递数据
            xmlhttp.send(data);
        }

        function reset() {
            // 清空用户名与密码数据
            document.getElementById("username").value = "";
            document.getElementById("password").value = "";

        }
    </script>
</head>
<body>
<h3 style="text-align: center">用户登录</h3>
<table border="1" cellpadding="10" style="margin: 0px auto">
    <tr>
        <td align="center">用户名</td>
        <td><input type="text" id="username"/></td>
    </tr>
    <tr>
        <td align="center">密&nbsp;码</td>
        <td><input type="password" id="password"/></td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <button type="button" onclick="login()">登录</button>
            <button type="button" onclick="reset()">重置</button>
        </td>
    </tr>
</table>


</body>
</html>

AJAX提交的数据是交给login来处理,其实login是一个Servlet的url。

 

 

8.在SRC中新建net.sk.servlet包,并且新建LoginServlet的java文件

代码如下:

package net.sk.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintStream;
import java.io.PrintWriter;

/**
 * 功能:登录处理控制器
 * 作者:烧烤
 * 日期:2019.11.25
 */
@WebServlet(name = "LoginServlet",value = "/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        //设置请求对象字符编码
        request.setCharacterEncoding("utf-8");
        //截取AJAX提交的登录数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //判断是否成功,返回不同的数据
        PrintWriter out = response.getWriter();
        if (username.equals("烧烤") && password.equals("123")) {
            //返回“success”
            out.print("success");
        } else {
            out.print("failure");
        }
        
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        doPost(request,response);
    }
}

9.创建登录成功和失败的页面

 

失败页面也是一样的道理,可以复制一遍代码。

运行结果:

采用AJAX,前端与后台只是交换数据,前端通过AJAX提交数据给后台,后台接收到数据进行相应处理,返回数据给前端,前端AJAX拿到后台返回的数据,根据数据不同进行页面的跳转,不像以前是后台来执行页面的跳转(通过重定向或同一请求转发)。

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值