[Java Web] AJAX

Posted 2020-12-27 arseneyao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Java Web] AJAX相关的知识，希望对你有一定的参考价值。

一、概述

AJAX全称Asynchronous javascript And XML，是一种创建交互式网页应用的开发技术。

在浏览器上的AJAX程序可以在不重新加载整个页面的情况下，以异步的方式与服务器通信并只更新页面的一部分。

其原理是通过浏览器的XHR对象向服务器发送异步请求并接收服务器的响应数据，然后通过JS操作DOM来实现动态局部刷新。

简单说AJAX是html/CSS/JS/XHR的集合。

二、XHR

AJAX的核心技术是XHR（即XMLHttpRequest），是浏览器的内置对象。其主要作用是在后台与服务器交换数据，该对象主要用于网页的局部刷新。

XHR可以在不向服务器提交整个页面的情况下，实现页面的局部刷新。当页面加载完毕后，客户端通过该对象向服务器请求数据，再接收服务器的响应数据。

XHR可以同步或异步地返回服务器响应，并以文本或DOM的形式返回内容。

XHR提供了一系列属性用于访问该对象的具体参数。

1.readyState属性用于描述对象的当前状态：(readyState的变化触发onreadystatechange事件）

数值	描述
0	XHR对象已建立但未初始化
1	服务器连接已建立
2	请求已发送但未收到响应
3	请求处理中但只接收了部分数据
4	请求已经完成且响应已就绪

2.responeText属性用于保存响应信息，与readyState的变化同步。

3.responeXML属性用于保存XML形式的响应数据，在请求完成之前为null。

4.status属性描述了HTTP的状态，仅当请求已经开始处理后才能获取。

状态码	描述
200	OK
304	缓存
403	无权限
404	Not Found
501	服务器级别错误

5.statusText属性为status属性的状态代码文本，同样仅当请求处理开始后才能获取。

XHR提供的方法主要用于初始化和处理HTTP请求。

open：初始化XHR对象
send：发送请求到服务端
setRequestHeader：设置请求的头部信息
getResponeHeader：获取响应的头部信息
getAllResponeHeaders：获取响应的所有头部信息
abort：终于与XHR对象的请求并将该对象恢复到未初始化状态

三、实例

处理GET请求。

//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<body>
<script language="JavaScript">
    function getXHR() {
        let req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                document.getElementById("ajax-test").innerText = req.responseText;
            }
        };
        req.open("GET", "MyServlet?text=Hello World!", true);
        req.send();
    }
</script>
<input type="button" value="GET" onclick="getXHR()">
<div id="ajax-test"></div>
</body>
</html>




//MyServlet.java
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;

@WebServlet(urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String reqText = req.getParameter("text");
        String respText = reqText.toUpperCase();
        resp.getWriter().write(respText);
    }
}

View Code

处理POST请求。

//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <script>
        function postXHR() {
            let req = new XMLHttpRequest();
            req.onreadystatechange = function () {
                if (req.readyState === 4 && req.status === 200) {
                    document.getElementById("ajax-test").innerHTML = req.responseText;
                }
            };
            let name = document.getElementById("name").value;
            let pass = document.getElementById("pass").value;

            req.open("POST", "MyServlet", true);
            let params = "name=" + name + "&pass=" + pass;
            req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            req.send(params);
        }
    </script>
</head>
<body>
用户：<input type="text" id="name" placeholder=""><br/>
密码：<input type="password" id="pass" placeholder=""><br/>
<input type="button" value="提交" onclick="postXHR()"><br/>
<div id="ajax-test"></div>
</body>
</html>




//MyServlet.java
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 = "/MyServlet")
public class MyServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String pass = req.getParameter("pass");
        PrintWriter out = resp.getWriter();
        out.write(String.format("User: %s<br/>", name));
        out.write(String.format("Pass: %s<br/>", pass));
    }
}

View Code

获取XML形式响应。

//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
</head>
<body>
<script language="JavaScript">
    function loadXMLDoc() {
        let req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                let nodes = req.responseXML.getElementsByTagName("student");
                let str = "";
                for (let i = 0; i < nodes.length; i++) {
                    str += nodes[i].getAttribute("id") + ": "
                        + nodes[i].childNodes[1].textContent + "<br/>";
                }
                document.getElementById("ajax-test").innerHTML = str;
            }
        };
        req.open("GET", "MyServlet", true);
        req.send();
    }

    loadXMLDoc();
</script>
<div id="ajax-test"></div>
</body>
</html>




//test.xml
<?xml version="1.0" encoding="UTF-8" ?>
<class>
    <student id="30">
        <name>Stephen Curry</name>
    </student>
    <student id="35">
        <name>Kevin Durant</name>
    </student>
    <student id="11">
        <name>Klay Tompson</name>
    </student>
    <student id="23">
        <name>Draymond Green</name>
    </student>
    <student id="0">
        <name>DeMarcus Cousins</name>
    </student>
</class>




//MyServlet.java
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.File;
import java.io.FileInputStream;
import java.io.IOException;

@WebServlet(urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        File doc = new File("C:\Users\User\IdeaProjects\Project\web\WEB-INF\test.xml");
        byte[] buffer = new byte[(int) doc.length()];
        try (FileInputStream in = new FileInputStream(doc)) {
            int size = in.read(buffer);
            System.out.println("XML Bytes: " + size);
        }

        String content = new String(buffer);
        System.out.println("XML Content:
" + content);

        resp.setContentType("text/xml;charset=UTF-8");
        resp.getWriter().write(content);
    }
}

View Code

以上是关于[Java Web] AJAX的主要内容，如果未能解决你的问题，请参考以下文章

十条jQuery代码片段助力Web开发效率提升

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段

在java Web中如何用Ajax实现用户名已存在

Javascript代码片段在drupal中不起作用