サイト構築のための言語学習: CS75 Lecture #7 Part-1 "AJAX" with jQuery - Building Dynamic Websites

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.