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

Veröffentlicht am: 14 Januar 2018
auf dem Kanal: 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 :)

Auf dieser Seite können Sie das Online-Video Smart Programming Tricks for beginners (Part 8) AJAX Request in javascript | XMLHttpRequest Object mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Online Web Tutor 14 Januar 2018 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,075 Mal angesehen und es wurde von 18 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

12,487

385