Ajax Basics Tutorial (3)-3.2 Send request parameters

So far, you've learned how to use AJAX technology to send requests to the server, and you know that customers can resolve server responses in a variety of ways. In the previous example, only one content is missing, and you have not sent any data to the server as part of the request. In most cases, it does not make sense to send a request to the server without any request parameters. Without the request parameters, the server cannot get context data or create a "personalized" response to the customer based on contextual data, in effect, the server sends the same response to each client.

To give full play to the powerful features of Ajax technology, this requires you to send some contextual data to the server. Suppose you have an input form that contains the part of your e-mail address that you want to enter. Depending on the ZIP code entered by the user, the appropriate city name can be pre-filled with Ajax technology. Of course, to find a zip-encoded city, the server first needs to know the ZIP code the user entered.

You need to somehow pass the user's input zip code value to the server. Fortunately, the work of the XMLHttpRequest object is the same as your usual HTTP technology (GET and post).

The Get method passes the value as a name/value pair in the request URL. There is a question mark (?) at the end of the resource URL and a name/value pair behind the question mark. The name/value pair takes the form of a name=value, separated by a number (&) between each name/value pair.

Here is an example of a GET request. This request sends two parameters to the YourApp application on the localhost server: FirstName and MiddleName. Note that the resource URL and the parameter set are separated by a question mark, separated from the FirstName and MiddleName by a number (&):

http://localhost/yourApp?firstName=Adam&middleName=Christopher

The server knows how to get named parameters in the URL. Most server-side programming environments today provide a simple API that makes it easy to access named parameters.

Using the Post method to send named parameters to the server is almost the same as using the Get method. Similar to the Get method, the Post method encodes the parameter as a name/value pair, in the form of Name=value, separated by a number (&) between each name/value pair. The main difference between the two methods is that the Post method sends the argument string in the request body, and the Get method appends the parameter to the URL.

If the data processing does not change the state of the model, the HTML uses the Protocol to theoretically recommend a Get method, from which we can see that the fetch method should be used when fetching the data. The Post method is recommended if the operation changes the state of the data model because the data is stored, updated, or e-mailed.

Each method has its own unique advantages. Because the parameters of a GET request are encoded into the request URL, you can bookmark the URL in the browser and then easily request it again. However, if it is an asynchronous request it will be of little use. The Post method is more flexible in terms of the amount of data sent to the server. The amount of data that can be sent using a GET request is usually fixed, varies by browser, and the Post method can send any amount of data.

The HTML form element allows you to specify the desired methods by setting the method property of the form element to get or post. When a form is submitted, the form element automatically encodes the data for the input element based on the rules of its method property. The XMLHttpRequest object does not have this built-in behavior. Instead, the developer uses JavaScript to create a query string that contains data to be sent to the server as part of the request. Whether you are using a GET request or a POST request, the technique for creating a query string is the same. The only difference is that when a request is sent using a GET, the query string is appended to the request URL, and when the Post method is used, the query string is sent when the Send () method of the XMLHttpRequest object is invoked.

Figure 3-4 shows a sample page showing how to send request parameters to the server. This is a simple input form that requires you to enter a first name, last name, and birthday. This form has two buttons, each of which sends a name, last name, and birthday data to the server, but one uses the Get method and the other uses the Post method. The server responds with the Echo input data. The request response cycle ends when the browser prints out the server's response on the page.

Figure 3-4 The browser uses the Get or POST method to send input data, and the server echoes the input data as a response