jQuery and AJAX Lab

Part 1

First, let's examine the following web page:

Notice that when you refresh the page, all the status updates go away.

This is because the jquery code is only updating the active document loaded in your web browser. The status updates are not being stored on a server. When you refresh your web page, the active document is replaced by a new document fetched from the server.

Task 1

To better understand the code, add a date field to jquery.html, so the user can enter the date of the status update.

1. Create a local folder called ajaxlab

2. Download and save jquery.html to your ajaxlab folder

3. Open your local copy of jquery.html

4. Add another input text box <input type="text" name="?" /> for the date; give it a meaningful name

5. Modify the jquery code to fetch the date from the form and store it in a new variable

6. Finally, add the date to the displayed status update

Task 2

Email me the answers to three questions. Question 3 is at the very end.

Question 1: What does this code do exactly?

$("[name='status']").val("");
See:

http://www.w3schools.com/jquery/sel_attribute_equal_value.asp

http://www.w3schools.com/jquery/html_val.asp

Question 2: Where exactly are we inserting, i.e. we are inserting before _________?

.insertBefore("ul li:eq(0)")
See:

http://www.w3schools.com/jquery/html_insertbefore.asp

http://www.w3schools.com/jquery/sel_eq.asp

Part 2

Let's examine this web page:

ajax.php

To understand how it works, add a few status updates and then refresh the page

First, you should notice that jQuery is used to immediately update your page. Note that it is not updating your classmates' pages, but rather the script is updating a database table.

Second, you should notice that when you refresh your page, the status updates are fetched from the database table, so you can now see your updates as well as your classmates' updates.

Early Facebook - Why Do It This Way

[read this because it is facsinating]

In 2005, Facebook was growing so fast that Mark Zuckerberg and his partners could not purchase server capacity fast enough to meet demand. Facebook's status updates seemed very slow and the database processing was the bottleneck.

In 2005, displaying and updating the status pages of each user involved three tasks:

Generate the user's status page by fetching the user's friends statuses from a database table. (SQL select)

After reading their friends' statuses, the user would typically update their own status. (SQL insert)

Then, after the user submits their own status update, Facebook would refetch the user's friends statuses (including the user's status update) and regenerate the status page so the user see their own update. (SQL select that must wait for the SQL insert in step 2).

Facebook's servers must actually fetch and transmit all your friends updates twice: When you first visit your status update page and when you submit your own status update. The servers were so slow that it would take minutes for users to see their own updates and they would constantly hit refresh which created further load on the servers.

In the early days, Zuckerberg noticed that most Facebook users would simply login to see their friends recent status updates. Then, they might update their status and move on to other pages. Then, they might come back to their status update page much later to see any new updates.

Zuckerberg decided to use Javascript/jQuery to immediately update a user's page, which gives the user the impression that the server responded quickly. Then AJAX is used to insert the user's status update asychronously, which could take a few minutes. Eventually, the user's friends will see his/her update if they refresh their status update page or if they navigate away and then return later.

This change effectively cut the amount of data transmission in half until Facebook could acquire more servers.

Today, Facebook uses innovative server-side caching to further minimize the amont of database querying and they incrementally update pages rather than perform a complete fetch and regeneration.

Concept 1: A PHP program does the insert and nothing else

Here is the script that inserts status updates into a table. Notice that it does not do anything else except output the id number of the insertion.

Task 1

1. Create a new file called post.php in your ajaxlab folder

2. Type the code above into the file

3. Change the password from secret to the password shared by your instructor

4. Save and upload post.php to the server

5. Test your script by opening post.php in a web browsers with proper URL parameters

Example:

page.php?password=secret&name=bob&status=bored

Notice that the script simply outputs the id number of the last insertion.

6. Check to make sure your post was inserted into the table by visiting my show table script:

http://www.sienacs.com/ajaxlab/showtable.php

7. Show your instructor that you script works

Concept 2: JavaScript can "call" a PHP program

Your jquery.html script only updates your locally loaded page, but we can also have it asychonously "call" post.php and we can pass the name and status update to the server.

Task 2

1. Open your jquery.html file.

2. Change the date input text field to a password field

<input type="password" name="password" />

3. Add the following code right after you dyamically update the status list:

Important:

Notice that we have to "craft" the correct url to run the post.php program, i.e.,
page.php?password=secret&name=bob&status=bored
The program requires a password, name and status update, which are all fetched using jQuery
$("[name='status']").val();

4. Save and upload jquery.html to the server.

5. Test your script by opening jquery.html in a web browser and then submit some status updates.

6. Check to make sure your updates appear in the table:

http://www.sienacs.com/ajaxlab/showtable.php

Concept 3: PHP can still be used to generate page content

Instead of just showing your local status updates, we want the web page to display all the status updates in the database.

Task 3

1. Rename jquery.html to jquery.php, which will allow us to add PHP code:

2. Replace the following HTML code:

<ul>
<li><b>Hello there </b><i>by Eric Breimer</i></li>
</ul>

with the following PHP code:

The reason why I'm forcing you to type the mysql_connect code twice is because this code is really important.

First, it reminds you that we are connecting to an independent server, which requires two steps.
Second, it reminds you that PHP makes this easy by providing simple to use database functions.

Important: Note that the PHP code above prints the name and status but also the id number of each status update.

3. Test your script by opening jquery.php in a web browser and then submit some status updates.

4. Check to make sure your updates appear by refreshing the page.

Concept 4: AJAX "calls" can send data back to the web page

Remember that jquery.php prints the id numbers of each status update.
Remember that the post.php program also outputs the id of your last insertion.

If your insertion was #10 and the last update on your page was #7, then you know there are two new status updates (#8 and #9) and you should refresh your page to see them.

Thus, you should print the id number of your last status update insertion.

Task 4.

1. Add a paragraph to the body of jquery.php where the id equals "message", i.e., <p id="message"></p>

2. Add the onreadystatechange function as shown bellow

Important:

The output of post.php is stored in xmlhttp.responseText
Here is how onreadystatechange works: http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

3. Test your script by opening jquery.php in a web browser and then submit some status updates.

4. Check to make sure your insertion id number is displayed inside the message paragraph

5. Show your instructor that you script works

Question 3:

If we know the id number of most recent update (largest_id) and the id number of our latest insert (latest_id), we do not have to completely regenerate all the status updates. We could use AJAX to fetch all the updates between largest_id and latest_id, and then dynamically insert them into the status update list. Thus, we do not have to print the id numbers and the user will not have to refresh the page if there are new updates. Why exactly is this "a better way?" What do avoid doing?