DONATE  
MENU
AJAX
JSON
HTML
JAVASCRIPT

AJAX Tutorials

JAVASCRIPT AJAX

» Introduction

» HTTP Request Object

» AJAX Example

» AJAX GET Request

» AJAX POST Request

.. » AJAX » Javascript Ajax » AJAX GET Request
Share Tweet WhatsApp

AJAX GET Request

Most of our examples had always being sending requests with the GET method. In this page, we shall discuss on the method. The GET method is the easiest way to send an AJAX request to a file since you don't necessarily need to specify a request header for such requests. When you send a request via the GET method, whatever values accompanying such requests will be sent along the request URL. For example,
http.open("GET","myfile.php?name=Omamode&age=44",true);
http.send();
In the above, we sent an HTTP request to a file (myfile.php) located in same folder with our webpage. We are also sending two values alongside the request. This values can be receive by the file the request is being sent to and processed if any code to do so exist. The first value is "Omamode" and can be access with its parameter(name) in the receiving file. The second value is "44" and its name or parameter is age. Why You Shouldn't Use The GET Method It is usually not advisable to send requests using the GET method. This advice revolves on both security and limitations reasons. Security: Using the GET method is not a secured way to send requests especially requests that are supposed to be secured. For example, request that interacts or insert/delete/update data on your database using the file the request is being sent to. This is because if you are sending a request to this file path(myfile.php?name=Omamode&age=44) with its different parameters and values. If a user should visit yourDomainName/myfile.php?name=userValue&age=userValue in a web browser, the codes in the file will be executed as though it is the request. This will afford various elements an opportunity to destroy your database if not the full website especially when your codes have loopholes. Limitations: Sending request with the GET method limits the amount of parameters and parameters' values you can send along such request as you are sending the request in same URL as the file. When To Use The GET Method Use the GET method to quickly send requests that do not and can not threaten the security of your website and server. For example, getting the content of a text, html and whatever document. This will ensure that whenever an unscrupulous element visit that request URL, just the text content will be displayed and no executions. How To Send AJAX GET Request
  1. Create XMLHttpRequest() or ActiveXObject() object on a variable.
  2. Open request using the open() method. The arguments should be the GET, filepath, SYNC method. The filepath should be accompany with parameters and values if any.
  3. Send request using send() method.
  4. Handle request using the object properties.
EXAMPLE ajax_example_20210114082758.txt - A TEXT DOCUMENT WE SHALL BE SENDING REQUEST TO
JavaScript is a client - side web programming language that is used in instructing a website on how it should behave with its user. As a client side programming language, its interpretation lies with the web visitor's browser and not the computer where your website lives.

Unlike HTML, a website may not necessarily use JavaScript but then, a whole lot of websites use JavaScript because JavaScript enables you to create website that are very interactive and user friendly.

Copy PRACTICE IT

Our webpage - From where our AJAX request will be sent to the text document.
<h1>JAVASCRIPT TUTORIAL</h1>

<!-- The Content of the text file will be display on the div below -->
<div id='about_js'></div>

<!-- BUTTON -->
<p><button onclick='about_js()'>READ ABOUT JS</button></p>

<script>
//Function to send ajax request to the text document

function about_js(){
var http = new XMLHttpRequest(); //Creating http request object

http.open("GET","ajax_example_20210114082758.txt", true); //Opening request
http.send(); //Sending request

//HANDLING REQUEST
http.onreadystatechange = function(){
if (this.readyState = 4 && this.status == 200)
{
document.getElementById("about_js").innerText = this.responseText;
}
};
}
</script>

Copy PRACTICE IT

SUMMARY
  1. The GET method is the easiest way to send AJAX request to a file.
  2. But it is not secure.
  3. There is also a limit to the amount of values to send.
  4. It is therefore advisable to use this method to send request to files that cannot threaten your website and server's security e.g text documents.
  5. Sending a request with this method involves creating an AJAX request object, opening the file with the open() method and appending whatever values if any with the file URL, sending the request using the send() method and finally, handling the request state and response using the AJAX object properties.
Take a short quiz on AJAX GET Request.
Ask a question or tell us if AJAX GET Request is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode