Struts 2与AJAX（第一部分）（二）-CSDN博客

本文链接：https://blog.csdn.net/liqiuguo/article/details/37696055

发布运行应用程序，在浏览器中键入： http://localhost:8080/Struts2_Ajax/JsonPlugin.action ，出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为“application/json”。把文件下载下来，用记事本打开，内容如下： {"ISBN":15645912,"comments":["It's no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}清单3 例子1输出的JSON串

当然这还不是一个完整的AJAX的例子，下面让我们写一个HTML文件将其完成，HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JSON Plugin</title>
    <script type="text/javascript">
    var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);

    if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
        function XMLHttpRequest() {
            var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                                 "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                                 "Microsoft.XMLHTTP"];

            for (var i=0; i < arrSignatures.length; i++) {
                try {
                    var oRequest = new ActiveXObject(arrSignatures[i]);
                    return oRequest;
                   } catch (oError) { /*ignore*/ }
               }

            throw new Error("MSXML is not installed on your system.");
           }
       }

    function retrieveBook() {
        if(bXmlHttpSupport) {
            var sUrl = 'JsonPlugin.action';
            var oRequest = new XMLHttpRequest();
               oRequest.onreadystatechange = function() {
                if(oRequest.readyState == 4) {
                    var oBook = eval('(' + oRequest.responseText + ')');
                    var bookHolder = document.getElementById('bookHolder');
                    var sBook = '<p><b>ISBN: </b>' + oBook.ISBN + '</p>';
                       sBook += ('<p><b>Title: </b>' + oBook.title + '</p>');
                       sBook += ('<p><b>Price: </b>$' + oBook.price + '</p>');
                       sBook += ('<b><i>Comments: </i></b><hr/>');
                    for(i = 0; i < oBook.comments.length; i++) {
                           sBook += ('<p><b>#' + (i + 1) + ' </b>' + oBook.comments[i] + '</p>');
                       }
                       bookHolder.innerHTML = sBook;
                   }
               };
               oRequest.open('POST', sUrl);
               oRequest.send(null);
           }
       }
    </script>
</head>
<body>
    <input type="button" value="Retrieve Book" οnclick="retrieveBook()" />
    <div id="bookHolder"></div>
</body>
</html>清单4 WebContent/JsonPlugin.html

以上代码中，我没有使用任何的AJAX的Javascript包，而是参考《Professional Javascript For Web Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。

打开http://localhost:8080/Struts2_Ajax/JsonPlugin.html，点击“Retrieve Book”按钮，页面如下图所示：

图1 JsonPlugin.html页面输出

Struts 2与Dojo

Dojo是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。

Struts 2基于Dojo编写一些AJAX标志（在Dojo中称为Widget），要使用这些标志的AJAX功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在<head>与</head>之间加入<s:head theme="ajax" />。当使用这些标志的AJAX功能，有些属性可能会经常用到，所以我会对这些属性稍作解释。

名称描述 href XHR（XMLHttpRequest）请求的地址 listenTopics 监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知<s:autocompleter />重新加载其备选项（Options） notifyTopics 完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget formId 需要提交到服务器的表单的ID formFilter 过滤表单字段的Javascript函数名称 indicator 在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等 表1 常用的AJAX标志属性