Example Code of AJAX Request
In this step, we will see how to create a Real example of Ajax Request with GET & POST using the input field. We will apply all the techniques learned in the previous steps.
Let’s start it with sending values in URL with GET method.
Submitting AJAX Request with GET Method
Here we will learn to send values in URL with GET and using this values in the PHP file and receiving the response and updating it the HTML document.
We have already created the div element with id ajax, I’m going to use this element to update the content from PHP file.
Other Articles in Learn AJAX
- AJAX Basics
- Using Console Log in AJAX
- Passing Data with AJAX
- Event Listeners in AJAX
- AJAX Example
- AJAX Debugging
- Ajax Country State City Select Dropdown List
- Ajax Search Suggestions Dropdown
- AJAX CRUD application
And I’m going to use the ajax.php file we created in previous sections with name variable assigned with GET superglobal.
1 2 |
$name = $_GET['name']; echo "You are learning PHP Ajax with ".$name; |
Inside JavaScript function Ajax, I’m creating a variable with the name or URL. With this url, I’m passing the name value. And I’ll use this variable url in open function.
Here is the code that it looks like
1 2 |
var url = 'ajax.php?name=Vivek Vengala' xhr.open('GET', url,true); |
And the entire function code, you can replace it with the previous code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function ajax(){ var xhr = new XMLHttpRequest(); var url = 'ajax.php?name=Vivek Vengala' xhr.open('GET', url,true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status ==200){ var text = xhr.responseText; var target = document.getElementById("ajax"); target.innerHTML = text; } } xhr.send(); } |
In the above code, I’m passing a static value in URL, I’ll convert this into submitting values through form input field.
Using Input Field to Submit AJAX Request with GET Method
In this step, we will see how to use the input field to submit values with GET method.
Our code remains same, but we just need to migrate it to work with the input field.
First of all, I’m going to add the input field before the submit button and your code should look like this.
1 2 |
<input type="text" name="name" id="name"> <button id="ajax-button">Submit</button> |
We should get this input fields value after executing the ajax function. We can get this value with the value attribute of the input field.
First I’m finding the input element with id and assigning it to a variable, then with the variable, I’m going to assign the value to a new variable. Finally, we will use this variable nameVal to pass the values.
1 2 3 |
var name = document.getElementById("name"); var nameVal = name.value; var url = 'ajax.php?name=' + nameVal; |
This the complete code of the ajax function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function ajax(){ var name = document.getElementById("name"); var nameVal = name.value; var xhr = new XMLHttpRequest(); var url = 'ajax.php?name=' + nameVal; xhr.open('GET', url,true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status ==200){ var text = xhr.responseText; var target = document.getElementById("ajax"); target.innerHTML = text; } } xhr.send(); } |
In the above code, I’m using GET method. In the next step, we will see it with POST method.
Using Input Field to Submit AJAX Request with POST Method
In this step we are going to submit a request with the POST method, previously we have seen how to submit POST request with values.
For POST request we should change the content type with setRequestHeader function.
Here is the code
1 2 3 |
var url = 'ajax.php'; xhr.open('POST', url,true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
We will pass the values with POST method in Send function.
1 |
xhr.send('name=Vivek'); |
With above code, you should successfully send POST request and the response should be updated inside HTML if you are following from the previous steps.
Now we should make the change to send the values from the input field instead of the manual value.
1 |
xhr.send('name='+nameVal); |
And the complete code of the Ajax Function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function ajax(){ var name = document.getElementById("name"); var nameVal = name.value; var xhr = new XMLHttpRequest(); var url = 'ajax.php'; xhr.open('POST', url,true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status ==200){ var text = xhr.responseText; var target = document.getElementById("ajax"); target.innerHTML = text; } } xhr.send('name='+nameVal); } |