Making Ajax Request
Ajax Web Technology Explained – Part 1
Forward: This is part 1 of my article series, Ajax Web Technology Explained. It is a two part series.
By: Chrysanthus Date Published: 30 Jul 2012
Introduction
When you click a link on a web page a new web page should normally be produced at your browser. Now this web page is sent from the server. There are times when you need just a peace of text from the server and not a whole web page. Traditionally a whole web page would be sent with the small peace of text, you need. However, if just the small peace of text is sent, the time taken will be small compared to when the whole page is sent.
Ajax is a new technology, that enables you pull a bit of info (text) from the server and not the whole page. In this way you obtain the text information faster, than if you where to obtain it with a whole web page. Ajax can still be used to obtain large text, which does not have the HTML tags that form a web page. Ajax can be used to obtain (download) what is called XML files, but we shall not look into the case of XML files in this article (series).
Example of Ajax Technology
www.google.com (Google Suggest) made Ajax popular in 2005. As you start typing letters in the Google Search box, Ajax at the client’s browser sends the letters to the server, and the server returns a list of suggestions (words). You might have noticed this already, if you are used to the Internet.
What is Ajax?
Ajax is code that that a web designer writes as he prepares his web page. AJAX is abbreviation for Asynchronous JavaScript And XML. You do not need to understand all that vocabulary in order to understand Ajax or this article. In order to understand this article (that is, Ajax), you need to have basic knowledge in HTML, basic knowledge in ECMAScript (JavaScript) and ECMAScript objects, and a notion of database. The Ajax code is written in ECMAScript in an HTML document.
Ajax is used to retrieve data (text) by a page at the client’s browser to fit into that same page at the client or used by ECMAScript in that same page.
With Ajax, just the text is retrieve from the server; the HTML elements that would have been added to the text to form a web page are not transmitted with the text.
The Ajax process is initiated by the client (user on his web page at browser); the process is executed without the user knowing; it is generally fast, so the user does not notice that information has been got from a server residing far away (in some other country).
Traditionally, to retrieve data from the server, you have to fill a web page form, click the Submit button for the form to be sent to the server and then wait for the data to be included in a web page at the server and then sent back to the client. In some cases the page at the server would already be ready and then it would be sent by the server to the client. Here I give you the advantages of Ajax over this traditional method.
- With Ajax, data as simple text is retrieved from the server faster than when it had to be retrieved as a web page.
- If processing of the retrieved data is done at the client, your processing time at the server is saved.
- The overall speed of interaction between browser and web server as a result of speed of retrieving data is increased.
Technical Aspects
Ajax consists of two code parts; one part is in ECMAScript at the client and the other part is at the server. The part at the server can be in Perl, PHP or some other language. The part at the client, calls the part at the server. In this two part article series, I will explain mainly the part at the client’s browser. What the part at the server has to do is to look for the data at the server and send in response to the part (request) at the client. The code at the server does not involve anything new. Different programs like Perl and PHP have their different ways of achieving this and so I cannot do any serious analysis on that in this series.
Ajax at Client
At the client you write Ajax as ECMAScript code. The code has to do the following:
- Open (start) a connection between the client computer and the server.
- Send the request for the information (text) the user needs.
- Wait for the response (this normally takes a short time) and receive it.
ECMAScript has an object that can achieve all the above three objectives. Note that objects make programming easy. With objects like the one of interest, the difficult programming statements have already been written by someone else. You simply have to use the object. All you have to know here is how to use the object’s properties and methods. These properties have already been declared for you; the methods have already been defined for you; you just have to know how to use them and use them. We shall learn how to use them and use them in this article.
You, the web programmer is the one to create the ECMAScript object that will carry out the above objectives. You do this by simply using the constructor function,
new XMLHttpRequest()
For example, if you want the object to be called myAjax, in your ECMAScript, you would type:
var myAjax = new XMLHttpRequest();
Let us call this variable, the Ajax Object. Well, there is trouble; the above code works in the browsers, IE7+, Firefox, Chrome, Opera and Safari. In order to have the Ajax object for the browsers IE5, IE6, you would type,
var myAjax = new ActiveXObject("Microsoft.XMLHTTP");
So, in order to have an Ajax object that will work in major browsers, you need the following code segment:
var myAjax;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
myAjax = new XMLHttpRequest();
}
else
{// code for IE5, IE6
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
The first thing in the code segment above is the declaration of a variable, which the Ajax object created will be assigned to. The expression, window.XMLHttpRequest, returns true in the if-condition for the browsers, IE7+, Firefox, Chrome, Opera and Safari. It returns false for other browsers (IE5, IE6).
After creating the Ajax object, the object has to achieve the above three objectives, which are repeated below:
- Open a connection between the client computer and the server.
- Send the request for the information (text) the user needs.
- Wait for the response and receive it.
Before we look at the first objective above, we have to know that there are two methods by which a request can be sent by the Ajax object to the server. They are called the GET and the POST methods. Now, these methods are not the Ajax object methods. They are actually called HTTP methods. Well, you do not need to understand HTTP in order to understand this article (or Ajax - the topic).
The difference between the GET and POST methods is not in the meanings of the word GET and POST. It is in the way they are implemented (see below).
Opening a Connection
The Ajax object created has a method called the open() method. The simple syntax is
myAjax.open("HTTP Method", "URL", true);
myAjax is the Ajax object you created. It is followed by a dot and then the open() method. This method opens the connection between the client computer (browser) and the server.
The open() method has three parameters. The first one is either the word "GET" or "POST" in quotes. This is how you use either the GET method of HTTP or the POST method of HTTP. I will give you the advantage and disadvantage of the GET and POST method shortly. The second parameter is the URL of the file in the server that will look for the text and send to the client. That file at the server has to be an executable file. The third and last parameter should be true, as shown above. You do not need the quotes around, true.
An example of the above statement is:
myAjax.open("GET", "http://www.somewebsite.com/sendtext.php", true);
In this example, the executable file is, sendtext.php, a PHP file.
Well, the full syntax for the open() method is,
open(HTTP Method, URL, true, [username,] [password])
The user name and passwords are optional. These are used when the site at the server is protected.
After you open the connection, with a statement like the last but one above, you have to send the request. The Ajax object has a send() method that is used to send the request. The syntax is,
myAjax.send(param);
myAjax is the Ajax object you created. The parameter (argument) is either null or a string. We shall see when you have to use null and when you have to use a string, shortly. Note: today, if you have no argument for the send method that would be considered as null.
Sending and Receiving Data
The main purpose of Ajax is to get small data from the server to the client very fast. To do this, Ajax calls an executable file at the server that will send the data; we have talked about this. Now, there is all kind of data in the server that can be sent to the client. Unless you want the executable file to be sending the same datum (singular of data) to the client all the time, while you make your request from the client, you can send information to the executable file that will enable it decide on a particular datum to send to the client. In other words, with Ajax you can send some small data to the executable file at the server, to enable it send a particular datum to you (browser).
So you can talk of the sending data and receiving data. Sending Data is what the browser (Ajax) sends to the server. Receiving Data is what the server sends back. Nothing stops you from sending a page of information and receiving another page of information.
Example of Sending Data
The first and last name of a person is an example of data that can be sent to the server. The executable file at the server will use the person’s full name to send data that concerns this particular person and not data in the server that concerns some other person.
With Ajax, you have to use either the GET method or the POST method; you do not use both in a request. Let us look at the details with the GET method, now. We shall look at the details of the POST method after.
Remember, when you want the GET method, you use "GET" as the first argument of the open() method of the Ajax object. Under this condition, we saw an example of the open() method as:
myAjax.open("GET", "http://www.somewebsite.com/sendtext.php", true);
The second parameter of the open() method is a URL, the third is always, true. With the GET method, the sending data is attached to the end of the URL, forming a long URL. Imagine that you wanted to send the first name and last name of somebody with the GET method. Also assume that the first name of the person is John and the last name is Smith. In this case, and with the GET method, the Ajax object open() method would be,
myAjax.open("GET", "http://www.somewebsite.com/sendtext.php?fname=John&lname=Smith", true);
Here, fname means first name and lname means last name. So in the URL, immediately after the executable file name, you type a question sign; after the question sign, you put the sending data. The sending data consists of name/value pairs. In this example there are two name/value pairs. For the first name/value pair, the name is fname and the value is John. For the second name/value pair, the name is lname and the value is Smith. The name/value pairs are separated with the & character.
If you do not have any sending data, there will be no question sign after the URL and no data after the URL.
So for the GET method the sending data is part of the URL. Do not confuse between the GET method and the Ajax send() method. The GET method is actually an HTTP method, which I said you do not have to worry about for the purpose of this article. The Ajax send() method is a method of the Ajax object. Remember that you do not have to type (create) the properties and methods of the Ajax object; they have already been done for you; you just use them.
The Ajax object carries out the three objectives that we mentioned above. So far we have talked about one of these objectives. The first objective is to open the connection: the Ajax object has the open() method for this. The second objective is to send the request: the Ajax object has the send() method for this.
Now, if you code for the GET method, then the Ajax send() method has to be,
myAjax.send(null);
That is, with the GET method, the single parameter is null.
So with our example and with the GET method, this is what you should have, so far, in your code:
var myAjax;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
myAjax = new XMLHttpRequest();
}
else
{// code for IE5, IE6
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
myAjax.open("GET", "http://www.somewebsite.com/sendtext.php?fname=John&lname=Smith", true);
myAjax.send(null);
With the GET method, the Ajax object send() statement should immediately follow the Ajax object open() statement as shown above.
The POST method
Remember, when you want the POST method, you use "POST" as the first argument of the open() method of the Ajax object. Under this condition, our example of the open() method would be:
myAjax.open("POST", "http://www.somewebsite.com/sendtext.php", true);
The second parameter of the open() method is a URL, the third is always, true. Now, with the POST method, the sending data is NOT attached to the end of the URL, and so with the POST method, the URL is short. With the POST method, there can be no question sign after the URL. Note that the last argument for the Ajax object open() method is usually true for both the GET and POST methods.
So, where then do you put the sending data with the POST method? With the POST method, the sending data is the parameter (string) of the Ajax object send() method.
Imagine that you wanted to send the first name and last name of somebody with the POST method. Also assume that this first name is John and the last name is Smith. This is the sending data we used for the GET method. In this case, and with the POST method, the above Ajax object open() method would be,
myAjax.send("fname=John&lname=Smith");
The sending data is a string argument of the Ajax send() method. Note that there is no question sign in front of the sending data argument of the POST method. You can replace the string parameter (argument) with a variable.
There is one other thing to accept with the POST method. With the POST method you have to include the following statement in between the Ajax object open statement and the Ajax object send statement:
myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Here, myAjax is the object you created. Just copy the rest of the statement as given above in your own code. So, for our example and for the POST method, you should have the following three statements together, in the order given:
myAjax.open("POST", "http://www.somewebsite.com/sendtext.php", true);
myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjax.send("fname=John&lname=Smith");
So, if you were coding for the POST method, for our example, this is what you should have typed so far:
var myAjax;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
myAjax = new XMLHttpRequest();
}
else
{// code for IE5, IE6
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
myAjax.open("POST", "http://www.somewebsite.com/sendtext.php", true);
myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjax.send("fname=John&lname=Smith");
The setRequestHeader() method in the last but one statement above is actually an Ajax object method. Do not confuse the GET and POST methods with the Ajax object open(), send() and setRequestHeader() methods. The GET and POST methods are what are know as HTTP methods, which I said you should not worry about, so far as this article series is concern.
Note: if you do not have any data to send, then the argument of the Ajax send() method for POST should be null; in that case you would have,
myAjax.send(null);
Remember, with GET, this argument is always be null.
Disadvantage of the GET method with Ajax
With the GET method, the amount of sending data is limited.
Advantage of the POST method
With the POST method, the amount of sending data is not limited. Also, there may be certain characters in the data that are the same as the special characters such as & and =. Such characters may cause conflicts. So when you have doubts, use the POST method as the POST method will encode the data, making the data safe.
Note: When you are not sure of which method to use, use the POST method.
We have done enough for this part of the series. Let us take a break here and continue in the next part of the series, where we shall learn how to receive at the client, the response sent by the server.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT