Smart Programming Tricks for beginners (Part 8) AJAX Request in javascript | XMLHttpRequest Object

In this video I have explained about ajax request in javascript in simple steps with core.

Steps to do this task:
1. HTML page,
2. Server side page processor,
3. javascript code of XMLHttpRequest Object

1. Make a simple HTML form with few input type elements thats it! all we have done with this form.

2. Server side code contains as per you thinking/work.
You can save data to database by getting form data from user via ajax.
For now in this video session we have only sent json encoded data to client.

3. Javascript section contains use of XMLHttpRequest Object to process our Request to server.

The XMLHttpRequest Object
===========================
All modern browsers support the XMLHttpRequest object.

The XMLHttpRequest object can be used to exchange data with a server behind the scenes. This means
that it is possible to update parts of a web page, without reloading the whole page.

Create an XMLHttpRequest Object
All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have a built-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:
==============================
variable = new XMLHttpRequest();

Some of few methods and properties we have discussed here of XMLHttpRequest,
XMLHttpRequest Object Methods
========================
1. open(method,url,async,user,psw)
2. send()
3. setRequestHeader()

XMLHttpRequest Object Properties
==================
1. onreadystatechange
2. readyState
3. responseText
4. status

Have a look the javascript code,
[script]
function processdata() {
// code for ajax processing
// reading form data here by ID
var name = document.getElementById('txtName').value;
var email = document.getElementById('txtEmail').value;
var desc = document.getElementById('txtDesc').value;

var xmhttp = new XMLHttpRequest(); // creating an object
xmhttp.onreadystatechange = function() { using properties

if (xmhttp.readyState == 4 && xmhttp.status == 200) { // checking response status
console.log(xmhttp.responseText); // consoling the response from server
}
}
// var1=value&var2=value2 - urlencoded data
// When we use GET method then we need to pass all data with url
xmhttp.open("GET", 'http://localhost//tricks/SmartTricks/ajax.php?' + "name=" + name + "&email=" + email + "&desc=" + desc, true);
// setting header with request
xmhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmhttp.send();

xmhttp.open("POST", 'http://localhost//tricks/SmartTricks/ajax.php', true);
xmhttp.send("name=" + name + "&email=" + email + "&desc=" + desc);
}
[/script]

Integrate "tawk.to" chatbox to HTML page,
https://www.youtube.com/watch?v=OC5PQYMQ42M
Add More options for html elements
https://www.youtube.com/watch?v=ivekXnB7ttM
Complete form validation in easy steps
https://www.youtube.com/watch?v=Lglu4nwP3Sg
Sweet alert in javascript
https://www.youtube.com/watch?v=gso_gHLDEw0

SOCIAL :
===============
Subscribe : https://www.youtube.com/channel/UCB2flCo-gW6RhpVVXySqcMg
FACEBOOK : https://www.facebook.com/onlinewebtutorhub/
TWITTER: https://twitter.com/owthub
BLOG: https://onlinewebtutorhub.blogspot.in/

Also you can learn Wordpress Custom
===============
Wordpress Theme Development: https://goo.gl/MZ8maF

Wordpress Widget Development: https://goo.gl/Dc2htn

Wordpress Plugin Development: https://goo.gl/BA7dYG

Wordpress Theme Options Development: https://goo.gl/Vjv3Ub

Learn backbone.js here! : https://goo.gl/Qd2Pcs

Tags
===============
AJAX Request in javascript,
XMLHttpRequest Object,
javascript ajax request,
ajax,
ajax request,
jQuery ajax request,
handling ajax in javascript,
step by step ajax request tutorial in javascript,
tutorial for ajax request for beginners,
javascript tutorial for beginners,
smart programming tricks,
online web tutor,
profotech solutions,
core ajax request in javascript,

Thanks
Online Web Tutor
Keep learning and Sharing :)