I have a file where I send GET request to another file, and I got the response show up under Network tab of Google Dev Tools, but it did not display on my browser.
This is what I do for passing the response to display in my browser.
xmlhttp.onreadystatechange = function() {
if(this.readyState == 4){
res = xmlhttp.responseText;
document.getElementById('table3').innerHTML = res;
}
}
And I want to display the response under the table of id = "table3" like below.
<td id="table3">
<td>
The content inside was passing from the response of GET request.
Any help is appreciated. Thank you
I think that your if statement in the onreadystatechange callback is wrong. xmlhttp is the instance of the XHR class, which would mean that instead of using this, you would have to use xmlhttp, and not this. this in the context of your program likely is the window object.
Related
Let's say that I'm using a GET request on https://example.com and the response is this:
This is a response message.
How would I modify it in a way so that in my code, so that it can change the response to say something like this:
This is a MODIFIED response message.
For example, if my Electron app were to navigate to https://example.com, the screen would show me the modified content instead of the original content.
Essentially, I am trying to literally modify the request.
I have based my code off of this question but it only shows a proof of concept with a pre-typed Buffer, as in my situation I'd like modify the response instead of outright replacing it. So, my code looks like this:
protocol.interceptBufferProtocol("http", (req, CALLBACK) => {
if(req.url.includes("special url here")) {
var request = net.request({
method: req.method,
headers: req.headers,
url: req.url
});
request.on("response", (rp) => {
var d = [];
rp.on("data", c => d.push(c));
rp.on("end", () => {
var e = Buffer.concat(d);
console.log(e.toString());
// do SOMETHING with 'e', the response, then callback it.
CALLBACK(e);
});
});
request.end();
} else {
// Is supposedly going to carry out the request without interception
protocol.uninterceptProtocol("http");
}
}
This is supposed to manually request the URL, grab the response and return it. Without the protocol event, it works and gives me a response, but after some debugging, this piece of code consistently calls the same URL over and over with no response.
There is also the WebRequest API, but there is no way of modifying the response body, you can only modify the request headers & related content.
I haven't looked fully into Chromium-based solutions, but after looking at this, I'm not sure if it is possible to modify the response so it appears on my app's end in the first place. Additionally, I'm not familiar with the Chromium/Puppeteer messages that get sent all over the place.
Is there an elegant way to have Electron to get a URL response/request, call the URL using the headers/body/etc., then save & modify the response to appear different in Electron?
I am new to react js as well as node &express js. I just want to know a simple thing, If I have used the axios API for simply getting the response from backend via res.send() function and I want to display a div tag saying " backend responds" at the end of my submit button on the frontend in case I get a response from the backend.
I created a react component called Block which returned div tag but how to call that component after button that too when a response has arrived is a mystery to me.
Check out the screenshot of the code
You can use state to save the response received from Axios. Remember, you got to use response.data to retrieve data.
const submitReview = () => {
// Getting around CORS problem using cors-anywhere
Axios.get(
"your url here"
).then((response) => {
// You got to get 'data' from response.data
console.log(response.data);
setReview(response);
});
};
And in your render loop - check if you have successfully received response. I have used length of variable. You can use a boolean variable such as 'loaded' to indicate that you already have received the response.
<button onClick={submitReview}> Submit </button>
{review.length > 0 ? review : ""}
Check out complete example here
https://codesandbox.io/s/get-response-via-axios-api-and-display-it-as-dom-element-on-frontend-st0ht?file=/src/App.js:349-798
doing
var page_url = "http://skiferie.danskbilferie.dk/sidste_chance_uge7_norge_sverige.html";
http.get(page_url, (http_res) => {
var data = "";
http_res.on("data", function (chunk) {
data += chunk;
});
http_res.on("end", function () {
resolve({data});
});
});
get's the correct HTML from that page, but how can I wait for the table of deals to be filled?
as that page only fills the data I need after it loads, calling an ajax method to fill the data in... is there a wait for me to wait for such action to be completed?
To wait until ajax will be loaded, you need to add timeout for your request.
Your goal is to somehow tell script to wait for some period of time and than get rendered html.
You can implement such behavior as #GabrielBleu said, with puppeteer and here is nice tutorial with example: tutorial
Or with webdriver or you can try with this resource
How can an Omnibox extension create and post form data to a website and then display the result?
Here's an example of what I want to do. When you type lookup bieber into the Omnibox, I want my extension to post form data looking like
searchtype: all
searchterm: bieber
searchcount: 20
to the URL http://lookup.com/search
So that the browser will end up loading http://lookup.com/search with the results of the search.
This would be trivial if I could send the data in a GET, but lookup.com expects an HTTP POST. The only way I can think of is to inject a form into the current page and then submit it, but (a) that only works if there is a current page, and (b) it doesn't seem to work anyway (maybe permissions need to be set).
Before going off down that route, I figured that somebody else must at least have tried to do this before. Have you?
You could do this by using the omnibox api:
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
doYourLogic...
});
Once you have you extension 'activated' due to a certain keyword you typed you can call something like this:
var q = the params you wish to pass
var url = "http://yourSite.com";
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if (req.readyState == 4) {
callback(req.responseXML);
}
}
req.send(q);
I'd like to read (not modify) the response body for all requests that match some pattern in a Chrome extension. I'm currently using chrome.devtools.network.onRequestFinished, which gives you a Request object with a getContent() method. This works just fine, but of course requires the devtools to be open for the extension to work. Ideally the extension would be a popup, but chrome.webRequest.onCompleted doesn't seem to give access to the response body. There is a feature request to allow the webRequest API to edit response bodies - but can webRequest even read them? If not, is there any other way to read response bodies outside of devtools extensions?
The feature request you linked to implies that there is no support for reading either:
Unfortunately, this request is not trivial. (...) Regarding reading the Response Body: This is challenging from a performance perspective. (...) So overall, this is just not easy to achieve...
So, no, there doesn't seem to be a way for an extension to access network response bodies, except for devtools.
Here is what I did
I used the chrome.webRequest & requestBody to get the post requests body
I used a decoder the parse the body into a string
Here is an example
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
if(details.method == "POST")
// Use this to decode the body of your post
var postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
},
{urls: ["<all_urls>"]},
["blocking", "requestBody"]
);
If you have the this pattern of requests you can run something like that in your background.html file:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/" + yourStringForPattern, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var body = xhr.responseText;
// call some function to do something with the html body
}
}
xhr.send();