未从 AJAX 代码中的文件加载的动态内容答案

【问题标题】：dynamic content not loaded from file in AJAX code未从 AJAX 代码中的文件加载的动态内容
【发布时间】：2019-12-23 07:06:39
【问题描述】：

页面中未加载动态代码。仅当我再次重新加载程序时才会加载

在正文中尝试了 onload 事件。它仅在关闭并再次运行后才使用ajax代码从xml文件加载内容，而不是在同一个窗口中

<html>
<head>
    <script type="text/javascript">
        function hi(id)
        {

            document.getElementById(id).contentEditable=true;

        }
        function hello(id,data)
        {
            document.getElementById(id).contentEditable=false;
            var changedtext=document.getElementById(id).textContent;
           // alert(changedtext)
            data.value=changedtext;
           // alert(data)
        }
     function display(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this, i);
    }
};
xmlhttp.open("GET", "data.xml", true);
xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("home");
    document.getElementById("myid1").innerHTML =
    x[i].getElementsByTagName("topicsCovered") 
     [0].childNodes[0].nodeValue;
    document.getElementById("myid2").innerHTML =
    x[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue;
}
        </script>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0">
</head>
<body onload="display(0)">
    <form action="mybackend"  method="post">
        <input type="hidden" name="pdata" value="I am a paragraph">
        <input type="hidden" name="divdata" value="TODO write content">
    <div id="myid1">TODO write content</div>
<input type="button" value="edit me" onclick="hi('myid1')"/>
    <input type="button" value="save" 
onclick="hello('myid1',this.form.divdata)"/><br> 
<p id="myid2">I am a paragraph</p>  
   <input type="button" value="edit me" onclick="hi('myid2')"/>
<input type="button" value="save" 
onclick="hello('myid2',this.form.pdata)"/><br> 
<br>

<input type="submit" value="save all changes in the page">
     <div id="demo"></div>
        </form>
      </body>
     </html>

Servlet 代码

  protected void doPost(HttpServletRequest request, HttpServletResponse 
response)
        throws ServletException, IOException {
    try {
        // processRequest(request, response);
        String divvalue=request.getParameter("pdata");
        String pvalue=request.getParameter("divdata");


        PrintWriter out = response.getWriter();
        out.println(divvalue);
        out.println(pvalue);

        DocumentBuilderFactory builderFactory = 
       DocumentBuilderFactory.newInstance();
        DocumentBuilder docBuilder = builderFactory.newDocumentBuilder();
        //creating a new instance of a DOM to build a DOM tree.
        Document doc = docBuilder.newDocument();
        new mybackend().createXmlTree(doc,divvalue,pvalue);

        out.println("<b>Xml File Created Successfully</b>");
       // response.sendRedirect("index.html");
         response.sendRedirect("success.html");
      // new mybackend().callme(response);

      //  request.getRequestDispatcher("index.html").forward(request, 
  response);

       } catch (ParserConfigurationException ex) {
           Logger.getLogger(mybackend.class.getName()).log(Level.SEVERE, 
 null, ex);
    }


    }


  private void createXmlTree(Document doc,String divvalue,String pvalue) 
 {
       try {
          // throw new UnsupportedOperationException("Not supported 
  yet.");
        Element root = doc.createElement("home");
        //adding a node after the last child node of the specified node.
        doc.appendChild(root);

        Element child = doc.createElement("summary");
        root.appendChild(child);

        Text text = doc.createTextNode(divvalue);
        child.appendChild(text);


        Element child1 = doc.createElement("topicsCovered");
        root.appendChild(child1);

        Text text1 = doc.createTextNode(pvalue);
        child1.appendChild(text1);



        Element child2 = doc.createElement("whowillbenefit");
        root.appendChild(child2);


        //TransformerFactory instance is used to create Transformer 
      objects.
        TransformerFactory factory = TransformerFactory.newInstance();
        Transformer transformer = factory.newTransformer();

        transformer.setOutputProperty(OutputKeys.INDENT, "yes");

        // create string from xml tree
        StringWriter sw = new StringWriter();
        StreamResult result = new StreamResult(sw);
        DOMSource source = new DOMSource(doc);
        try {
            transformer.transform(source, result);
        } catch (TransformerException ex) {
            Logger.getLogger(mybackend.class.getName()).log(Level.SEVERE, 
    null, ex);
        }
        String xmlString = sw.toString();

        File file = new 
 File("C:\\Users\\csestaff\\Documents\\
 Gift\\Stigmata\\livedata\\livedata\\web 
    \\data.xml");
        BufferedWriter bw=null;
        try {
            bw = new BufferedWriter(new OutputStreamWriter(new 
  FileOutputStream(file)));

        bw.write(xmlString);
        bw.flush();
        bw.close();
        }catch(IOException e)
        {
            Logger.getLogger(mybackend.class.getName()).log(Level.SEVERE, 
 null, e);
        }

    } catch (TransformerConfigurationException ex) {
        Logger.getLogger(mybackend.class.getName()).log(Level.SEVERE, 
   null, ex);
    }



}

XML 文件

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <home>
 <summary>Praney is good</summary>
 <topicsCovered>Ruthra is good</topicsCovered>
 <whowillbenefit/>
 </home>

首先加载文件的内容，当我编辑它时，它只有在关闭并再次打开它之后才会再次加载它，而不是动态地

【问题讨论】：

您可以使用ctrl + F5 强制刷新您的应用程序。然后它重新加载包括脚本在内的所有内容。否则它会从浏览器缓存中获取文件。阅读此lifehacker.com/… 和refreshyourcache.com/en/cache。

标签： javascript html ajax servlets

【解决方案1】：

要在加载ajax时禁用浏览器的缓存，可以在请求URL中添加一些额外的数据，例如：

xmlhttp.open("GET", "data.xml?random=" + Date.now(), true);

【讨论】：