Pre-lab Activity

Read pages 373 to 388 in Learning PHP, MySQL, JavaScript, and CSS (2E) and answer the Pre-lab 8 quiz on Blackboard.

In-lab

Preparation

1. Rather than copy all of the files from lab7, do all your work inside of your lab7.

Part 1: AJAX Basic Example

1. Create a new file called ajax.js in lab7/js/ (yes, lab7) and add the following code:

   function find() {
   	var name = document.getElementById("last").value;
   	var xmlhttp =new XMLHttpRequest();
   	xmlhttp.onreadystatechange = function() {
   	  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   	    var content = xmlhttp.responseText;
   	    document.getElementById("result").innerHTML = content;
   	  }
   	}
   	xmlhttp.open("GET","quickfind.php?last="+name,true);
   	xmlhttp.send();
   }
   

2. Modify the existing file footer.html by adding a script tag for ajax.js:

       <script src="js/ajax.js"></script>
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/doc.js"></script>
   

3. Create a new file called quickfind.php in lab7 and add the following code: quickfind.txt
4. Create a new file called process.php in lab7 and add the following code: process.txt
5. Test process.php by uploading all the files you just created and changed:
   • js/ajax.js
   • footer.html
   • quickfind.php
   • process.php
6. Why exactly is this approach superior than the previous approach shown in this example: find.php
7. Write your detailed answer in a text file called lab8.txt

Part 2: What you can do with AJAX

1. Modify process.php in the following ways:
2. Remove the submit button
3. Add the following action to the "last" input text field: onkeypress="find()"
4. In lab8.txt, explain the profound change that we made and list one advantage and one disadvantage to this approach.

Part 3: What is AJAX really good for?

Follow you instructor as he shows you how to make the delete really really slick