面试题 -- Ajax实现原理

最新推荐文章于 2022-03-19 23:05:33 发布

且听深林细雨

最新推荐文章于 2022-03-19 23:05:33 发布

阅读量1.3k

点赞数 1

分类专栏：笔记精通Java面试题 Java 学习记文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/qq_43098690/article/details/122200445

版权

笔记同时被 3 个专栏收录

69 篇文章 0 订阅

订阅专栏

Java 学习记

66 篇文章 1 订阅

订阅专栏

精通Java面试题

12 篇文章 1 订阅

订阅专栏

学习目标：

明白Ajax 实现原理
异步操作 – 在不影响主观操作的情况下，做了些其他的服务

Ajax简介：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。

现在允许浏览器与务器通信而无须刷新当前页面的技术到叫做ajax。

Ajax：一种不用刷新整个页面便可与服务器通讯的办法。

Ajax优点：

Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。

Ajax原理

Ajax的原理：简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
注意： IE 要用ActiveXObject

下面是个人写的一部分代码(可以不看)

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/28
  Time: 13:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>

<%--  关于Ajax 的学习--%>
<script type="text/javascript">
    function test() {
        // 发送异步请求
        // 1.创建XMLHTTPRequest 对象
        var xmlHttp;
        if (window.XMLHttpRequest) {
            //非IE
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.打开链接
        var uname = document.getElementById("username").value;
        xmlHttp.open("get", "/testUname?username=" + uname, true)
        // 3.指定回调函数
        xmlHttp.onreadystatechange = function () {
            //3.1 判断状态
            if (xmlHttp.readyState == 4) {
                //3.2 接受返回的数据
                var responseText = xmlHttp.responseText;
                document.getElementById("rs_username").innerHTML = responseText;
            }
        }
        // 4.发送数据
        xmlHttp.send();
    }
</script>
<body>
<a href="getStudents">查询学生列表</a>
<form>
    <h1> Ajax 测试的地方</h1><br>
    username:<input type="text" id="username" οnblur="test()"><span id="rs_username"></span>
</form>
</body>
</html>

Ajax 配合 servlet

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

@WebServlet(urlPatterns = "/testUname")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.接受参数
        String username = req.getParameter("username");
        // 解决乱码方式
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        if ("admin".equals(username)){
            writer.println("账户已经被注册");
        }else{
            writer.println("账户可用");
        }

    }
}