JS--AJAX获取HTML文本、获取JavaScript脚本

我就是我 2021-08-14 00:54 552阅读 0赞

#### 获取HTML文本 ####

设计响应信息为HTML字符串是一种常用方法，这样再客户端就可以直接使用innerHTML属性把获取的字符串插入到网页中。

示例：

<%--
      Created by IntelliJ IDEA.
      User: 19798
      Date: 2019/9/28
      Time: 9:39
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script> function createXMLHTTPObject() { var XMLHttpFactories = [//兼容不同浏览器和版本的创建函数数组 function () { return new XMLHttpRequest()}, function () { return new ActiveXObject("Msxml2.XMLHTTP")}, function () { return new ActiveXObject("Msxml3.XMLHTTP")}, function () { return new ActiveXObject("Microsoft.XMLHTTP")} ]; var xmlhttp = false; for(var i = 0; i < XMLHttpFactories.length; i++){ //尝试调用匿名函数，如果成功则返回XMLHttpRequest对象，否则继续调用下一个 try{ xmlhttp = XMLHttpFactories[i](); }catch (e) { continue; } break; } return xmlhttp; } </script>
    </head>
    <body>
        <h1>AJAX测试</h1>
        <button id="btn" value="btn" onclick="f()">按钮</button>
        <div id="grid"></div>
        <script> function f() { var ajax = createXMLHTTPObject(); ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ var o = document.getElementById("grid"); o.innerHTML = ajax.responseText; } } ajax.open("get", "response.jsp",false); ajax.send(); } </script>
    </body>
    </html>

response.jsp:

<%
        response.getWriter().write("<table border='1px'>" +
                "<tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>" +
                "<tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr>" +
                "</table>");
    %>

点击按钮：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
注意：再某些情况下，HTML字符串可能为客户端解析响应信息节省了一些JavaScript脚本，但是也带来了一些问题：

*  响应信息中包含大量无用的字符，响应数据会变得臃肿。因为HTML标记不含有 任何信息，完全可以把它们放置在客户端由JavaScript脚本负责生成。
 *  响应信息中包含的HTML结构无法有效利用，对于JavaScript脚本来说，它们仅仅是一堆字符串。同时结构和信息混合在一起，也不符合标准设计模式。

#### 获取JavaScript脚本 ####

可以设计响应信息为JavaScript代码，这里的代码与JSON数据不同，它是可以执行的命令或脚本。

示例：指定服务器端的JS函数

<h1>AJAX测试</h1>
     <button id="btn" value="btn" onclick="f()">按钮</button>
     <script>
         function f() { 
             var ajax = createXMLHTTPObject();
             ajax.onreadystatechange = function(){ 
                 if(ajax.readyState == 4 && ajax.status == 200){ 
                     var info = ajax.responseText;
                     var o = eval("(" + info + ")" + "()");//调用eval()方法把JavaScript字符串转换为本地脚本
                     alert(o);//返回客户端当前日期
                 }
             }
             ajax.open("get", "response.js",true);
             ajax.send();
         }
     </script>

response.js:

function (){ 
       var d = new Date();
       return d.toString();
    }

点击按钮，弹出提示信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
注意：在转换时应在字符串签后附加两个小括号：一个包含函数结构体、一个是表示调用函数的。一般很少使用JavaScript代码作为响应信息的格式，因为它不能传递更丰富的信息，同时JavaScript脚本容易引发安全隐患。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/5d7ce2a65831420b919ab142d6718d2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/acbdf30aa06d4d7b9292c968e1bccca5.png