Google Chrome show ajax response - google-chrome

I am using Google Chrome Developer Tools to try to see the response of some AJAX url's.
The problem is that when I click on the NETWORK TAB, then on the link, then on RESPONSE, I see this text : "THIS REQUEST HAS NO RESPONSE DATA AVAILABLE".
I have been using FIREBUG and I am 100% sure there is a response from that page.
Can somebody help with this ?
Thank you !

You can try manually checking if there's a response or not
So, generally when dealing with ajax, in most cases we use the POST, You can create a 'same structured' page to handle same input/response but using Get method and print the output data as normal.
This way you can see if there's any response/errors in your script very easily

Related

See HTML response in chrome network

Hello when I send my html page with google chrome I can't see the path in the link Bar Though I use the method get and when I open the network angle I can't find the query request either enter image description here
On the first view is see that your request goes again a html page. Then you will get as response the html. But i suggest you will send some data. Then you have to add in every form element a name selector. Like <input name="username" ...>.
Then you need a endpoint which can handle your request. A HTML side cant do that. You need a serverside endpoint. Like api.php etc.

Facebook graph api syntax

I successfully able to pull from facebook by setting my url as
var fburl = "https://graph.facebook.com/357548020948379/posts?access_token=XXXXX";
Now when I try to pass on some fields for posts such as full_picture, message, and permalink it gives me a 400 error.
meanwhile I was able to do it in facebook's developer tool. The below line was generated by facebook graph api explorer.
I think I did something syntactically wrong? Also should I use javascript SDK from facebook or I'm fine with using ajax via jquery like I normally would?
var fburl = "https://graph.facebook.com/v2.5/357548020948379/?fields=posts%7Bfull_picture%2Cmessage%2Cpermalink_url%7D&access_token=XXXXX"
Alright I figured it out.
For those who are new to this and worry about syntax. Head over to facebook graph explorer and at the end of the page there's a button called "get codes" then look for curl version of it, strip all the unnecessary stuff and you have got your url.
I should point out to access facebook json object is usually pretty deep down. I simply play around with console log until I get it to out put what I want.
I had to go as deep as console.log(data.posts.data[2].message) to get to my data.

Chrome sends two requests when downloading a PDF (and cancels one of them)

I noticed that whenever you download a PDF in Chrome, it consistently makes two requests, and then cancels one of them. This is causing the request to be registered twice in my Web app, which don't want. Is there a way to get Chrome to only make one request for PDFs?
I've researched this topic quite a bit now, and I have not found a sufficient answer. Closely-related answers suggest that the problem is that Chrome is looking for a favicon, but the network tab shows that it is actually making the same request twice, and then canceling the second request.
Is there a way to prevent Chrome from making the second request?
Below is a link to a random PDF file that I found through Google which when clicked should demonstrates the behavior. I would've posted a picture of my network tab in devtools but this is my first post on Stack Overflow, and the site is prohibiting me from uploading a picture.
https://www.adobe.com/enterprise/accessibility/pdfs/acro6_pg_ue.pdf
It looks like a bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=587709
The problem is that Chrome, when it loads an iframe that returns a PDF stream, writes an "embed" tag inside that iframe which again contains the same URL as the iframe. This triggers a request for that URL again, but Chrome immediately cancels it. (see the network tab)
But by that time, the damage is done.
We have the same issue here, and it does not occur in Firefox or IE.
We're still looking for a good solution to this problem.
I'm still trying to find a proper solution but as a partial "fix" for now you could have two options
1) set the content disposition to "attachment" in the header
setting that to "inline" cause chrome to run a second cancelled call
so for example you can do something like that (nodejs resp in example)
res.writeHead(200, {
'Content-Type' : 'application/pdf',
'Access-Control-Allow-Origin' : '*',
'Content-Disposition' : 'attachment; filename=print.pdf'
});
unfortunately this solution will force the browser to download the pdf straight away instead of rendering it inline and that's not maybe desiderable
2) adding "expires" in the headers
this solution will always fire a second cancelled call but it's ignored by the server
so for example you can do something like that (nodejs resp in example)
res.writeHead(200, {
'Content-Type' : 'application/pdf',
'Access-Control-Allow-Origin' : '*',
'Content-Disposition' : 'inline; filename=print.pdf',
'Expires' : new Date(new Date().getTime() + (60000))
});
I had the same problem in an iframe. I turned of the PDF Viewer extension and the problem disappeared. I'm thinking the extension downloads the file twice. The first time to get the size, the second time to download with a progress bar (using the size gathered in the first request)
I've tried the other solutions and none worked for me, I'm a little late, I know, but just for the record, I solved this in the following manner:
Adding the download attribute:
In my case I was using a form, so it goes like this:
<form action="/package.zip" method="POST" download>
This worked on Brave and Safari, which previously showed the same problem, I think it will work for Chrome.
With my case, problem wasn't browser related. I've noticed our scrollbar plugin's (OverlayScrollbars) DOM manipulations reloads embedded pdf data and calls controller more than once due to on plugin's construct or destroy events. After I've initialized scrollbar before DOM is ready, problem is solved.

Using AJAX and return a picture

I have a problem receiving and opening a picture via AJAX.
If I call the following page:
http://127.0.0.1:8889/ex?sql=SELECT+Image+FROM+Persons+WHERE+Number+Like+%27%2501%27
a picture is displayed from a blob field in IE8.
Now I would like to open this into a div after someone pressed a key (using AJAX)?
Trying to use xhr.responseText does not work (I get an error. Using it on a text response works). So it seems that my problem is to grab the result from the ajax request.
How can I do this?
Some code and the error message:
var picReturn = xhr.responseText;
=> Could not continue due to the following error: c00ce514
You have three options:
Place the resultant data in an iframe. Not very practical.
Take the result and place it in am image source as a data:uri. Not supported in older browsers and limited to 32/64Kb depending on the browser.
Skip the AJAX and write a web service and use that as your url. This is the best option.
You don't say what language you're using server-side but you essentially want to open a web response, set the header to "image/jpeg" and return your stream.

Chrome extension, replace HTML in response code before browser displays it

i wonder if there is some way to do something like that:
If im on a specific site i want that some of javascript files to be loaded directly from my computer (f.e. file:///c:/test.js), not from the server.
For that i was thinking if there is a possibility to make an extension which could change HTML code in a response which browser gets right before displaying it. So whole process should look like that:
request is made
browser gets response from server
#response is changed# - this is the part when extension comes in
browser parse changed response and display page with that new response.
It doesnt even have to be a Chrome extension anyway. It should just do the job described above. It can block original file and serve another one (DNS/proxy?) or filter whole HTTP traffic in my computer and replace specific code to another one of matched response.
You can use the WebRequest API to achieve that. For example, you can add a onBeforeRequest listener and redirect some requests:
chrome.webRequest.onBeforeRequest.addListener(function(details)
{
var responseData = "<div>Some text</div>"
return {redirectUrl: "data:text/html," + encodeURIComponent(responseData)};
}, {urls: ["https://www.google.com/"]}, ["blocking"]);
This will display a <div> element with the text "some text" instead of the Google homepage. Note that you can only redirect to URLs that the web server itself is allowed to redirect to. This means that redirecting to file:/// URLs is not possible, and you can only redirect to files inside your extension if these are web accessible. data: and http: URLs work fine however.
In Windows you can use the Proxomitron (proxomitron.info) which is a local proxy that can intercept any page or file being loading into your browser and change it using regular expressions (no DOM parsing) however you want, before it is rendered by the browser.