Learn Beginners AJAX Videos Tutorial Web Design

What is Ajax in programming | Ajax in Hindi | Ajax full Course | What is the XMLHTTPREQUEST in Ajax

AJAX stands for Asynchronous JavaScript And XML. AJAX is not a programming language. In a nutshell, AJAX is the use of a browser built-in XMLHttpRequest object to communicate with web server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files, JavaScript and HTML DOM (to display or use the data). AJAX is an important front-end web development techniques using many web technologies on the client-side to create asynchronous Web applications that lets JavaScript communicate with a web server. It lets you load new content data from the server without leaving the current page a browser refresh, creating a better, faster experience for your web site’s visitors.

AJAX Videos Tutorial Web Design

In this course, you’ll learn how AJAX works and how you can use JavaScript to communicate with a web server. We’ll use plain JavaScript as well as jQuery to create AJAX requests and use the response to dynamically update your web pages. Along the way, you’ll build mini-projects to reinforce your learning. We wrap up the course with a small project, showing you how to apply what you’ve learned to pull images from Flickr and display them on your web site.

What is Ajax in programming?

Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The best definition I’ve read for Ajax is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.”

What does Ajax stand for?

Ajax is more than reload just a part of the page. Ajax stands for Asynchronous Javascript And Xml. The only part of Ajax that you need is the XMLHttpRequest object from javascript.

What is the XMLHTTPREQUEST?

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script.

What is Ajax Javascript?

Ajax (also AJAX; /ˈeɪdʒæks/; short for asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client-side to create asynchronous Web applications.

How to Create Ajax a Demo Project: Step-by step.

NOTE: If you want to run ajax file. you have to use your localhost server or Online Server.

Screenshort of Project.

Learn Beginners AJAX Videos Tutorial Web Design ajax for beginner hindi

ajax for beginner

ajax

 

First Download file or folde

Create folder project name as Ajax.

This is Folder and file structure

 

  • Ajax folder
    • css folder
    • js folder
    • file folder
    • ajax.html file

Step 1: Create Your ajax.html file 
We’ll create a sample HTML Ajax file with a div and button For change text Content:
Div with id (ajaxdemo)
Paragraph in tag ( <p></p> )
Button with function (onclick=”loadDoc()”)

Copy past this code in your ajax.html file.

<!DOCTYPE html>
<html>
<head>
<title>Demo Ajax Beginner Leant : Project By A.K.TANWAR</title>
</head>
<body>
<div class="container">
 
<div class="main">
<h2>Demo AJAX Example Content change click on Button</h2>
 <div id="ajaxdemo"> 
 <p>Sonam Kapoor, before entering the Bollywood industry was weighing around 86 Kgs and she has reduced her weight 
to 30 Kgs and she has looked superbly after reducing her weight. 
</p>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>
<br ><br ><br ><br >
<span><a href="http://www.freeunlimited3ginternet.com/">Devloped by A.K.TANWAR</a></span>
 </div>
 </div>
</body>
</html>

Step 2: Create Your css file name is style.css and folder location css/style.cssIf you don’t want to write this file. You can also use  direct downloaded css folder.

/* CSS Document */

/* url: http://www.freeunlimited3ginternet.com/ */
/* url: http://www.bt10n.com/ */

/* Below line is used for online Google font */
@import url(https://fonts.googleapis.com/css?family=Raleway);
h2{
    background-color: #FF8A65;
    padding: 31px 36px;
    margin: -13px -51px 5px;
    text-align: center;
    border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
 

div.main{
    
   padding: 11px 51px 26px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway;
    float: left;
    margin: 50px auto;
    BACKGROUND: rgba(255, 235, 59, 0.6);
}
 
button {
font-size: 16px;
    background: linear-gradient(#80DEEA 5%, #CDDC39 100%);
    border: 1px solid #2196F3;
    color: #4E4D4B;
    font-weight: bold;
    cursor: pointer;
    width: 23%;
    border-radius: 5px;
    padding: 10px 0;
    outline: none;
}
button:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

Step 3: Create Your js file name is ajax.js and folder location js/ajax.jsIf you don’t want to write this file. You can also use  direct downloaded js folder.

/* url: http://www.freeunlimited3ginternet.com/ */
/* url: http://www.bt10n.com/ */

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("ajaxdemo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "file/data/ajax_author.txt", true);
  xhttp.send();
}

Step 3: Create Your txt file name is ajax_author.txt and folder location file/data/ajax_author.txt. If you don’t want to write this file. You can also use direct downloaded file folder.

Zareen Khan who has made her debut with famous Movie Veer with Salman Khan, was over weight when she started her career a Beautiful and charming actress Zareen Kahn's weight was 100 kilograms before , later she reduced to 45 kg.



CSS Folder
JS Folder
img Folder
index.html
successfully.html

Step 4: How to use CSS folder and JS folder link <head> section in your ajax,html file.

<head>
<title>Demo Ajax Beginner Leant : Project By A.K.TANWAR</title>
<strong><!-- Add/Connect CSS File Here.. Example folder name: css/style.js -->
<link rel="stylesheet" href="css/style.css"/></strong>

<strong><!-- Add/Connect JavaScript File Here.. Example folder name: js/ajax.js-->
<script src="js/ajax.js"></script>
</head></strong>

Final ajax.html file run in Chrome, Mozilla Firefox and any browser.

Any Problem with this code any query please comment us. Thank you visiting here.

Watch Video of Learn Beginners AJAX Tutorial

comming soon