How did I use AJAX technique to my second year college project?
As a computer science student in my second year of college, I had to build a Web Application with my three colleagues. Our project was to make software for a bicycle renting system for urban places. After Software Requirement Specifications (SRS) were finished and approved by the university, we started to build our project.
Anyway, during the semester break, we had to build each implementation separately by ourselves, I had to build login, signup, dashboard user interfaces and two CRUD (READ, WRITE) operations. I had no idea about code structure, how the front end communicates with the back end, how databases connect and communicate with the back end.
Our proposal required to use, HTML, CSS, JavaScript, PHP and MySQL database.
Then firstly, I built login, signup, dashboard user interfaces and MySQL database on the local XAMPP server. I followed a couple of YouTube videos to learn to do those things.
I don’t know until then, how those things are related to each other. Then I got help from my friend. Yes, he is Google. I read a couple of articles and found there is a set of techniques that use in web development which is called AJAX ( Asynchronous JavaScript and XML).
So, I will explain how it’s work,
When web-site is active, from the client side User interact with user interfaces and if the user wanted to get or save data in the server, He/She needs to communicate with the server. To communicate with client-side and sever-side use protocols like HTTP and HTTPS.
Now I will explain how AJAX helped me with web development.
Our web-site is used by clients and they use client-side. Let’s assume the client is a registered user on our website and he is maintaining his profile. If he wants to update his profile picture there is a procedure and he will do it and update the database. So after that, he wants to see his new profile picture on the display. In the normal way, he needs to refresh the page to see the updates. Every time he does this he needs to refresh to see the updates that are not good thing isn’t it?
To Avoid that issues we can use AJAX techniques. As I mentioned before client-side and server-side communicate with each others using HTTP or HTTPS requests. All we know web-pages run in web browser engines.
In this technique, we write a script to build XMLHTTP requests to communicate with the back end. Then all the client’s requests handle by these XMLHTTP objects. If there is a significantly large script in the web page, it takes considerable time to load the web page in the web browser. So if we could use JavaScript script then the page will load faster than other scripting languages. Therefore we write XMLHTTP requests using JavaScript language. The main advantage of this technique is to change data easily without having to refresh the page. because of XMLHTTP request run in the script actively.
Like Google Earth, Facebook tech giants are using AJAX request is sent to get data from the servers.
How did I use AJAX in my project
I got data from the client side using HTML forms.
After that wrote JavaScript to create XMLHTTP objects and made a connection with back-end PHP files.
Then check the connection between the front end and back end, if the connection is OK then send a post request to the back end and get a response via HMLHTTP request.
References
1.Ajax explained
2. Ajax ( JavaScript, PHP, MySQL )
https://adnan-tech.com/get-data-from-database-using-ajax-javascript-php-mysql/
