Around 2000, Microsoft had developed some concepts for OWA that would ultimately become AJAX. However, these things were not widely available and worked only Internet Explorer. I came across a car insurance web site where selecting a value in one drop-down menu would update the available options in another; this seems simple today, but we have AJAX. How did this work? I had no idea, and the site was cryptic. I never reverse engineered, but I came up with my own method that we implemented in our code long before AJAX become commonplace.
Fetch and XMLHttpRequest
If you do web development today, you are rather likely to be familiar with these methods. Single-Page Applications (SPAs) rely on this implicitly. If you have less than 10 years of experience with this, then you likely take it for granted. The whole idea of trusting this model was concerning from a security perspective. How can we ensure that we are accessing a trusted platform?
Onchange, Onload, and Frames
Within the Document Object Model (DOM), it is possible to traverse up a page to parent pages when using frames and then back down to sibling pages.
This method relied on having a zero pixel width frame. The user never saw the frame and never directly interacted with it; it was invisible. To the user, it did not exist. When the user made a select in drop-down A, the Onchange event would make a request to load a new page in the invisible frame. This request would take the value of the selection and send it off to the page request within the query string.
To make this more concrete, let us say that drop-down A is the country field and drop-down B is the state/province field. Loading all of the state/province data for the entire world would be a lot of data to pass into each page request and most of it would be irrelevant based on the country selection. So, we select “United States” from the country drop-down and in the state/province field we would expect the 50 states, Washington DC, and perhaps territories to be included. To make this happen, the Onchange event on the country field triggers. It says to load a new page in the invisible frame and passes ?co=US in the query string to instruct the application on the server side to give us the desired information in return.
I was pretty impressed with myself when I made this happen. It looked cool because you could see it working; when you made the selection, the controlled form field was disabled, but then it would be enabled and it would flicker as it was being populated. It worked in all of the browsers at the time (for some reason, we were still doing our integration testing back to Netscape Navigator 2.0).
At the time, I was working on the team that was adding new features and bug fixes to the production product. But the news quickly traveled to the lead developer who was building the framework that would be used for the next version of the product; a complete rewrite. He called it a “hack”. Now, I have ton of respect for him; working at that company and seeing what he built gave me a huge head start. We were doing DevOps there in 2000 before it was called DevOps. We had dynamically built test and dev environments spun up on demand. We were checking our DML into repos. Reflecting back, it was awesome. Was it a hack? Probably. It was still impressive and it would have been nice to have heard that.
Back to AJAX
Why Does This Matter
Creating value requires experimentation. Mike Pfeiffer has been talking about his time at Amazon and listening to Jeff Bezos say, “it wouldn’t be an experiment if we knew it was going to work.” There has to be room for failure; it has to be safe. We have to create situations where we can have a failure that is low impact. We do this by making small iterative changes and implementing testing practices that catch more of these things before they reach production. However, they will not all be caught. Creating value is about doing something that was not being done before. Be open to changing what is.