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:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
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:
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>
|
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
No comments:
Post a Comment