Web Development Primer for PL/SQL Programmers - Inspecting AJAX Network Traffic

Web Developer Primer for PL/SQL - Inspecting AJAX Network Traffic

What we're going to do here is we're not going to jump into AJAX code or syntax. What we're going to do is we're going to use an Oracle Application Express example and some AJAX traffic that was generated by some of the declarative aspects of APEX.

Specifically, we're going to show you a department dropdown list and when that value changes, the list of employees that comes back from the server is either the sales or accounting or research department. That is an example of cascading list of values that is based in AJAX under the hood. When you click on an employee name, you get their salary back which is again another AJAX call that was defined by a declarative dynamic action within Oracle Application Express. Let's have a look at that so we could see that in action.

I've got a little application here. Let's have a look at this. Let's run the application. This is Oracle Application Express application.

No. Let's keep this. Let's run it again. We're just going to concentrate here on department, employee name, and salary. What happens here is if I select the sales department, we end up with a list of salespeople. If I select accounting, we get a list of accountants. And if I select employee, I get their salary.

That was all done without doing a full-page refresh. As I said earlier, a full page refresh is very expensive on the server side and you really don't want to do that if you have hundreds or thousands of users using your application. You want things to be as efficient as possible.

First thing you want to do - this is all working here. It's fine. It's very simple. But if you do have some sort of complicated AJAX call that's doing something sophisticated and it's not working correctly, one of the first things you want to do is isolate the bug either to your client side code in your browser or on your server side. The first thing you want to do there is inspect the network traffic that's going back and forth to make sure that the values you're passing back and forth are in fact correct. And the web developer tool allows you to inspect that traffic. So let's have a look.

First, let me shrink this down a little bit so we can see a bit better. If we right-click here almost anywhere, here our tools comes up. We're not interested in the elements tab here. Funny enough, since we're looking for network traffic we want to look on the network tab. And right now since we've just brought this up, there's nothing here. When I click sales...

We've got something. It looks like a breakpoint in the APEX code. Let's just click on that to bang through the code and let's get back to the network tab. You could see here now we've got a post that resulted from our click on the development. So let's inspect that by clicking here on the wv_flow_show and let's go to the "Header" sub tab here.

There's a lot of information here. It goes on and on and on here. What we want to do is let's collapse this "Request Headers" because we're really not interested in that. There's something down here below called "Response Headers." We're not interested in that.

What we want to look at is the form data. This is the data that gets passed from a client to the server. It's a little bit confusing here. You see here this p_flow_id? It is actually in fact our application ID. I think if you can see up here, in the developer toolbar application 444, that leads into a little bit of history lesson here with the Oracle Application Express.

Back in 1999 and year 2000, in that era, Application Express was actually known as flows. That was the name inside Oracle at that time. A flow actually was an application. Here we have flow_step. The pages in that application were actually at that time known as steps, and that old, old terminology actually has survived under the hood in the APEX source code. That's why you see that funny flow and step stuff down here. But there's the application ID 444 and we're on page 2.

The interesting stuff is really not that. That is kind of like the housekeeping stuff. What I want to show you down here is the name value pairs here that are being passed to the server. This department dropdown list here that's got sales in it, it's actually p2_defno and the value that's being passed for the sales department is actually 30. When you do have problems with your AJAX calls, one of the first things you do is inspect the network traffic to make sure that these values are in fact correct.