How to Create a Request Object in Ajax



So ajax is a language that allows us to send asynchronous requests to a server so that a browser can get information from the server without the page having to be refreshed.

Ajax is a very powerful tool used by many websites so that new information can be updated to a page without the full page having to be reloaded.

So this is the concept behind ajax.

To do this, obviously, requires a few steps.

One of the first steps that has to be done so that asynchronous requests can be made to a server to get information is we have to create a request object that requests information from the server.

We can't get information from the server without the browser making a request.

The first step in this whole ajax process is that the browser has to make a request to the server. Only through this request can the browser get information from the server asychronously.

So how can we make a function that makes a request?

Javascript Code to Make a Request to the Server

So the Javascript code to make a request to the server is shown below.

We'll explain this in full detail.

<script> function createRequest() { var request; try { request= new XMLHttpRequest(); } catch (tryMicrosoft) { try { request= new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMicrosoft) { try { request= new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request= null; } } } } </script>

So the block of code above is actually very simple, even though it may look a little complex.

So in this Javascript code, we create a function called createRequest().

This function is designed to make a request. And how this request is done is the function creates a request object.

So the first line of our code creates a variable called request. This variable, request, will represent the request object that the browser will send to the server when requesting some type of information from the server.

The reason we use try and catch is that creating a request object isn't that straightforward. There are many different browsers used today, including Microsoft Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, and many more. Different browsers respond to request objects differently. Therefore, a request object that works in one browser may not work in another browser. Therefore, we make it so that we try several different request objects. If a browser can't create a request object, it can try the others. This is why we use the try and catch method in this code.

So we first try, var request= new XMLHttpRequest(); This is the most standard way to create a request object.

If this request object doesn't work for a particular browser, we then try another request object. The next one is called tryMicrosoft because it is specific to a microsoft browser. In this case, we use the line, request= new ActiveXObject("Msxml2.XMLHTTP");

The next request object also is specific to Microsoft. The next one is called otherMicrosoft. In this case, we use the line, request= new ActiveXObject("Microsoft.XMLHTTP");

If the browser in use has failed to create a request object from all these methods, then we use a last catch method called failed. In this function, we set request equal to null. If this is the case, this means no request object is able to be created. Thus, the browser will not be able to communicate with the server to get information, because it has no way of making a request to the server.

So this is all that is required so that a browser can make a request to a server.

This is the first mandatory code needed so that a browser can make asynchronous requests to a server and update a page without the page having to be refreshed.

This is the first function in a string of functions that will be needed so that we can update a page without refresh pages.

In later pages, we'll show all else that is required to complete the whole process.

Since this function will be used and reused anything you want to use ajax in a script, it makes complete sense not to keep copy and pasting the actual block of code in the file where you want to use ajax. The best thing is just to store this block of code in a separate, external Javascript file. You can find this following Javascript file at the following link: createRequest.js

You then can put this external Javascript code by adding the following line shown below to your page.

<script src="myscripts.js"></script>

If you're using this external javascript file, you would need to place this line somewhere at the top of your page. And then you would have to put the following line in your primary function.

createRequest();

This line above calls the createRequest() function so that it can create a request object to communicate with the server.

So this is one way of doing it.

However, you can also do this in a slightly different manner. If you don't want to make this code be in a createRequest() function, all on its own, as it is, you can remove the line, function createRequest() {, as well as the last the curly brace (}), and copy and paste this code into the function the primary function that you want to call when an event occur that you want to trigger off a request.

So without the request object being in its own function, the code would be: Request Object Code. You would then just copy and paste this code into the function that you want to call that makes a request to the server for that information.

Related Resources

How to Retrieve Data from a MySQL Database Using AJAX & PHP

How to Insert Data Into a MySQL Database Using AJAX & PHP

How to Search a Website Directory Asynchronously Using AJAX & PHP

How to Create a Website Comment Box Using PHP, MySQL, and AJAX