Creating a MySQL connection with PHP/AJAX

In this tutorial I will explain how to open a mysql database connection using PHP and the all popular AJAX. The purpose of this article is to demonstrate how the XMLHttpRequest object works within php and the advantages of using it. This tutorial will be the first in a series of articles leading to the development of a fully functional dynamic web events application.

Asynchronous JavaScript and XML (AJAX)

AJAX is a fancy technique for creating websites that gather information from servers without having to refresh themselves. I could get into the nitty-girtty about advantages and disadvantages of using AJAX but for now all you need to know is any users action that would normally generate a HTTP request takes the form of a JavaScript call to the AJAX engine instead. The engine makes any data requests asynchronously without pausing a user's interaction with the web application. For more information on AJAX and XML click here .

Requirements

For this tutorial you should have decent knowledge of PHP and basic understanding of SQL queries. If you don't have access to a webserver you can setup your own by downloading the latest build of XAMPP . XAMPP is a easy to install Apache distribution containing MySQL, Pearl, PHP, and all sorts of useful tools and program examples.

Let's begin

Creating a request object is different depending on the users browser version. The code below checks for browsers and uses the proper request.

1. <script language="Javascript" type="text/javascript" />




3. function createXMLHttpRequest() {




5. var ua;




7. if(window.XMLHttpRequest) {


8. try {


9. ua = new XMLHttpRequest();


10. } catch(e) {


11. ua = false;


12. }


13. } else if(window.ActiveXObject) {


14. try {


15. ua = new ActiveXObject("Microsoft.XMLHTTP");


16. } catch(e) {


17. ua = false;


18. }


19. }


20. return ua;


21. }




23. </script>

Next we create the AJAX request and how we want to handle the response. The sendRequest() function below will send a HTTP GET request to the server for the XML document. The handleResponse() function checks to see if the request is finished and if so returns the response.

AJAX readyState Status Codes:

0 - uninitialized

1 - loading

2 - loaded

3 - interactive

4 - complete

1. var req = createXMLHttpRequest();




3. function sendRequest(id) {


4. req.open('get', 'func.php?id=' + id);


5. req.onreadystatechange = handleResponse;


6. req.send(null);


7. }




9. function handleResponse() {




11. if(req.readyState == 4){


12. var response = req.responseText;


13. var update = new Array();




15. if(response.indexOf('||' != -1)) {


16. update = response.split('||');


17. document.getElementById(update[0]).innerHTML = update[1];


18. }


19. }


20. else




22. alert("loading" + req.readyState);




24. }

On to the HTML

Now we need to link to the javascript sendRequest() function.

1. <a href="javascript:sendRequest('myRequest');">click me.</a>




3. <span id="showDiv">




5. </span>

Moving on..

That's all the html for now so lets move on to the php file we named func.php in the sendRequest() javascript function. This file will handle the MySQL connection.

The code within the switch statement is a simple MySQL connection done in PHP. Remember to enter your server information for $link.

That's all! Next week things will be getting more advanced and I will be posting the second tutorial.

Full code for this article:

http://www.johnwiseman.ca/articles/ajax/1/func.pht

http://www.johnwiseman.ca/articles/ajax/1/splash.html