Detecting a targeted POST event in JavaScript without any libraries

In a situation I'm facing, an AngularJS website is not loading jQuery (except for jQLite). My goal is to monitor events with particular parameters.

Unfortunately, I'm unable to make any changes to the source code. However, by examining the event in the developer console, it appears to be a POST event directed to a specific URL: https://example.com/ajax/leadgen

I am specifically interested in detecting when this POST event includes certain parameters such as: - leadType = 25 - pageID = abcd

I have explored various possibilities using addEventListener, but implementing this solution in my current scenario has proven to be challenging.

javascriptajaxangularjs

Answer №1

To effectively monitor the XMLHttpRequest object, you will need to override its functions so that you can track the call being initiated.

// Preserve the original methods
XMLHttpRequest.prototype._send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype._open = XMLHttpRequest.prototype.open;

// Override the open function
XMLHttpRequest.prototype.open = function () {
   this._url = arguments[1];  // Store the URL being opened
   this._open.apply(this, arguments);  // Call the original open method with arguments
};

// Override the send function
XMLHttpRequest.prototype.send = function () {
   // Implement your custom logic here
   console.log(this._url, arguments ? arguments[0] : null);  // Access the stored URL and arguments passed to send
   this._send.apply(this, arguments); // Call the original send method with arguments
};

// Test an Ajax request
var xhr = new XMLHttpRequest();
xhr.open("POST", window.location.href, true);
xhr.send("a=b");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

javascripthtmlcssreactjs

"Delightful Data Display: Achieving Ajax Triumph with

When I include the success function in my DataTable, the rows do not automatically fill up in the table. However, when I remove the success function everything works correctly, and the datatable fills with data as expected. I am trying to retrieve a messag ...

javascriptjqueryajax

You may encounter issues with invoking methods on a JavaScript object in Node.js after using res.send for response sending

Exploring Context and Design Overview Currently, I am utilizing a library known as Tiff.js to seamlessly load Tiff images on a designated webpage. The usage of this library extends both to the server-side and client-side functionalities. On the server end ...

javascriptangularjsnode.jsexpress

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

javascriptjqueryhtmlcssfrontend

Exploring confidential videos through the VIMEO API

I encountered an issue with the Vimeo API, and navigating through their documentation was quite overwhelming. I am trying to send a request to the api in order to fetch information about private videos. I have a code snippet that works for normal videos: ...

jqueryjsonajaxvimeo-api

Tips for preventing the use of nested functions while working with AJAX?

Consecutively making asynchronous calls can be messy. Is there a cleaner alternative? The issue with the current approach is its lack of clarity: ajaxOne(function() { // do something ajaxTwo(function() { // do something ajaxThree() }); }); ...

javascriptajaxreadability

The application of styling to a CSS class is unsuccessful when the class is dynamically added through Angular

My goal is to create a header that moves with the page and stays fixed once it reaches the top. I am using Angular and came across a solution on Stack Overflow which suggested binding a class toggle to the window scroll event to achieve this effect by addi ...

htmlcssangularjs

Leveraging the useRef hook to adjust the CSS styling of a React component

Currently, I am working on changing the style of a react component by utilizing the useRef hook. So far, I have implemented the useRef hook to reference the specific component whose style I want to modify when clicking on two buttons. Despite my efforts, I ...

javascriptreactjsreact-hooks

Passing data from a method callback to a function and returning a variable in the same function

Is there a way to properly return the latlon variable from the codeAddress function? The typical 'return latlon' doesn't seem to work, possibly due to scope issues. Any suggestions on how to resolve this? function codeAddress(addr) { ...

javascriptfunctioncallbackreturn

Converting data types when transferring a JavaScript variable to a PHP variable

I have a boolean value stored in a JavaScript variable var value=true; alert(typeof(value)); //Output: boolean I need to pass this variable to a PHP file through AJAX $.ajax({ type: 'POST', data: {value:value}, url: 'ajax.php& ...

javascriptphpjqueryajax

Displaying fresh data from a JSON URL by clicking on a button and dynamically refreshing the view in

Apologies if this question has been asked before, but I couldn't locate it. I’m currently engaged in an Angular project where I’ve loaded an external JSON file using http. The data is presented through ngRepeat. When a button is clicked, I aim t ...

javascriptjqueryangularjsjson

Is there a way to simulate a click event (on a file type input) within a promise?

I've been struggling with this issue for a long time and have not been able to find a solution. The problem arises when attempting to trigger a click event on a file input type from within a promise. When I directly trigger the event inside the promis ...

javascriptangularjsangular-promisedom-events

Tips for modifying a state array in Vuex

I have the ability to add and remove entries, but I'm struggling with editing. How can I achieve this using VUEJS, VUEX, and JavaScript? For adding entries, I know I should use PUSH, and for removing entries, SPLICE works fine. But what about editing ...

javascriptarraysvue.jsvuejs2vuex

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

Determine the value of an object by iterating through its keys

UPDATE: (for clarification) I currently have a table named modelCoa +----+----------+-------+--------------------+ | id | id_parent| code | name | +----+----------+-------+--------------------+ | 1 | 0 | 1 | asset ...

javascriptvue.js

Enhanced security through dual authentication for MVC and WebAPI

I have developed two separate applications: MVC and WebAPI. In my MVC application, I make ajax requests to the WebAPI on certain pages. Additionally, I am using IdentityServer3 for authentication and authorization. Currently, I have implemented cookie-bas ...

ajaxasp.net-mvcasp.net-web-apiidentityserver3

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

As a newcomer to Rails, I was able to successfully implement the onclick function for a f.checkbox element. Now, my challenge lies in achieving a similar functionality for a f.select element within a _form. Below is the code snippet that works for a chec ...

javascriptruby-on-railshtmlruby-on-rails-5

Implementing form validation for dropdown lists with Material-UI React: A comprehensive guide

I'm still learning React and I've been using material-ui for form validation. Everything was going smoothly until I encountered an issue with validating a dropdown list. Whenever I try to validate it, an error occurs: "Cannot read property ' ...

javascriptreactjsreact-reduxrxjsmaterial-ui

Use the colResize function in R Shiny to establish communication and synchronize the column sizes between R and

I'm currently using a plugin called datatables.colResize to allow manual column resizing for DataTables in my R Shiny application. My goal now is to save the column width state once a user adjusts the table size. I want this information to be passed a ...

javascriptjqueryrshinydt

Falling rain animation in JavaScript

I'm a beginner in the world of JavaScript and I'm trying to create a div on a webpage with a rain effect. I've managed to generate random blue points within the div, but I'm struggling to make them move downwards. Here's the code I ...

javascript