• Ajax技术

    一、概述

    全称：Asynchronous Javascript And XML

    主要用途：实现页面局部刷新

    执行流程：请求-》ajax引擎-》web服务器-》ajax引擎-》页面

    二、XMLHttpRequest对象

    1、创建该对象

    不同版本的浏览器，以不同形式支持XMLHttpRequest对象的创建：

    1. function createXHR(){
    2.  
    3.     const xhr_functions = [
    4.         function () {
    5.             return new XMLHttpRequest();
    6.         },
    7.         function () {
    8.             return new ActiveXObject("Msxml2.XMLHTTP");
    9.         },
    10.         function () {
    11.             return new ActiveXObject("Microsoft.XMLHTTP")
    12.         }
    13.     ];
    14.  
    15.     let xhr_obj;
    16.     for(let i = 0; i < xhr_functions.length; i++){
    17.         try{
    18.             xhr_obj = xhr_functions[i];
    19.         }catch(e){
    20.             continue;
    21.         }
    22.         break;
    23.     }
    24.     return xhr_obj;
    25. }

    或者

    1. function createXHR2(){
    2.  
    3.     let xmlHttpRequest;
    4.     if(window.XMLHttpRequest){
    5.         xmlHttpRequest = new XMLHttpRequest();
    6.     }else if(window.ActiveXObject){
    7.         try {
    8.             xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    9.         }catch (e) {
    10.             try {
    11.                 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    12.             }catch (e) {
    13.             }
    14.         }
    15.     }
    16.  
    17.     return xmlHttpRequest;
    18. }

    2、该对象常用方法

    ①创建一个HTTP请求

    1. open(method: string, url: string | URL): void;
    2. open(method: string, url: string | URL, async: boolean, username?: string | null, password?: string | null): void;

    ②发送请求 

    send(body?: Document | XMLHttpRequestBodyInit | null): void;

    ③设置请求头

    setRequestHeader(name: string, value: string): void;

     ④获取所有响应头

    getAllResponseHeaders(): string;

    ⑤获取某个响应头

    getResponseHeader(name: string): string | null;

     ⑥取消当前所发出的请求

    abort(): void;

    3、该对象常用属性

    ①readyState：当前请求的状态

    Value  State                                Description
    0       UNSENT               XMLHttpRequest client has been created. open() not called yet.
    1        OPENED                open() has been called.
    2        HEADERS_RECEIVED        send() has been called, and headers and status are available.
    3        LOADING                Downloading; responseText holds partial data.
    4        DONE                The operation is complete.

    ②  onreadystatechange: ((this: XMLHttpRequest, ev: Event) => any) | null;

    An event handler  that is called whenever the readyState attribute changes. 

    ③ readonly responseText: string;

    returns the text received from a server following a request being sent.

    ④ readonly responseXML: Document | null;

    returns a Document containing the HTML or XML retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as XML or HTML.

    ⑤ readonly status: number;

    returns the numerical HTTP status code  of the XMLHttpRequest's response.

    HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

    1. Informational responses (100–199)
    2. Successful responses (200–299)
    3. Redirection messages (300–399)
    4. Client error responses (400–499)
    5. Server error responses (500–599)

    ⑥ readonly statusText: string;

    returns a DOMString containing the response's status message as returned by the HTTP server. 

    三、Ajax应用

    1、打招呼

    创建sayHello.jsp,用于发起Ajax请求：

    1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    2. html>
    3. <html>
    4. <head>
    5.     <title>打招呼title>
    6.     <script type="text/javaScript" src="createRequest.js">script>
    7. head>
    8. <body>
    9.     <input type="button" onclick="sayHello()" value="打招呼">
    10.     
    11.     <span id="showHello">span>
    12. body>
    13. <script language="JavaScript">
    14.     let xmlRequest;
    15.     function sayHello(){
    16.         xmlRequest=createXHR();
    17.         xmlRequest.onreadystatechange=sayHelloCallBack;
    18.         xmlRequest.open("get","returnHello.jsp",true);
    19.         xmlRequest.send(null);
    20.     }
    21.  
    22.     function sayHelloCallBack(){
    23.         if (xmlRequest.readyState==4){
    24.             if(xmlRequest.status==200){
    25.                 let htmlText = xmlRequest.responseText;
    26.                 document.getElementById("showHello").innerText = htmlText;
    27.             }
    28.         }
    29.     }
    30. script>
    31. html>

    创建returnHello.jsp，用于响应Ajax请求并返回招呼内容：

    1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    2. <%="你好啊！"%>

    启动tomcat，在浏览器输入http://localhost:8080/demo1/sayHello.jsp ，点击“打招呼”按钮。

    2、判断用户是否已经注册过

    创建注册页面userRegister.jsp:

    1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    2. html>
    3. <html>
    4. <head>
    5.     <title>注册title>
    6.     <script type="text/javaScript" src="createRequest.js">script>
    7. head>
    8. <body>
    9. <form action="" method="post" name="form1">
    10.     用户名：<input type="text" name="userName" id="userName">
    11.     <input type="button" onclick="checkUserName(form1.userName.value)" value="检查用户名"><br>
    12.     密码：<input type="text" name="password"><br>
    13.     <input type="submit" value="注册">
    14. form>
    15. <span id="checkMsg">span>
    16. body>
    17. <script language="JavaScript">
    18.     let xhr;
    19.     function checkUserName(username){
    20.         xhr = createXHR();
    21.         let url = "userCheck.jsp?username=" + username;
    22.         xhr.open("get",url,true);
    23.         xhr.onreadystatechange=getCheckResult;
    24.         xhr.send(null);
    25.     }
    26.  
    27.     function getCheckResult(){
    28.         if (xhr.readyState==4){
    29.             if (xhr.status==200){
    30.                 document.getElementById("checkMsg").innerHTML=xhr.responseText;
    31.             }
    32.         }
    33.     }
    34. script>
    35. html>

    创建userCheck.jsp，用于判断用户名是否已注册：

    1. <%@ page import="java.util.Arrays" %>
    2. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    3. <%
    4.     String[] usernames={"a","b","c"};
    5.     String username= request.getParameter("username");
    6.     Arrays.sort(usernames);
    7.     if (Arrays.binarySearch(usernames,username) > -1){
    8.         out.println("该用户已经被注册");
    9.     }else {
    10.         out.println("该用户名可以被注册");
    11.     }
    12. %>

     启动tomcat，在浏览器输入http://localhost:8080/demo1/userRegister.jsp

    3、解析XML数据

    XMLHttpRequest对象请求获取XML文件，通过属性responseXML(Document对象)接收XML数据，然后采用DOM的方式解析。

    创建xml文件book.xml:

    2. <allBook>
    3.     <book>
    4.         <no>1no>
    5.         <name>on javaname>
    6.     book>
    7.     <book>
    8.         <no>2no>
    9.         <name>最后的讲义name>
    10.     book>
    11.     <book>
    12.         <no>3no>
    13.         <name>baobaoyangyuname>
    14.     book>
    15.     <book>
    16.         <no>4no>
    17.         <name>springname>
    18.     book>
    19. allBook>

    创建book.jsp,用于请求获取book.xml并解析：

    1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    2. html>
    3. <html>
    4. <head>
    5.     <title>书title>
    6.     <script type="text/javaScript" src="createRequest.js">script>
    7. head>
    8. <body>
    9.     <input type="button" onclick="showBookInfo()" value="获取书的信息"><br>
    10.     
    11.     <span id="bookinfo">span>
    12. body>
    13. <script language="JavaScript">
    14.     let xmlRequest;
    15.     function showBookInfo(){
    16.         xmlRequest=createXHR();
    17.         xmlRequest.onreadystatechange=getXMLResult;
    18.         xmlRequest.open("get","book.xml",true);
    19.         xmlRequest.send(null);
    20.     }
    21.  
    22.     function getXMLResult(){
    23.         if (xmlRequest.readyState==4){
    24.             if(xmlRequest.status==200){
    25.                 let allBook = xmlRequest.responseXML.getElementsByTagName("book");
    26.                 let html="";
    27.                 for (let i =0;ilength;i++){
    28.                     let book = allBook[i];
    29.                     let no = book.getElementsByTagName("no")[0].firstChild.nodeValue;
    30.                     let name = book.getElementsByTagName("name")[0].firstChild.nodeValue;
    31.                     html = html +"no:"+no+"name:"+name+"
      "      ;
    32.                 }
    33.                 document.getElementById("bookinfo").innerHTML = html;
    34.             }
    35.         }
    36.     }
    37. script>
    38. html>

    4、解决中文乱码问题

    Ajax不支持多种字符集，默认的字符集是UTF-8.

    ①获取请求参数时出现乱码，解决如下：

    1.     String username= request.getParameter("username");
    2.     username=new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);

    ②获取响应时出现乱码，解决如下：

    保证从服务端返回的数据采用UTF-8即可。

    参考：

    XMLHttpRequest简单介绍 - 知乎

    XMLHttpRequest 详解_杰鹏的梦的博客-CSDN博客_xmlhttprequest

  • 相关阅读:
    JS 事件
    openjudge_2.5基本算法之搜索_1789:算24
    JSP页面中page指令有哪些属性及方法可使用呢？
    概率论与数理统计
    【JavaSE】面向对象——属性和方法
    《网络安全笔记》第十二章：二进制基础
    Python sort 自定义函数排序
    利用FastAPI和OpenAI-Whisper打造高效的语音转录服务
    基于NVIDIA的deepstream进行串行多任务模型开发，DeepStream 多模型组合检测（精）
    栈、队列和数组
  • 原文地址：https://blog.csdn.net/daqi1983/article/details/125802038