第十三周

最新推荐文章于 2021-12-16 13:45:00 发布

hallodyc

最新推荐文章于 2021-12-16 13:45:00 发布

阅读量466

点赞数

本文链接：https://blog.csdn.net/hollp_to/article/details/103232838

版权

一、AJAX概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

演示
在这里插入图片描述 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>AJAX演示</title>
  </head>
  <body>
  <ol>
    <li>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。</li>
    <li>AJAX 不是新的编程语言，而是一种使用现有标准的新方法。</li>
    <li>AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。</li>
    <li>AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。</li>
  </ol>
  </body>
</html>

在这里插入图片描述
userlist.txt

01 李红玉 15890903456<br/>
02 邓益春 18682825659<br/>
03 张枫林 18067567890<br/>
04 非常好 12312312312<br/>
05 刘国淞 18812345266<br/>

getUserList.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest){
                //IE7+, Firefox ,Chrome ,Opera , Safar浏览器里执行代码
                xmlhttp = new XMLHttpRequest();
            }else {
                //IE5,IE6浏览器里执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //新建HTTP请求，采用GET方式，请求采用异步方式true
            xmlhttp.open("GET","/AjaxDemo/data/userlist.txt",true);
            //发送HTTP请求,不传递参数
            xmlhttp.send(null);

            //监听请求状态的变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功
                if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
                    //利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" οnclick="loadUserList()">获取用户列表</button>
</body>
</html>

在这里插入图片描述 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 {
                // IE5， IE6 浏览器里执行代码
                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请求，采用POST方式，请求采用异步方式
            xmlhttp.open("POST", "/AjaxDemo/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;&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>

在这里插入图片描述
getJSONData.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从后台获取JSON数据</title>
    <script>
        function getJsonData() {
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();

            }else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var responseText = xmlhttp.responseText;
                    document.getElementById("json_data").innerText = responseText;
                    document.getElementById("btnParse").hidden = false;
                }
            }
            // 新建一个HTTP请求，采用GET方式，请求采用异步方式
            xmlhttp.open("GET", "/AjaxDemo/getJson", true);
            // 发送HTTP请求，不传递数据
            xmlhttp.send();
        }

    </script>
</head>
<body>
<h3>从后台获取JSON数据</h3>
<button type="button" onclick="getJsonData()">获取JSON数据</button>
<div id="json_data"></div>
<button id="btnParse" type="button" onclick="parseJsonData()" hidden="hidden">解析JSON数据</button>
<div id="parse_json_data"></div>
<script>
    function parseJsonData() {
        var strJson = document.getElementById("json_data").innerText;
        var objJson = JSON.parse(strJson);
        var data = "";
        for (var key in objJson) {
            data = data + key + ": " + objJson[key] + "<br/>";
        }
        document.getElementById("parse_json_data").innerHTML = data;
    }
</script>
</body>
</html>

GetJsonServlet.java

package net.dyc.servlet;

import jdk.nashorn.internal.runtime.JSONFunctions;

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.PrintWriter;

/**
 * 功能：获取JSON数据控制程序
 * 作者：邓益春
 * 日期：2019年11月25日
 */
@WebServlet(name = "GetJsonServlet", value = "/getJson")
public class GetJsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 定义打印输出流对象
        PrintWriter out = response.getWriter();
        // 定义JSON字符串
        String strJson = "{\"username\": \"howard\", \"password\": \"903213\"}";
        // 向客户端返回JSON字符串
        out.write(strJson);
    }

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

在这里插入图片描述