Summary: This is the first lecture of the series. Building Dynamic Websites by Harvard OpenCourseWare with Great Instructor David J. Malan

Each assignment is expected to take 30 to 40 hours to complete.

<?
/*************************************************************
* froshims0.php
*
* David J. Malan
* malan@harvard.edu
*
* Implements a registration form for Frosh IMs.
* Submits to register0.php.
*****************************************************************/
?>

<!DOCTYPE html>

<html>
<head>
<title>Frosh IMs</title>
</head>
<body>
<div style="text-align: center">
<h1>Register for Frosh IMs</h1>
<br><br>
<form action="register0.php" method="post">
<table style="border: 0; margin-left: auto; margin-right: auto; text-align: left">
<tr>
<td>Name:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Captain:</td>
<td><input name="captain" type="checkbox"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input name="gender" type="radio" value="F"> F
<input name="gender" type="radio" value="M"> M
</td>
</tr>
<tr>
<td>Dorm:</td>
<td>
<select name="dorm">
<option value=""></option>
<option value="Apley Court">Apley Court</option>
<option value="Canaday">Canaday</option>
<option value="Grays">Grays</option>
<option value="Greenough">Greenough</option>
<option value="Hollis">Hollis</option>
<option value="Holworthy">Holworthy</option>
<option value="Hurlbut">Hurlbut</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="submit" value="Register!">
</form>
</div>
</body>
</html>

===================================

/***************************************************************

* register0.php

* Computer Science 50

* David J. Malan

* Dumps contents of $_POST.

***************************************************************/

<!DOCTYPE html>

<html>

<head>

<title>Frosh IMs</title>

</head>

<body>

<pre>

<? print_r($_POST); ?>

</pre>

</body>

</html>

============================================================

$_POST superglobal variable stores data in an array as follows;

Insert a test script to output the content of $_POST recursively.

<? print_r($_POST);?>

The following functions also output the content of the $_POST variable;

<? var_dump($_POST);?>

<? var_export($_POST);?>

Edit the configuration file, httpd.conf.

Tuesday, September 4, 2018

CS75 Lecture #7 Part-1 "AJAX" with jQuery - Building Dynamic Websites - Harvard OpenCourseWare

CS75 Lecture #7 Part-1 "AJAX" with jQuery - Building Dynamic Websites

Video Run Time:

2:01:01

Course Web Site by CS75.tv
Course Sillabus (Opens in a PDF)
Lecture Slides for Lecture 7 (Opens in a PDF)
Lecture 7 Source Codes
Lecture 7 Source Codes in PDF

Javascript to process HTTP XML DOM

Lecture 0: HTTP

Lecture 1: PHP

Lecture 2: PHP, Continued

Lecture 3: MVC, XML

Lecture 4: SQL

Lecture 5: SQL, Continued

Lecture 6: JavaScript

Lecture 7: Ajax

Slidesdownloadtorrent

Source Code

index

PDFdownloadtorrent

ZIPdownloadtorrent

Subtitles

Englishdownloadtorrent

Transcripts

Englishdownloadtorrent

Video

MP3downloadtorrent

MP4downloadtorrent

Lecture 8: Security

Lecture 9: Scalability

==============================

<!--

ajax1.html

Gets stock quote from quote1.php via Ajax, displaying result with alert().

David J. Malan

Computer Science S-75

Harvard Summer School

-->

<!DOCTYPE html>

<html>

<head>

// an XMLHttpRequest

var xhr = null;

* void

* quote()

* Gets a quote.

function quote()

{

// instantiate XMLHttpRequest object

try

{

xhr = new XMLHttpRequest();

}

catch (e)

{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

// handle old browsers

if (xhr == null)

{

alert("Ajax not supported by your browser!");

return;

}

// construct URL

var url = "quote1.php?symbol=" + document.getElementById("symbol").value;

// get quote

xhr.onreadystatechange = handler;

xhr.open("GET", url, true);

xhr.send(null);

}

* void

* handler()

* Handles the Ajax response.

function handler()

{

// only handle loaded requests

if (xhr.readyState == 4)

{

if (xhr.status == 200)

alert(xhr.responseText);

else

alert("Error with Ajax call!");

}

</script>

</head>

<body>

Symbol: <input id="symbol" name="symbol" type="text">

</form>

</body>

</html>

For a modern browser, there is a thing called XMLHttpRequest (xhr).
It's an object which comes with many methods as follows;

An AJAX call goes through a sequence of states as;
0,1,2,3, and 4. The call sequence from 0 to 2 goes fast. Most people pay attention to only the state 4 (loaded).

An HTML tag <form> is used below.
However, we are not interested in actually submitting a <form>.
Instead, we are making use of the HTTP background process that comes with submitting a <form>.
That's why the "RETURN" value is set to "false".

A variable is named "xhr", but it can be anything.
The variable "xhr" is initialized by setting it to be null.

Since Microsoft IE browser does not fully support the XMLHttpRequest method, a try/catch is setup to accommodate the IE users.

In javascript, document is a DOM object with getElementById() method to read the user input which is a stock symbol for a company name. A stock symbol is a short text string.