Hello again, my friends!
I have decided to come back with a new tutorial, this time a more simple one.
I will show you how to create a contact form using AJAX
First, let's see what AJAX is.
Basically, the whole structure works like this:
In order to perform the other actions, we need to verify some HTTP statuses and responses to make sure that we got back the expected response.
1: We must be sure that the server ready state is 4. This means that the request is completed and we can go on. The other HTTP ready states are:
0: The request is uninitialized (before you've called open()).
1: The request is set up, but not sent (before you've called send()).
2: The request was sent and is in process (you can usually get content headers from the response at this point).
3: The request is in process; often some partial data is available from the response, but the server isn't finished with its response.
After checking the ready state, we must check the request status. If we get back a 200 request status it means that everything is ok. Other request statuses can be 404 (page not found), 400 (bad request), 401 (unauthorized) and so on.
In the example provided I chosen to display an alert message with the response received from server, but this is just an example.
The code is:
Let's see now how to create the XML instance that performs the request.
This tutorial is about a contact form, so I will use POST as method to send data to the server.
This means, that we will have to build the function that creates the string to be posted and that calls the function which sends the request to the server.
Take a look at the code bellow:
Now, we have all the pieces necessary to build the whole block.
This is the resulting code:
Now, let's see the structure of the HTML code of the page.
Inside the BODY of the page we will have a DIV that will contain the form.
Take a look at the image bellow:
We will have to give the div an id in order to be able to manipulate the HTML content of the div.
This is the HTML code of the BODY:
At this point, there are two things left to do:
1: When submitting the form, it calls the function that launches the composes the string to be posted.
2: Change the parameter names in the get(); function according to our needs.
3: Implement the code that updates the content of the DIV when the response of the server is received.
The first one of these questions looks like this:
The second one is done like this:
The third one must be inserted inside the alertContents() function. We will replace the alert(http_request.responseText); code with this one:
Now, the HTML page looks like this:
Congratulations! You have created the page that sends the asynchronous request to another page located in the server.
Now, let's see how the PHP page is built.
The php page will be a very simple one, that only checks the presence of the requested form values, validates the inserted data and sends an e-mail to the administrator of the site.
The response from the server will be the HTML code itself returned by the mypage.php
Among the HTML code, there will always be a message (on top of the form) that will inform the user about the previous action.
For example, this is how the content of the div will look like after the user send a message:
I think this is all, my friends and i hope my tutorial was well explained.
I have created a ZIP file out of the two pages so you can download the end result of this tutorial for your own use. You are free to modify it as you wish, and for further questions just drop a comment.
See you next time!
Hello again, my friends!