Published using Google Docs
AJAX and JQUERY 101
Updated automatically every 5 minutes

AJAX and JQUERY 101

INTRODUCTION

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following features:

jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

Read more at http://www.w3schools.com/jquery/jquery_ref_ajax.asp

STEPS

0) Pre-requisite:

- http://setup-steps.blogspot.com/2014/04/working-with-project-panel-in-notepad.html

1) In Notepad++ Project, create Project201.

2) Create an html file, ajq101.html

2.1) Add the following codes to ajq101.html:

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $.get("demo_test.php",function(data,status){

    $("#div1").html(data + status);

    });

  });

});

</script>

</head>

<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>

</html>

2.2) Browse the file http://localhost/php201/ajq101.html and click the button.

- The script is requesting a resource demo_test.txt from the server but the server couldn’t find it.

3) Add AJAX resource file.

3.1) Create a file demo_test.txt . Add the following codes:

<h2>jQuery and AJAX is FUN!</h2>

<p id=’p1’>This is some text in a paragraph.</p>

3.2) Reload  http://localhost/php201/ajq101.html and click the button.

Observe that:

a) A new text is added when the button is clicked.

b)  jquery.min.js is loaded from ajax.googleapis.com

4) Change resource file to PHP script.

4.1) create demo_test.php. Add the following codes:

<?php

echo "<h2>jQuery and AJAX is FUN!</h2>";

echo "<p id='p1'>This is some text in a paragraph.</p>";

?>

5.2) Edit ajq101.html. Change demo_test.txt to demo_test.php:

5.3) Reload  http://localhost/php201/ajq101.html