Galactic Civilizations 3
Retrieve data in Ajax and PHP in plain text

Retrieve data in Ajax and PHP in plain text

Category: Javascript.
Posted by on the 02/10/2013.
Last update on the 03/10/2013.

   Next tutorial>>

Description

This tutorial explains how to use Ajax in order to retrieve whenever you want the data sent by your PHP script in plain text.

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in html, JavaScript and PHP.

HTML Form

First of all we need to create a file call form.html. This file will contains only one button that allows retrieving the data sent by the PHP script.

form.html

<html><head>
<script language="javascript" src="Ajax.js"></script>
</head><body>
<form action="">
<input type="button" onclick="retrieveData()" value="ajax"/>
</form>
</body></html>

As you can see, when we click on the ajax button, the function « retrieveData() » is called. This function is defined in the file Ajax_txt.js.

JavaScript script

We will now create a new file called Ajax_txt.js. This file will contains the function that allows creating an instance that allows sending http requests to the server and another function that allows retrieving the response from the server.

The XMLHttpRequest object

The first function allows to instantiate the XMLHttpRequest object. This one allows interacting with the server through its methods and attributes.

List of attributes:

  • readyState : represents the connection state.
    • 0 : connection not initiated.
    • 1 : connection established.
    • 2 : request received.
    • 3 : response pending.
    • 4 : done.
  • status : represents the state of the page sent by the server.
    • 200 : OK.
    • 404 : page not found
  • responseText : contains the data in plain text.
  • responseXml : contains the data in xml.
  • onreadystatechange : this property is activated when the current state is updated. We assign a function to this property.

List of methods:

  • open(mode, url, boolean) : Open a new connection.
    • mode: request type, GET or POST
    • url: PHP script url. For the GET command, data that need to be sent to server must be placed in the query string of the url.
    • boolean: true (asynchronous) / false (synchronous).
  • send("string"): Send data to the server. Null for GET command.

For creating XMLHttpRequest object instance, you need to add the following function:

Ajax.js

function createInstance(){
if(window.XMLHttpRequest){
/* Firefox, Opera, Google Chrome */
return new XMLHttpRequest();
}else if(window.ActiveXObject){
/* Internet Explorer */
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names){
/* We test the different versions */
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
alert("Not supported");
return null; // Not supported
}
};

Retrieve the data

Now we will use the XMLHttpRequest object in order to retrieve the data sent by the server. To do that, add the following function:

Ajax.js

function retrieveData(){
var req = createInstance();
var clientData = null;
req.onreadystatechange = function(){
/* If the state = done */
if(req.readyState == 4){
/* If the status = OK */
if(req.status == 200){
/* We display the response */
alert(req.responseText);
}else{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
}

req.open("GET", "server.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/* We send the data */
req.send(clientData);
}

As you can see, we check if the connection is done and if the status of the data sent by the server is ok.

In this tutorial, I explain how to retrieve the response from the server in plain text but we can also use Ajax queries to retrieve the response inside an XML file.

PHP script

Now we will write the PHP script on the server side. This script is very simple. Create a file call server.php and add the following code inside:

server.php

<?php
echo "data";
?>

Tests

This tutorial comes to his end. You can test your application by clicking on « ajax » button. The message: « data » should be displayed.

Ajax

You like this tutorial ?
Like this website in order to promote it on facebook !

   Next tutorial>>

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo