Published on : 04.05.2010 Category : PHP/AJAX Viewed : 58 times.
Before the explanation of the doWork() function we first need to learn a more important thing. To make a communication between the client and the server the client code needs to create a so called XMLHttpRequest object. This object will be responsible for AJAX PHP communication.
However creating this object is bit triky as the browser implement it various ways. If you don't want to support the quite old browsers we can do it as follows:
Code:
1. // Get the HTTP Object 2. function getHTTPObject(){ 3. if (window.ActiveXObject) 4. return new ActiveXObject("Microsoft.XMLHTTP"); 5. else if (window.XMLHttpRequest) 6. return new XMLHttpRequest(); 7. else { 8. alert("Your browser does not support AJAX."); 9. return null; 10. } 11. }
Javascript F1
Ok, now we have the XMLHttpRequest object, so it's time to implement the business logic inside the doWork() function.
First of all we need to get a valid XMLHttpRequest object. If we have it then we can send the value of the inputText field to the server script. We do this by composing an URL with parameter, so in the PHP script we can use the $_GET super-global array to catch the data. As next step we call the send() function of the XMLHttpRequest object which will send our request to the server. At the moment our doWork() function looks like this:
Code:
1. // Implement business logic 2. function doWork(){ 3. httpObject = getHTTPObject(); 4. if (httpObject != null) { 5. httpObject.open("GET", "upperCase.php?inputText=" 6. +document.getElementById('inputText').value, true); 7. httpObject.send(null); 8.
9. } 10. }
Javascript F1
It's nice but how we can catch the response from the server? To do this we need to use an other special property of the XMLHttpRequest object. We can assign a function to this parameter and this function will be called if the state of the object was changed. The final code is the following:
The last step on client side is to implement the setOutput() function which will change the value of our second field. The only interesting thing in this function that we need to check the actual state of the XMLHttpRequest object. We need to change the field value only if the state is complete. The readyState property can have the following values:
1. // Change the value of the outputText field 2. function setOutput(){ 3. if(httpObject.readyState == 4){ 4. document.getElementById('outputText').value 5. = httpObject.responseText; 6. } 7.
8. }
Javascript F1
Now the client side is ready let's implement the server side.
RSS 2.0 :