Geek Answers Handbook

Ajax javascript not doing proper execution

Using Ajax, I created a console that allows me to execute some PHP functions dynamically.

Looks like this screenshot

The problem is that after several console commands it becomes difficult to read. So I created a javascript function called "wipe ();" that clears the <div> containing the console.

I tested this feature with the chrome development tools (javascript console) and it works great.

But when I try to call this function, returning PHP-AJAX "<script> wipe (); </script>", it does not work. He does not do anything.

I read on the Internet that all "<script> </script>" work independently of each other, but you can call the <script>function</script> from another <script> </script> block .

So why is this failing?

here is the php code:

  echo '<script>wipe();</script>';

and here is the first <script> block:

  var xmlhttp = new XMLHttpRequest(); var span = document.getElementById("screen"); function send(data) { window.setInterval(function() { var elem = document.getElementById('screen'); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "./_rcons-transmetter.php?data="+data, true) xmlhttp.onloadend = function() { span.innerHTML = span.innerHTML+escapeHtml(data)+'<br>'+xmlhttp.responseText+'<br><br>'; } xmlhttp.send(); } function wipe(){ span.innerHTML = ''; }
+5
source share
5 answers

To avoid security issues (such as cross-site scripting ), HTML5 indicates that the <script> tag inserted through innerHTML should not be executed .

The way to execute the script is to evaluate the html using eval () . Be careful: using eval can be dangerous.

 var xmlhttp = new XMLHttpRequest(); var span = document.getElementById("screen"); function send(data) { window.setInterval(function() { var elem = document.getElementById('screen'); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "./_rcons-transmetter.php?data=" + data, true) xmlhttp.onloadend = function() { span.innerHTML = span.innerHTML + escapeHtml(data) + '<br>' + xmlhttp.responseText + '<br><br>'; evalJSFromHtml(span.innerHTML); } xmlhttp.send(); } function wipe() { span.innerHTML = ''; } function evalJSFromHtml(html) { var newElement = document.createElement('div'); newElement.innerHTML = html; var scripts = newElement.getElementsByTagName("script"); for (var i = 0; i < scripts.length; ++i) { var script = scripts[i]; eval(script.innerHTML); } } }
+2
source

Call the erase function as a callback function directly from the send function. Check status = 200 to respond to success.

 var xmlhttp = new XMLHttpRequest(); var span = document.getElementById("screen"); function send(data) { window.setInterval(function() { var elem = document.getElementById('screen'); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "./_rcons-transmetter.php?data="+data, true) xmlhttp.onloadend = function() { span.innerHTML = span.innerHTML+escapeHtml(data)+'<br>'+xmlhttp.responseText+'<br><br>'; } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { wipe(); // 'Wipe' callback function } } xmlhttp.send(); } function wipe(){ span.innerHTML = ''; }
0
source

But when I try to call this function, returning PHP-AJAX "wipe ();", this will not work. He does not do anything.

try creating a script tag and add to the document, and not modify the internal html.

 var spaScript = document.getElementById("spaScript"); var wraper = document.createElement("div"); wraper.innerHTML = xmlhttp.responseText; var script = document.createElement("script"); script.innerHTML = wraper.getElementsByTagName("script")[0].innerHTML; spaScript.appendChild(script);
0
source

Check if wipe() in the input and if it calls it instead of ajax call

  var xmlhttp = new XMLHttpRequest(); var span = document.getElementById("screen"); function send(data) { if (data.indexOf('wipe()') == -1) { window.setInterval(function() { var elem = document.getElementById('screen'); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "./_rcons-transmetter.php?data=" + data, true) xmlhttp.onloadend = function() { span.innerHTML = span.innerHTML + escapeHtml(data) + '<br>' + xmlhttp.responseText + '<br><br>'; } xmlhttp.send(); } } else { wipe(); }; } function wipe() { span.innerHTML = ''; }
0
source

inserting a script tag directly inside an element should not work (and, incidentally, it generates an error in the console).

Using the built-in function eval () in the response text without specifying the tag attribute should solve the problem.

server side

 echo 'wipe()';

on the client side

 eval(xmlhttp.responseText)
-1
source

More articles:


All Articles