inject jsp with js result into html>body>div

374 Views Asked by robyp7 At 23 May 2020 at 12:53

My question is: Could insert a jsp response (html) in html? I think using XmlHttpRequest.

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
      this.responseText;
  }
};
xhttp.open("GET", "ajax_info.jsp", true);
xhttp.send();

My question is: But if I have javascript in my jsp that it executes after page loading, is it executed like when I call jsp directly by browser url?

Thanks in advance

For example: This is index.html

<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="loadInfo();">

<div id="container"></div>
</body>

This is app.js:

function loadInfo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("container").innerHTML =this.responseText;
    }
  };
  xhttp.open("GET", "info.html", true);
  xhttp.send();
}

This is info.html (i have jsp but i think it is the same..):

<html>
<head>
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="body_info">This is info..</div>
<script type="text/javascript" >
  console.log("wait for info..");
  info();
</script>
</body>

This is info.js:

function info(){

    document.getElementById("body_info").innerHTML ="info.js is executed";
}

If i call info.html, typing url in browser(example http://localhost:8000/info.html), the script is executed and i get "info.js is executed",instead if i call index.html, maybe the xhr request not return the same but I see "This is info".

how can i resolve and accomplish this problem using xhr?

Thanks
Roberto

Original Q&A

There are 1 best solutions below

Swati On 24 May 2020 at 12:11

When you make ajax called to some page so what ever will there under <body></body> will return as response so in your code this.responseText will be having <script></script> code in it also. You can check if you are using chrome then click on element tab you will see <script></script> also which is return as response .Now,to execute this you can do like below :

function loadInfo() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("container").innerHTML = this.responseText;
      //getting the script which is return as response back 
      var datas = document.getElementById("container").getElementsByTagName("script");
      //looping  unders <script></script>
      for (var i = 0; i < datas.length; i++) {
        console.log("inside script executing")
        eval(datas[i].innerText); //executing script
      }
    }
  };
  xhttp.open("GET", "n.html", true);
  xhttp.send();
}

And your script for info.html look like below :

<script>
console.log("wait for info..");
info();

function info() {
 document.getElementById("body_info").innerHTML = "info.js is executed";
}
</script>

inject jsp with js result into html>body>div

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in JSP

Related Questions in XMLHTTPREQUEST

Related Questions in ES5-COMPATIBLITY

Trending Questions

Popular # Hahtags

Popular Questions