so I have a website which handles multiple xhr requests. The problem is when I try and open a new tab on my website. It waits for the request to finish then loads the other tab. Why is that happening?
Related
I am trying to intercept all web requests using by Puppeteer-Sharp but it is not working properly if the request sent by IFrame which is located on the page. For instance, After navigated this link, I clicked the video link since the video is in the iframe(maybe this is not the cause, this is only my hypothesis), the new web requests sent by IFrame did not intercept but the others were intercepted. When I checked it on the Chrome Developer Tools I was able to see what I am looking for and also more requests.
By the way, I set Request Interception as true as below:
await page.SetRequestInterceptionAsync(true);
and I registered for the PageRequest event as below:
page.Request += Page_Request
Is there any other setting or missing setup?
my client side react app is running on http://localhost:3000 and my node js server is running on http://localhost:8080. When client url is loaded, it sends GET /auth/user 304 0.494 ms - - fetch ajax request to load user(on react componentDidMount function). Problem is, when typing 'l' on Safari browser and url is autofilled with 'http://localhost:3000', it is confirmed that my server get the same request as GET /auth/user, before I even press enter key and before the client page is loaded. In Chrome it doesn't. Why Safari browser sends ajax request when user didn't visit the page and just typed part of its url? Is it a designed behavior?
As a result of tracking the reason for 6 hours. I figured out Safari implements cached ajax request differently from other web browsers. When Safari has client url data which has records of requesting ajax to external api, Safari sends the same ajax request just before user visits the client url page(when url is being typed and auto-suggested) to check if the response is 200(different) or 304(same). If the response is 304(same) and client page is loaded actually, Safari doesn't send ajax request again. This can be very annoying in the user login process, because the user data is loaded before actual authentication process is complete(user data response is 304), so client app remains unauthenticated when browser is authenticated. The solution I landed was adding an extra query parameter when fetching user data( '${root}/auth/user?' + 'nocache= new Date.getTime()' ) to prevent Caching AJAX in Safari browser. Hope it helps someone who faces the same problem.
Now we can edit the xhr request using Network tab of browser inspector.
A sample image -Image showing browser network tab.
Here we can change the xhr request parameter and can resend again. Some times this may affect our website security. How to restrict this?.
I just started studying Ajax and I totally have not idea what AJAX is. What is the difference between asynchronous and synchronous request? I would like to seek a very simple example demonstrating their differences.
AJAX short for Asynchronous JavaScript And XML is a programming language. It typically involves sending HTTP requests from client to server and processing the server's response, without reloading the entire page. This process is asynchronous. Comparing to synchronous request which blocks the client until operation completes, asynchronous HTTP is more efficient and user-friendly.
Take very simple example, when you are signing up on a commercial website, you can know whether your username is available or not once you finish typing the name. If the username was used already, the website will give you a reminder that your username is used on the same web page. This is the application of AJAX, so you don't need to complete the whole form and click the submit button to know that your username is not available.
AJAX uses two components for request process and display:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
It begins with an event occurs in a web page, such as a button is clicked. Then an XMLHttpRequest object is created by JavaScript, followed by sending a request to a web server. Once the web server receives the request, it will process it and send a response back to the web page. Then the webpage utilizes JavaScript to perform update of the web page without reloading the whole page.
AJAX stands for Asynchronous JavaScript And XML
Ajax main purpose is the loading data from the server without refreshing the web page
It's works in the background thread without interrupting UI thread
AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
A browser built-in XMLHttpRequest object which is used to request data from a web server
Example
when you are filling any kind of online form that time observe one thing there is option for country,state,district.
In this country drop down initially filled with data but state and district's are empty.
when you select a country like India then Asynchronous call goes to server and fetch the data of state drop down respective to selected country and so on.
when AJAX request fetching the data for the state drop down you are eligible to work with other parts of the form.
I'm developing web application that uses AJAX a lot. It sends several AJAX requests to server per second and update page's content based on the request result.
Is there a way I can save all responses sent from server to browser using AJAX to disc in order to analyze it later?
It is not good to make 'alert' after each request because there are too many requests and I'll not be able to see if the browser works well in this case.
I've tried to use firebug or greasemonkey for Firefox but I failed to save data to disk using them.
Is there any solution for it? Thanks for your help.
Have you tried Fiddler?
It's an application which monitors all http traffic. It's good, and it's free.