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

Publicado el: 14 enero 2018
en el canal de: Online Web Tutor

1,075

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,
   • Smart Programming Tricks for beginners (Pa...
Add More options for html elements
   • Smart Programming Tricks for beginners (Pa...
Complete form validation in easy steps
   • Smart Programming Tricks for beginners (Pa...
Sweet alert in javascript
   • Smart Programming Tricks for beginners (Pa...

SOCIAL :
===============
Subscribe :    / @onlinewebtutor
FACEBOOK :   / onlinewebtutorhub
TWITTER:   / 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 :)

En esta página del sitio puede ver el video en línea Smart Programming Tricks for beginners (Part 8) AJAX Request in javascript | XMLHttpRequest Object de Duración hora minuto segunda en buena calidad , que subió el usuario Online Web Tutor 14 enero 2018, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 1,075 veces y le gustó 18 a los espectadores. Disfruta viendo!

13,092

437