Example Code of AJAX Request - Coding Cyber

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

And I’m going to use the ajax.php file we created in previous sections with name variable assigned with GET superglobal.

PHP
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

JavaScript
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.

JavaScript
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.

XHTML
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.

JavaScript
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.

JavaScript
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

JavaScript
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.

JavaScript
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.

JavaScript
1
xhr.send('name='+nameVal);

And the complete code of the Ajax Function

JavaScript
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);
}

email-subsribe

Get All My Scripts For FREE in Your E-Mail

Enter Your Email Address To Download Now

Related Posts
No related posts for this content
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: