Basic Ajax: Introduction

Basic Ajax : Introduction

See this article an introduction to what is Ajax , and its use and how it relates to other technologies. It will also be seen as its implementation and what are their advantages and disadvantages.





Introduction to Ajax

Ajax (Asynchronous JavaScript and XML) is a very technology currently used and that is enough evidence because it makes her much more dynamic applications and greater capabilities for answers. Ajax basically uses JavaScript, XML and HTML dynamic. Note that Ajax is not a programming language, but a new way of using existing standards.

Ajax Javascript makes a request to the server, the server nothing changes with the use of Ajax, he continues to answer every request exactly as it did previously when not used Ajax. But the server’s response will now return only the data that the page needs without any markup or presentation. One feature that will be noticed by the user accessing the page you are using Ajax is that much of the page will not be changed, but only parts that need updating. Formerly the entire page was charging, but with Ajax this paradigm changes.

Ajax features

An extremely important and useful feature of Ajax is that requests are asynchronous. This means that the Javascript of an Ajax application communicates asynchronously with the server, or even JavaScript code to make a request to the server, the page user can continue browsing the page by clicking on buttons or even filling out a form. This is another magic of Ajax applications. Therefore, as previously said Ajax and allows the user to have only part of the page loaded (not thus requiring to reload the entire page after a request) can still navigate smoothly through your page while the request to the server is made.

It is hoped that it was clear to the reader that the request and response model is still used in Ajax, what changes is that now we have an entire form being sent to the server and wait for your answer. It has a much more dynamic model with Ajax.

To complete this topic will be displayed below the three main features of Ajax should necessarily know:

asynchronous applications, as is the case of an Ajax application, make requests using a JavaScript object and not a submission form.
The Web browser will handle your requests and responses and not your Javascript code.
Once the Web browser receives a response to an asynchronous request, it will return the call to your Javascript code with the server response.

implementing Ajax

To start putting in Ajax applications is quite simple. Initially we need to create a JavaScript function that creates a new object to make requests to the server. Here we must pay attention to the fact that different browsers can do in different ways. Below the creation of the function that will be embedded in the HTML page where depart the request:

Listing 1: Example request object.

<head>
<script language=”javascript” type=”text/javascript”>
var request = null;

function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = null;
}
}
}

if (request == null)
alert(“Error creating request object!”);
}
</script>
</head>
Initially declared the request variable to null, this variable will be responsible for storing the request object. In granting the request object on command “request = new XMLHttpRequest ()” you have to try the request object’s creation. XMLHttpRequest is the kind of request object. if repairs that the command “request = new ActiveXObject (” MSXML2.XMLHTTP “)” and “request = new ActiveXObject (” Microsoft.XMLHTTP “),” there is also the attempt to create the request object, but in a way that works also in Internet Explorer. If everything goes wrong the command “request = null” within the block “catch (failed)” will run ensuring that the request of the variable remains null. If a message is null will be triggered in the user’s browser through the command “alert”.

Note that now that we have a request object we are ready to go to the next step which is the JavaScript function responsible for requesting the server a given special.

The code below shows the next step:

<head>
<script language=”javascript” type=”text/javascript”>
function getInformacaoQualquer() {
createRequest();
var url = “getInformacaoQualquerDoServidor-ajax.php”;
request.open(“GET”, url, true);
request.onreadystatechange = atualizaPagina;
request.send(null);
}
</script>
</head>
The above function is quite simple, first she calls “createRequest ()” function to create a new request object. Then, under the command “var url =” getInformacaoQualquerDoServidor-ajax.php “” has the configuration of the URL that you need to connect and to obtain the necessary data. At the command “request.open (” GET “, url, true);” there is the connection initialization and information to the request object to connect to the server. In “request.onreadystatechange = atualizaPagina,” you have to set the values on the page, the “atualizaPagina” will be seen below. Finally the command “request.send (null);” we are just saying that no data is being sent in the request. The script in this case do not have any data, just return the expected result.

It is important to note again that the PHP script above “getInformacaoQualquerDoServidor-ajax.php” should return only the raw data and not an HTML as before.

Now just call the function created from your HTML. This could be done, for example, using an HTML button, for example:

Listing 3: Calling getInformacaoQualquer () function.

<form method=”GET”>
<input value=”Mostre a informação” type=”button”
onClick=”getInformacaoQualquer();” />
</form>

A simple event handler “onClick” the “button” button was used to call the JavaScript function previously created to make the request to the server.

Now the last step would be to update the web page with the information that came from the server. For this the “atualizaPagina” must be configured to do this. Rather, it is noted that at this time enters an important figure in the scenario of using Ajax is the browser. The browser is largely responsible for transforming your HTML on a page with pictures, buttons, text, etc. Moreover, it is the Web browser that handles requests from Web servers and decides what to do with the answers he receive these servers. Therefore, it is the browser that does all the “dirty” work to convert the code into something the computer actually understands. Thus, when making the connection to the server is the browser that will keep the request and the response behind the scenes.

With the command shown above “request.onreadystatechange = atualizaPagina,” we have an indication that once the browser receives the server response it calls the “atualizaPagina”. This is because, remember what was previously explained, the communication with the server in Ajax applications is asynchronous, so do not know when the answer will come. It is for the browser to blame for this, for it is he who knows when the answer effectively reach the server.

Now the developer has to do is manipulate this response that came from the server. To do this, the code below gives a brief illustration:

Listing 3 : Manipulating the response from the server.

function atualizaPagina() {
if (request.readyState == 4) {
var respostaDoServidor = request.responseText;
}
}

The above function illustrates the use of the responseText property of the request object, this property contains the response returned by the server. Note that the command “var = respostaDoServidor request.responseText” catch up the server response and puts up this response in any variable. Now that we have a response from the server, just the above function assigned to somewhere in your page this new brought value from the server, to do so the developer can use DOM (Document Object Model) where a Javascript code can be used it to update values on a page dynamically. The property “readyState” above is who stores the current state of readiness when the property is 4 we have an indication that the server has completed the request. Therefore, all code under the conditional “if (request.readyState == 4)” will run when the request to the server is fully completed, ie, when a response is brought from the server.
Advantages and Disadvantages of Using Ajax

The advantages of using Ajax have increased speed of a site, the better use by the user and flexibility to choose the server side language.

Among the disadvantages are the use of frameworks that can make it impossible to use other frameworks, buttons to move forward and back browser will not return to the previous content, difficulty in maintaining the site because using many Ajax across the page may end up polluting the code with several different applications and treatments.

conclusions

This paper approached what is Ajax , how does it work and how it relates to other technologies to achieve your goal , as is its basic implementation and what are their advantages and disadvantages are . I will bring more articles about Ajax due to lot of questions and curiosities that still exist by the front-end developers and do not forget to write me if you have questions or suggestions for articles .




LEAVE A REPLY

Please enter your comment!
Please enter your name here