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

最新推荐文章于 2025-03-07 10:12:40 发布

原创最新推荐文章于 2025-03-07 10:12:40 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Web #Ajax获取HTML #Ajax获取JS脚本

JavaScript 同时被 2 个专栏收录

47 篇文章

订阅专栏

web

41 篇文章

订阅专栏

本文探讨了使用AJAX获取HTML响应及JavaScript脚本的方法，分析了将HTML文本作为响应信息的优缺点，并通过示例代码展示了如何在客户端处理这些响应。

获取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>");
%>

点击按钮：
在这里插入图片描述
注意：再某些情况下，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();
}

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