# Request and Response
This chapter will explain in detail what happens when someone triggers a request from the client side and waits for the server side's response. This chapter will be using the [*HelloWorld Sample*](https://github.com/MobilizeNet/WFNetHelloWorld/tree/master/MigratedCode/HelloWorld1).
Say you want to know in detail what happens when a user clicks the **Click Me** button and the label refreshes the text from **My First Sample** to **Hello World**.
A WebMAP request/response passes through the following main steps that are shown as the image below.
So, when the user clicks on the button, front-end prepares the deltas to be synchronized with back-end's observable models and launches a request. Then the back-end processes the request by applying the changes coming from the front-end and calls to the corresponding user code. Then it builds the response and sends it back to the client. Finally, the front-end processes the response and refreshes the label.
Now, let go into detail these main steps.
## 1. Send the Request
* Click the **Click Me** button to start the whole process.
* Call `WebMAPService` to perform the following actions:
1. Gather the `Changed` models to be synchronized with the back-end's observable models.
2. Create and send the HTTP POST event with the gathered deltas.
* The `WebMAPService` creates the following json and send it to the back-end.
```
{
"Changed" : [],
"Actions" : [{
"Arguments" : null,
"Name" : "Click",
"ReceiverId" : "a1c4236c-ca1e-4550-9789-2c17d12e6f50"
}]
}
```
1. `Changed` array: since there is no models that were modified, the array is empty.
2. `Actions` array: contains the list of actions that should be processed on the back-end.
## 2. Process the Request and create the response
Now that the request has arrived at the back-end, it will pass through some middlewares orderly.
The request passes through `ExpiredSessionMiddleware` to verify if the session has already expired, then `RequestQueueMiddleware` to enqueue the request if the server is already processing some other requests coming from the same session; if no requests are in the queue, then it will proceed to the next middleware. The `CoreServicesMiddleware` initializes all the services required to process a request. And finally,`InboundMiddleware` will process the request and create the response for the request.
The `InboundMiddleware` is the key responsible for processing any kind of request coming from the client side, so let's expand in detail about this middleware.
### 2.1 Parse the JSON request via `FormattingService`
First of all, the `InboundMiddleware` gets the information of the request, decodes this information and creates a `Request` object that contains the list of list of `Changed` DTO models and the list of `Action`. Then, this `Request` will be used by the `EntranceService`.
### 2.2 Process the request via `EntranceService`
The `EntranceService` will process the list of `Changed` DTO models and the list of `Action`. An is an action sent to the server in a request to be executed. Each `Action` contains a `ReceiverId` (the Identifier of the sender), `Name` (the Event Name) and `Arguments` (the arguments of the event).
1. **Process the `Changed` DTO models**: In order to synchronize the list of `Changed` DTO models with the corresponding observable models, the service use `MapperService` to invoke `ApplyChanges` of each `Mapper` associated with the `Changed` model.
2. **Process the list of `Action`**: In this case of clicking a button, the `ReceiverId` is the id of the `Button`, the `Name` is *"Click"* and with no arguments. Given this Click `Action`, the service will invoke the following user code:
```
private void button1_Click(object sender, System.EventArgs e)
{
this.label1.Text = "Hello World";
}
```
3. While the action is executing, the `TrackingService` is tracking all the Observable Models. If an observable's property has been modified, the `TrackingService` will register the observable into the trackable array. In this example code above, the `label1` will be registered.
### 2.3 Create the response via `DeliveryService`
The `DeliveryService` creates the response back to the client side by means of the next steps:
1. The `TrackingService` retrieves all the tracked observable models.
2. The `MappingService` takes those models and instantiates the corresponding `Mapper` to start calling one by one the `Map` method. For example, in this case, since `label1` has been modified. The `MappingService` instantiates `LabelMapper`, calls the `Map` method and returns the `Mobilize.Web.DataTransfer.Label`.
3. The `DeliveryService` will finally, create the `Response` object. And populates the objects `Added`, `Changed`, `Removed` properties array. For example, the `label1`'s new modified text should be inside the `Changed` array.
4. Finally, the `FormattingService` will format the `Response` into a JSON object.
## 3. Process response and refresh component
Now, that the response has arrived back to the client-side.
```
{
"Added" : [],
"Changed" : [
{
"Text" : "Hello World",
"Visible" : true,
"Id" : "a2fb1871-2576-4dbe-9203-17dc4b13427a",
"MapperId" : "lbl",
"References" : {}
}
],
"Removed" : [],
"Actions" : []
}
```
The `WebMAPService` will process the json above, and synchronize the front-end observable models with each of the models in the `Changed` array. And finally, the components should be refreshed and show the new **Hello World** text.
## Summary
* You leaned in detail what happens when someone triggers a request from the client side and waits for the server side response.
* You learned how WebMAP Back-end services process the request.
* You learned how WebMAP Back-end services create the response.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.gapvelocity.ai/webmap/general/request-and-response.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.