Develop Reference

Debug javascript from a generated page

In my application I made some computing server side with a Javascript interpreter. I'd like to take advantage from F12 debug engine in my browser chroome to let the user debug his scripts. To do that a generare a new page and open it in a new window
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/test/tipoManufatto", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var new_window = window.open(null, '');
new_window.document.write(this.responseText);
}
};
xhttp.send(JSON.stringify($scope.tc.selected));
the page is generated correctly and the server side generated scripts runs fine but if get into F12 tools
I cannot see my script in the source tab therefore I cannot set any breakpoints.
Is there a better way to open a dynamically generated page in a new window? I need to generate the page from the back-end with a POST verb in order to send some data.
Here is what my network tabs looks like

XHR Request works only partly in Firefox Extension

My Request looks as follows:(obviously with a different url, which is different from the visited page)
var url = "https://example.com/example.json"
var request = new XMLHttpRequest()
request.onreadystatechange = function () {
if (this.readyState == 4 || this.status == 200) {
console.log(this.readyState, this.status)
var arr = JSON.parse(this.response)
// Do stuff with the response...
}
};
request.open("GET", url)
request.send()
In Chrome it always works.
In Firefox it works when i execute it in the popup.js of the Addon (included in the extension popup.html, but it doesnt work in the content script, what? :o
From the Console Log im getting Status 0 when its executed from the content script.
Is there any small workaround to make it work? I mean isnt this just very basic stuff...?
I also tried Javascript fetch, but there i have the exact same Problem.... :/

Link triggering XMLHttpRequest

I have made a simple XMLHttpRequest which does work, it sends request etc. Just like in W3 schools.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demox").innerHTML = this.responseText;
}
};
xhttp.open("POST", "textx.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=" + textxx);
}
The problem starts when I try to trigger the request by clicking a link, which sends me to the php file which processes the request. I find it hard to understand on my current level why it doesn't work, since it worked with simple forms and such.
I get:
"Notice: Undefined index: fname ..."
So, I assume, it means the variable wasn't sent. Can someone explain? Or is there way to debug the things that are being sent from one page to another. All I found was a debugger in chrome which indeed captures the requests, but has no real use, since I get sent to the textx.php page and all is lost.

Not really sure, where your problem might be, maybe try:
var xhttp = new XMLHttpRequest();
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.open("POST", "textx.php", true);
xhttp.onreadystatechange = function() {
if (this.readyState === 4){
if(this.status===200 || this.status===0){
document.getElementById("demox").innerHTML = this.responseText;
}
};
var fname = "fname=" + textxx;
xhttp.send(fname);
}
You might console.log(xhttp); and see the step by step profile and find out where the problem might be.

Either way, I am still not sure, but I uploaded my page(code) to a hosting server and the code worked. PHP didn't show any warnings and all went as planned. The problem it seems has to do something with running a local server(WAMP). Changing PHP version didn't help. I may need to dig a little deeper on this.

JavaScript: How to access to a given URL without opening its web page in a browser

I would like to know if it is possible in JavaScript to access to a given URL without opening its web page in a browser . Actually, what I'm really trying to do is parsing through a page (given its URL) and clicking on the first link that it contains without even opening that web page in my browser. Is that doable with JavaScript. In case it is, how should I do that? What function (or functions) should I use? In case it is not, what would the alternative solutions be?

What you need is to make an HTTP request to the URL and process the results. You can do that in JavaScript using the XMLHttpRequest object. Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "put_the_URL_here", true);
xhttp.send();
However, it is easier to use a library like jQuery.Ajax for that:
$.ajax({
url: "put_the_URL_here",
context: document.body
}).success(function(data) {
console.log(data);
});
For this to work, the URL that you're trying to access must have CORS enabled.

Ajax & JavaScript | Limiting requests triggered by user

I am currently playing around with some Ajax code. I have come up with this scenario to try and mirror my problem to see if you, experts, can present a solution, thanks.
Scenario:
I have a HTML button like so: <p onclick="ajax_call();">Click</p>. Upon clicking this button it will launch an AJAX request to a php page like this:
function ajax_launch(){
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = ajax_launch_callback;
xmlhttp.open("POST", "/php_script", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function ajax_launch_callback(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// code to do something once response is here successfulyl
}
}
This then does some PHP code in the php_script file and returns an $output
Issue:
The php_script page that is called via AJAX is quiet heavy and makes several API and database calls making the page "slow" to load (which is perfectly fine). However at the moment, whilst the page is waiting for a response (it is still doing the php and not yet returned anything) a user can technically spam the button to launch many ajax calls. Ideally, this will just produce stress on the server and I need a way that once the request is pending and not come back, you cannot make further requests.
How can i achieve something like this?
Thanks in advance, looking forward for your solutions/consultation
ALSO:
By multiple requests, this is what i mean - see picture of when i spam click the button to launch several requests whilst the first one isn't done (not returned anything yet):
Image of chrome debugger (networks tab)

Although the mentioned javascript solutions here and in the linked question are a nice addition, you should really do this server-side as a spammer would not necessarily be using a browser and / or could have javascript disabled.
If you use sessions on the server, the session will be locked when a request is being processed so you will only process one request per user at a time. However, requests could queue up (that is perhaps what is showing in your networks tab data?) so you could complement that with a rate limit on for example the IP address.

You can try this:
var xmlhttp;
function ajax_launch() {
if (xmlhttp && xmlhttp.readyState == 4 || !xmlhttp) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = ajax_launch_callback;
xmlhttp.open("POST", "/php_script", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
}
function ajax_launch_callback() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// code to do something once response is here successfulyl
}
}

This things might be helpful:
Add this HTML
<div style="display: none;" id="screenblocker"> </div>
And this styles:
#screenblocker {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-color:#ffffff;
opacity:0.4;
filter:alpha(opacity=40);
z-index:9999999;
}
And script part:After the AJAX call
var e = document.getElementById('screenblocker');
if (e != null) {
e.style.display = 'block';
setTimeout("document.getElementById('screenblocker').style.display = 'none';", 5000);//considering 5 seconds to load, you can block longer if needed
}
And on AJAX success:
document.getElementById('screenblocker').style.display = 'none';